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.
