CODEWITHSUNDEEP
jqueryfadeinfadeout
dvlden
dvlden

Reputation: 2462

fadeIn/fadeOut on specified and different button click

Yesterday I had troubles making something to rise up and down on click of each button.

Thanks to user from stackoverflow "j08691" this problem has been resolved. However, I cannot manage to figureout how do I make content to fadeIn & out depending on each.

JS Fiddle

The user that helped me havent seen this one in my question. Perhaps somebody else can help me.

CSS and HTML sample elements has been added in fiddle. I just don't know how to make it work.

For example as in fiddle we have button A, B, C and D.

If "A" is clicked it rises up and <div id="letterA">Letter A opened-content.</div> shall appear. If button A is clicked again it should disappear again. (fadeIn & fadeOut).

If Button "A" is active and any other button B, C or D is clicked, again button A will fadeOut the content and other clicked button will appear.

Its really simple to explain, but hard to make it work.

Thanks in advance.

Upvotes: 0

Views: 160

Answers (2)

dvlden
dvlden

Reputation: 2462

Update @MarvinLabs :D 

var target = $(this).data('target');    
            $("div#collapseContent").children(target).fadeIn().siblings().fadeOut();
            if($(this).height() != 15 ) $("div#collapseContent").children(target).fadeOut();

It work but I am not sure if that is fine or it can be better. So please update your answer or reply here if theres better solution ;)

Cheers and thanks again.

Upvotes: 0

Vincent Mimoun-Prat
Vincent Mimoun-Prat

Reputation: 28583

Here is a solution: http://jsfiddle.net/KQ3sq/1/

I had to change the markup a bit though. The idea is to link each li with its target div. To do that I am using the HTML5 data attributes. You could also consider adding a link with an anchor to the corresponding div (fallback when no JS).

Then the JS doing the magic is:

var target = $(this).data('target');    
$("#content").children(target).fadeIn().siblings().fadeOut();

Upvotes: 2

Related Questions