CODEWITHSUNDEEP
jqueryhtmlhidetoggleshow
pab
pab

Reputation: 973

jQuery multiple hide and show panels

The idea is to have a filter on the right similar to this one: - Filter toggle example

So basically i want to be able to have multiple expanded and collapsed divs like the example. The plugins i have found only allow for one div to be expanded at any given time.

Any help would be great,

Thanks

Upvotes: 2

Views: 5964

Answers (3)

Split Your Infinity
Split Your Infinity

Reputation: 4229

You can use the jQuery UI Accordion, but instead of having on accordion with multiple section you can create multiple accordions with one section.

Not sure what plugin you are using, but maybe you can use the same trick.

Or write your own...

<div class="panel collapsed">
    <h2 class="header">header1</h2>
    <div class="content">This is content</div>
</div>
<div class="panel">
    <h2 class="header">header2</h2>
    <div class="content">This is content</div>
</div>​​​​​​​​​​​​​​

The CSS...

.panel {
    margin-bottom: 10px;
    background-color: silver;
    width: 200px;
}
.panel .header {
}
.panel.collapsed .content {
    display: none;
}

​ And the JavaScript (using jQuery)... JSFiddle here

$(".panel .header").click(function() {
    $(this).parent().toggleClass("collapsed")
})

​ Or if you like fading... JSFiddle here

​$(".panel .header").click(function() {
    $(this).next().fadeToggle();
})

​

Upvotes: 2

Barlas Apaydin
Barlas Apaydin

Reputation: 7315

you can show and hide multiple panels with this struckture;

here is demo

jQuery

$('.content').slideUp(1000);

$('.panel').click(function() {//open
   var takeID = $(this).attr('id');//takes id from clicked ele
   $('#'+takeID+'C').slideDown(1000);//show's clicked ele's id macthed div = 1second
});
$('span').click(function() {//close
   var takeID = $(this).attr('id').replace('Close','');//strip close from id = 1second
    $('#'+takeID+'C').slideUp(1000);//hide clicked close button's panel
});​

html:

<div class="panel" id="panel1">panel1</div>
<div id="panel1C">content1
  <span id="panel1Close">X</span>
</div>

<div class="panel" id="panel2">panel2</div>
<div id="panel2C">content2
  <span id="panel2Close">X</span>
</div>

<div class="panel" id="panel3">panel3</div>
<div id="panel3C">content3
  <span id="panel3Close">X</span>
</div>

​

Upvotes: 0

Naor
Naor

Reputation: 24063

Look at this question/answer.

jQuery(document).ready(function(){
    $('.accordion .head').click(function() {
        $(this).next().toggle();
        return false;
    }).next().hide();
});

Upvotes: 0

Related Questions