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>

score 0 · Answer 1 · answered Jun 01 '12 at 14:33

0

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

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

answered Jun 01 '12 at 14:33

Anthony Atkinson

3,101
3
20
22

score 0 · Accepted Answer · answered Jun 01 '12 at 14:50

0

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.

answered Jun 01 '12 at 14:50

Eduárd Moldován

1,495
3
13
29

Yes I want this exactly. In order to show the div after fade effect, firebug shows style="" but to be shown it should be style="display:block". alert($('lesson-'+tab)) shows [object HTMLDivElement] – user1425871 Jun 01 '12 at 15:06
Do you have this code online somewhere? Where I can check it out? – Eduárd Moldován Jun 01 '12 at 15:12
I will check it shortly and get back here with my answer. – Eduárd Moldován Jun 02 '12 at 16:13
I have solved it by adding this line of code $('lesson-'+tab).setStyle({ opacity:0.0, display: 'block' }); you can see in the link above – user1425871 Jun 03 '12 at 09:19

showing content of tab after giving fade effect

2 Answers2