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>

Reply via email to