Question

I’m new to JQuery. I have not found my answer anywhere and I’ve looked for quite some time.
I’d like to have the “panel” open when any trigger is clicked and then the corresponding text displayed. if you click on another trigger, the panel remains open and the first text slides up (becomes hidden) and the next block of text is displayed.

HTML

<a>trigger text 1</a>
<a>trigger text 2</a>
<a>trigger text 3</a>

<div id="panel" style="display: none;">
    <div id="info-1" style="display: none;"> text </div>

    <div id="info-2" style="display: none;"> text 2 </div>

    <div id="info-2" style="display: none;"> text 3 </div>
</div>

Jquery: I won’t even bother with the code I was trying…

Answer 1

You could try:

$('a').click(
    function(){
        var which = $(this).index();
        $('#panel').show();
        $('#panel > div:visible').slideUp();
        $('#panel > div').eq(which).slideDown();
    });​

JS Fiddle demo.