CODEWITHSUNDEEP
jqueryhtml
user2836177
user2836177

Reputation: 11

Div show/hide - hide all divs

I have jquery displaying 3 different div's to show/hide onclick. Everthing works as required except that I cannot hide the div once it's open.

HTML

<table id="brand-groups">
  <tr>
    <td id="brandgroupopen-all" class="brand-groups-tab" valign="middle"> ALL BRANDS</td>
    <td id="brandgroupopen-fashion" class="brand-groups-tab" valign="middle">POPULAR FASHION BRANDS</td>
    <td id="brandgroupopen-beauty" class="brand-groups-tab" valign="middle">POPULAR BEAUTY</td>
  </tr>
</table>
<div class="brandgroupoptions">
 <div id="brandgroupoptions-all" class="brandgroupoption init-hidden">a</div>
 <div id="brandgroupoptions-fashion" class="brandgroupoption init-hidden">fashion</div>
 <div id="brandgroupoptions-beauty" class="brandgroupoption init-hidden">beauty</div>
</div>

Jquery

$('.brand-groups-tab').click(function(){

    var myId = $(this).attr('id').replace('brandgroupopen-', '');

    $('.init-hidden').hide();
    $('#brandgroupoptions-' + myId).slideToggle("slow");

});

here is the fiddle link: http://jsfiddle.net/soniayastays/HHj3N/

Upvotes: 1

Views: 405

Answers (2)

bfavaretto
bfavaretto

Reputation: 71908

To hide all divs inside <div class="brandgroupoptions">:

$('.brandgroupoptions div').hide();

Upvotes: 3

Henrique Feijo
Henrique Feijo

Reputation: 673

Didn't fully understood what exactly you are looking for, but it could be this:

$('.brand-groups-tab').click(function(){

    var myId = $(this).attr('id').replace('brandgroupopen-', '');

    $('.init-hidden').hide();
    if (myId == 'all')
        $('.brandgroupoptions div').slideToggle("slow");
    else
    $('#brandgroupoptions-' + myId).slideToggle("slow");

});

Upvotes: 0

Related Questions