showing content of tab after giving fade effect

Question

In my page there are a number of tabs and I want to show the content of tab by giving fade effect. In order to do this I need the tab divs which has a class name of sectionContent after fade function to be style="display:block". However when I look at them from firebug it is shown as for example:

<div id="lesson-grammar" class="sectionContent" style=""> 

and so the tab is not shown. How can I do that? thanks a lot.

new Ajax.Request(ajaxUrl,
  {
     method:'post',
     onSuccess: function(data){         
         var tmp=data.responseText;
         $$('.exercise-main .content').invoke('insert',tmp);
         $$('.exercise-main .sectionContent').invoke('setStyle','display:none');

         $('lesson-'+tab).fade({
             from:0,
             to:1,
             afterFinish: function(){
              //do the job                                     
             }
         });

     }
 });

<div class="exercise-main">
  <div class="content">
    <div id="lesson-discussion" class="sectionContent">  
     ...
    </div>
    <div id="lesson-grammar" class="sectionContent">  
     ...
    </div>
    <div id="lesson-dialogue" class="sectionContent">  
     ...
    </div>
   </div>
</div>

Answer 1

Let me understand your problem first, from your code and your explanation.

What you want to achieve is hiding all the tabs after the ajax response arrives, insert the response into a new tab, then display it with a fade in effetct?

If this is your desire, then you probably have a selector problem. You are using $$ selectors except for one place:

$('lesson-'+tab).fade({...

I think this is the problem. Does your firefox/chrome console show any problems? What if you try to run this:

$('lesson-'+tab)

What does happen? Do you see the proper HTML element logged into the console?

Try these, then let me know the result and I will try to help.

Answer 2

I believe your style declaration is not in the right syntax. Try this:

$$('.exercise-main .sectionContent').invoke('setStyle',{display: "none"});