Show/hide div with click

[Doc1355]

Hi,
I have a page with tow buttons and and two DIVs. What I'm trying to do is:
--- When the page loads, button 1 and DIV1 loads
--- if user clicks on button 1, then button1 and DIV 1 disappear and Button2 and DIV2 appear.
--- if user clicks on button 2 again, it should make button1 and DIV 1 visible and button2 and DIV2 invisible.
I like this to have some sort of animation such as fadeIn/fadeOut or something similar.
Any suggestion?
Thanks

 

[feherke]

Hi

I suppose you mean jQuery's [tt]fadeIn()[/tt]/[tt]fadeOut()[/tt] :

[b]<div[/b] [maroon]id[/maroon][teal]=[/teal][green][i]"div1"[/i][/green][b]>[/b]
div one
[b]<a[/b] [maroon]href[/maroon][teal]=[/teal][green][i]"#"[/i][/green] [maroon]class[/maroon][teal]=[/teal][green][i]"button"[/i][/green][b]>[/b]button one ( show div two )[b]</a>[/b]
[b]</div>[/b]

[b]<div[/b] [maroon]id[/maroon][teal]=[/teal][green][i]"div2"[/i][/green][b]>[/b]
div two
[b]<a[/b] [maroon]href[/maroon][teal]=[/teal][green][i]"#"[/i][/green] [maroon]class[/maroon][teal]=[/teal][green][i]"button"[/i][/green][b]>[/b]button two ( show div one )[b]</a>[/b]
[b]</div>[/b]

$[teal]([/teal]window[teal]).[/teal][COLOR=darkgoldenrod]load[/color][teal]([/teal][b]function[/b][teal]()[/teal][teal]{[/teal]

  $[teal]([/teal][green][i]'#div2'[/i][/green][teal]).[/teal][COLOR=darkgoldenrod]hide[/color][teal]()[/teal]

  $[teal]([/teal][green][i]'#div1 a.button'[/i][/green][teal]).[/teal][COLOR=darkgoldenrod]click[/color][teal]([/teal][b]function[/b][teal]()[/teal][teal]{[/teal]
    $[teal]([/teal][green][i]'#div1'[/i][/green][teal]).[/teal][COLOR=darkgoldenrod]fadeOut[/color][teal]([/teal][purple]1000[/purple][teal])[/teal]
    $[teal]([/teal][green][i]'#div2'[/i][/green][teal]).[/teal][COLOR=darkgoldenrod]fadeIn[/color][teal]([/teal][purple]1000[/purple][teal])[/teal]
  [teal]}[/teal][teal])[/teal]

  $[teal]([/teal][green][i]'#div2 a.button'[/i][/green][teal]).[/teal][COLOR=darkgoldenrod]click[/color][teal]([/teal][b]function[/b][teal]()[/teal][teal]{[/teal]
    $[teal]([/teal][green][i]'#div2'[/i][/green][teal]).[/teal][COLOR=darkgoldenrod]fadeOut[/color][teal]([/teal][purple]1000[/purple][teal])[/teal]
    $[teal]([/teal][green][i]'#div1'[/i][/green][teal]).[/teal][COLOR=darkgoldenrod]fadeIn[/color][teal]([/teal][purple]1000[/purple][teal])[/teal]
  [teal]}[/teal][teal])[/teal]

[teal]}[/teal][teal])[/teal]

( See it in action on jsFiddle. )


Feherke.

 

[Doc1355]

Thank you for your quick reply.