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;});
