This is quite generalized and is bookmarkable...
- http://enure.net/dev/hide-all-except-one/
On Fri, Feb 22, 2008 at 6:50 AM, J Moore <[EMAIL PROTECTED]> wrote:
>
>
> good tips so far.
>
> I just wanted to add that using classes and ids works well.
>
> <a href="#" id="blackbook" class="show">show blackbook</a>
> <a href="#" id="redbook" class="show">show redbook</a>
>
> <div class="book hidden" id="blackbook-content">blackbook stuff...</
> div>
> <div class="book hidden" id="redbook-content">redbook stuff...</div>
>
> This makes your click function simpler.
>
> $('a.show').click(function(){
>
> hide_divs();
> var x = $(this).attr('id');
> $('#'+ x + '-content').show('fast');
> return false;
> });
>
> The hide_divs method is also a bit simpler.
>
> var hide_divs = function(){
> $('div.book').hide('fast');
> };
>
> You might notice that the div has a "hidden" class. This just makes
> initialization simpler, since the items are hidden on page load. The
> css would be something like:
>
> div.hidden { display: none; }
>
> -j
>
>
>
> On Feb 22, 4:02 am, andrea varnier <[EMAIL PROTECTED]> wrote:
> > On 21 Feb, 23:03, Sientz <[EMAIL PROTECTED]> wrote:
> >
> > > $('a#blackbook').click(function() {
> > > //HIDE DIVS
> > > hide_divs();
> > > //SHOW LISTED DIV
> > > $('.blackbook').show('fast');
> > > return false;
> > > });
> >
> > you see you got all these functions that basically do the same thing.
> > if an anchor has an id, they show the corresponding div
> >
> > I think you could do it like this
> >
> > $('a[id]').click(function(){
> > hide_divs();
> > var x = $(this).attr('id');
> > $('div[class=" + x + "]').show('fast');
> > return false;
> >
> > });
> >
> > and should do the same thing.
> > but you could go further, and use classes in a different way.
> > let's say that instead of calling them divs with 'human' names, we can
> > use more 'efficient' names, like:
> >
> > hs_a
> > hs_b
> > hs_c
> > hs_d
> > ...
> > where hs stands for hide/show (just an example).
> > in this way the function hide_divs becomes something like
> >
> > var hide_divs = function(){
> > $('div[class^="hs"]').hide('fast'); /* this selector looks for
> > the div(s) that have a classname that starts with the string 'hs' */
> >
> > };
> >
> > then you give corresponding id's to the anchors, so the other on I
> > wrote before:
> >
> > $('a[id^="hs"]').click(function(){
> > hide_divs();
> > var x = $(this).attr('id');
> > $('div[class=" + x + "]').show('fast');
> > return false;});
>
