Thank you! That's *exactly* the sort of thing I had in mind, and
*exactly* how I thought it might work (I just didn't know exactly how
to do it myself). Great commenting too; it'll really help me learn!
On May 8, 5:24 am, Wizzud <[EMAIL PROTECTED]> wrote:
> Something like this?...
>
> $(document).ready(function() {
> var sp = $('.searchpanel').hide() //hide boxes initially
> , so = $('#searchoptions')
> , anim = false //prevents fast clicking of second option
> ;
> // shows all
> $('a.showall', sp).click(function() {
> anim = true;
> //hide the visible search box...
> sp.filter(':visible').hide();
> //show the options...
> so.show('slow', function(){ anim = false; });
> return false;
> });
> // show and hide
> $('a', so).click(function() {
> if(!anim){ //only act on the first option clicked...
> anim = true;
> //get the target from the clicked option's href...
> var t = $('#'+this.href.split('#')[1]);
> //hide the options...
> so.hide('slow', function(){ //when options are hidden...
> //...show the target searchbox...
> t.show('slow', function(){ anim = false; });
> });
> }
> return false;
> });
>
> });
>
> On May 8, 1:52 am, illtron <[EMAIL PROTECTED]> wrote:
>
> > I'm new to (writing anything myself with) jQuery, so bear with me if
> > this is a boneheaded question.
>
> > I'm trying to build a box that starts with six options, then if you
> > click one of them, that content fades out, and is replaced with the
> > content for that option. (You're given a different search box for each
> > one).
>
> > This is the code I have to show and hide. It sort-of works. It's
> > certainly not optimal. In the actual code I have five more of that
> > second function, each one specific to the div that is revealed. I know
> > there has got to be a way to reuse the code.
>
> > Based on the HTML below, can you help me optimize the jQuery code so I
> > don't have to repeat things six times?
>
> > Also, what I have here does work, but it's hella choppy in IE. Is
> > there a better way to fade out and then fade in?
>
> > <script type="text/javascript">
>
> > $(document).ready(function() {
> > // hides the boxes before the page loads
> > $('.searchpanel').hide();
>
> > // show and hide
> > $('a.show').click(function() {
> > $('#searchoptions').hide('slow');
> > $('#musicsearch').show('slow');
> > return false;
> > });
>
> > //
> > // And five more just like the one above
> > //
>
> > // shows all
> > $('a.showall').click(function() {
> > $('#searchoptions').show('slow');
> > $('.searchpanel').hide();
> > return false;
> > });
>
> > });
>
> > </script>
>
> > Here's the HTML I'm working with.
>
> > <div id="listings">
> > <div id="searchoptions">
> > <h3>What are you looking for?</h3>
> > <ul id="searches">
> > <li><a href="#musicsearch"
> > class="showmusic"><span>Music</span></
> > a></li>
> > <li><a href="#eventsearch"
> > class="showevents"><span>Events</span></
> > a></li>
> > <li><a href="#restaurantsearch"
> > class="showfood"><span>Restaurants</span></a></li>
> > <li><a href="#barsearch"
> > class="showbars"><span>Bars & Clubs</
> > span></a></li>
> > <li><a href="#hotelsearch"
> > class="showhotels"><span>Places to
> > stay</span></a></li>
> > <li><a href="#recreationsearch"
> > class="showrec"><span>Attractions
> > & recreation</span></a></li>
> > </ul>
> > </div>
>
> > <div id="searchboxes">
>
> > <div id="musicsearch" class="searchpanel">
> > <h3>Search for Music</h3>
> > <p>form goes here</p>
> > <p><a href="#searchbox" class="showall">«
> > Start Over</a></p>
> > </div>
> > -- and five more just like the one above -
> > <div>
> > </div>
