I am new to jQuery and I'm trying to create a toggle effect between sibling divs. In other words, when I click to show the next div, the previous one should automatically close. Currently, the previous div doesn't close when the next one is opened, and I can't figure out why. I have to manually open and close each div.
Apologies for the beginner question! :)
Any assistance would be greatly appreciated!
function showHide(button){
$(button).next('.showhide').toggle().siblings('.showhide').hide();
}
The HTML:
<div class="acc-s-container">
<div class="acc-s-header" id="div" onclick="showHide(this)">
<h1>Account Settings</h1>
</div>
<div id="divcontent" class="acc-s-content showhide">
<p>content</p>
</div>
</div>
<div class="acc-s-container">
<div class="acc-s-header" id="div2" onclick="showHide(this)">
<h1>Account Settings</h1>
</div>
<div id="divcontent2" class="acc-s-content showhide">
<p>content</p>
</div>
</div>
<div class="acc-s-container">
<div class="acc-s-header" id="div3" onclick="showHide(this)">
<h1>Account Settings</h1>
</div>
<div id="divcontent3" class="acc-s-content showhide">
<p>content</p>
</div>
</div>
CSS
.acc-s-content{display:none;}