Let's get up to speed a little then :
$('#div1, #div2, #div3, #div4, #div5').click(function() { // we can use
multiple selectors in one selection, just like in css, and we can give the
click callback to all of them at once too
$('#div1, #div2, #div3, #div4, #div5').hide(); // we can also hide them all
at once, in fact most jQuery's functions may be used on a whole selection at
once
$(this).show(); // we've hidden all of them, but we know which one we've
clicked on, it's been bound to this ; though this is just the dumb dom
element, and we need to wrap it in sweet sweet jQuery
});
Though I'd suggest not to hide them if you want to click them after, let's
see how to do this.
Now let's assume you put a div inside each of your divs to handle the
content, and put any other element to get the actual click. Like that :
<div id="div1">
<a href="#div1">click handler for div1</a>
<div>
any content you like
</div>
</div>
...
Now we can do something like this :
$('#div1 > a, #div2 > a, #div3 > a, #div4 > a, #div5 > a').click(function()
{ // now we select the direct child link in each div to handle the click
$('#div1 > div, #div2 > div, #div3 > div, #div4 > div, #div5 > div').hide();
// we hide all the contents
$(this).closest('div').children('div').show(); // closest takes the closest
element (parent or self) matching the selector, children takes the children
of an element matching the selector
});
Hope this gives you a good foretaste of things to come with jQuery ^^
Michel Belleville
2009/11/27 Andre Polykanine <an...@arthaelon.net>
> Hello ghostrunner and all,
>
> There are two methods: show() and hide() respectively.
> So you just show the necessary div and hide the four others, like
> this:
>
> $(function () {
> $("#div1").click (function (event) {
> $(this).show();
> $("#div2").hide();
> $("#div3").hide();
> $("#div4").hide();
> $("#div5").hide();
> });
> });
>
> I know it's not so handy (I'm also rather new in jQuery). Maybe
> someone will suggest you something else...
>
> --
> With best regards from Ukraine,
> Andre
> Skype: Francophile; Wlm&MSN: arthaelon @ yandex.ru; Jabber: arthaelon @
> jabber.org
> Yahoo! messenger: andre.polykanine; ICQ: 191749952
> Twitter: m_elensule
>
> ----- Original message -----
> From: ghostrunner <p...@rasmusa.dk>
> To: jQuery (English) <jquery-en@googlegroups.com>
> Date: Friday, November 27, 2009, 7:40:17 PM
> Subject: [jQuery] Switch between five divs
>
> Hey.
>
> JQuery is pretty new to me.
>
> I have five <div> on my site.
> Only one of them should be visible at one time.
> Next to det div I have 5 links.
> i would like to be able to switch between them by cliking on a link
> (there is a link for every div).
>
> I can't figure out how to do this.
>
>
