Question

I have this markup:

        <span id="tabPhp" class="infoData">PHP</span>
        <span id="tabJquery" class="infoData">jQuery</span>
        <span id="tabWordpress" class="infoData">WordPress</span>
        <span id="tabCss3" class="infoData">CSS3</span>
        <span id="tabMysql" class="infoData">MySQL</span>
        <div class="infoExpand">
            <p id="infoPhp">PHP</p>
            <p id="infoJquery">jQuery</p>
            <p id="infoWordpress">Wordpress</p>
            <p id="infoCss3">CSS3</p>
            <p id="infoMysql">MySQL</p>
        </div>

And this jQuery:

$('.infoData').click(function(){
    $('.infoExpand p').hide();
    var id = this.id;
    id = id.replace("tab", "info");
    console.log(id);
    $('.infoExpand, #' + id).slideToggle();
});

By default div infoExpand is set to display:none so what i want to happen is, when the user clicks span id tabPHP, infoExpand slides down along with p id infoPhp. This works fine but when the user hits another tab, it just slides the currently shown p. I want it to slide up the current one and slide down the one they have clicked.

Does that make sense?

Thanks

Answer 1

You could do (UPDATED):

$('.infoExpand p').hide();
$('.infoData').click(function(){
    var id = this.id;
    id = id.replace("tab", "info");
    var clicked = $('.infoExpand #' + id);
    if (clicked.is(':visible')){
       clicked.slideToggle();
    }else{
       $('.infoExpand p:visible').slideToggle();
         clicked.slideToggle();
    }

});

fiddle here: http://jsfiddle.net/35MfY/1/