[jQuery] Re: show/hide FAQ - simplify my code?

nice!
the use of js variables must be further back in the book... ;-)
I hadn't even thought of doing it that way - thanks very much.

--

--
Michael Evangelista, Evangelista Design
Web : www.mredesign.com
Newsgroups: news://forums.mredesign.com
Blog : www.miuaiga.com

Purely as an example ...

$(document).ready(function(){
 // close the offDiv content sections (no javascript = content is all
visible)
 $('.offDiv > .show-hide').hide();
 // showLink/hideLink shows/hides the content; showAll/hideAll shows/hides
all the content
 $.each(['.show', '.hide'], function(i,v){
     //opt is object of { from:"switch div class from", to:"switch div
class to", opp:"opposite of v" }
     var opt = v == '.show' ?
               {from:'offDiv', to:'onDiv', opp:'.hide'} :
               {from:'onDiv', to:'offDiv', opp:'.show'};
     $('a' + v + 'Link').click(function(){
         $('a' + opt.opp + 'All:hidden').show();
         if($('a' + v + 'Link:visible').not(this).size() == 0){
           $('a' + v + 'All:visible').hide();
         }
         $(this).siblings('.show-hide').slideToggle('slow').end()
           .parents('.' + opt.from).removeClass().addClass(opt.to).end()
           .siblings(opt.opp + 'Link').andSelf().toggle();
         return false;
       })
       // only show if relevant class is set on parent
       .filter(function(){ return $(this).parent().hasClass(opt.from);
}).show();
     $('a' + v + 'All').click(function(){
         $('a' + v + 'Link:visible').click();
         $(this).hide();
         return false;
       })
       // only show if relevant, ie don't show showAll if all div are
currently open
       .filter(function(){ return ($('a' + v + 'Link:visible').size());
}).show();
   });
  // title is clickable, and toggles the content, so just click the
relevant link...
 $('.faqTitle').click( function() {
     $(this).siblings('a:visible').click();
     return false;
   });
});

Does exactly what yours does, with one extra check on the showAll/hideAll
buttons (only display them if there are actually items to show/hide
respectively). I haven't overloaded on the comments, but see if you can
follow it...
(BTW it's v1.2+ dependent.)


MichaelEvangelista wrote:

http://www.mredesign.com/demos/jquery-show-hide/#thedemo

got it working just the way I wanted (thanks, Glen!)

I wrote out these rules long hand as I went through the creation/learning
process,
but I am sure there are several ways I could compact this to fewer lines.

Anybody want to have a shot at simplifying / combining rules, just for the

sake of example?
The code for my setup is below the demo on that same page

Only a few weeks in and I am really digging the power of jQuery... and the

community that seems to exist around it.
jQuery is just so ... usable!
( If a js-idiot like me can build something like this after just a few
tutorials, the buzz is true, jQuery will be unstoppable. )

--
Michael Evangelista, Evangelista Design
Web : www.mredesign.com
Newsgroups: news://forums.mredesign.com
Blog : www.miuaiga.com

--

--

View this message in context: http://www.nabble.com/show-hide-FAQ---simplify-my-code--tf4572895s27240.html#a13058588 Sent from the jQuery General Discussion mailing list archive at Nabble.com.