[jQuery] Hiding other divs when I show one
I'm working on a script, and I've got it working about halfway. The
page will show a bunch of panels, and clicking a link hides a text div
and shows a form.
Here's the jQuery. Right now, it toggles the searchform and panel_text
divs in the same searchpanel div. I'd like to have it so that when you
show the form for a different searchpanel, it will hide any other
currently visible searchform.
So for example, if I come to the page and click to reveal the form in
#panel1, I want panel 1 to go back to showing the text when I show the
form for #panel2.
While I'm at it, can we fade out instead of just switching these?
Thanks!
$(document).ready(function(){
$(".searchpanel .searchform").hide(); // hide the forms
$("a.showform").click(function(){
$(this).siblings(".searchform").toggle();
$(this).siblings(".panel_text").toggle();
return false;
});
});
Here's some example HTML, set up pretty much the same as my actual
html, just simplified a bit.
<div id="searchbox">
<div class="searchpanel" id="panel1">
<a class="showform">Click to toggle</a>
<div class="panel_text">Text</div>
<div class="searchform">Form</div>
</div>
<div class="searchpanel" id="panel2">
<a class="showform">Click to toggle</a>
<div class="panel_text">Text</div>
<div class="searchform">Form</div>
</div>
<div class="searchpanel" id="panel3">
<a class="showform">Click to toggle</a>
<div class="panel_text">Text</div>
<div class="searchform">Form</div>
</div>
<div class="searchpanel" id="panel4">
<a class="showform">Click to toggle</a>
<div class="panel_text">Text</div>
<div class="searchform">Form</div>
</div>
</div>