Question

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.

Answer 1

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();