[jQuery] Re: Hiding other divs when I show one

[Andy Matthews]

Do you have a link you can provide? Something online? 

-----Original Message-----
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of illtron
Sent: Wednesday, August 27, 2008 8:37 AM
To: jQuery (English)
Subject: [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>