jQuery/Javascript Swap Position of 2 Divs Completely & FadeIn/Out on Toggle Button. [Archive]

Cameron

10-26-2010, 11:29 AM

Hi,

I'm fairly new to coding and have come across a few problems.

I'm trying to swap two Div's including their content on the click of a button preferably using a toggle so I can swap and then swap back on an alternate click.

Button=Swap
Div=News
Div=Article

(Just so to make it easier to understand)

Secondly, I'm also trying to have an image fading in and out on a toggle button too. I can currently get the image to fade in and out on a single click but cannot get it to work on alternate clicks
i.e.
Click 1 - Fade In
Click 2 - Fade Out

Appreciate any help. :)

Beverleyh

11-04-2010, 01:54 PM

I think this does what you want with the div switch;

<html>
<head>
<title>Div Swop</title>

<style type="text/css">
p { line-height:200px; text-align:center }
#div1 { background:yellow; width:200px; height:200px; }
#div2 { background:pink; width:200px; height:200px; }
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#button').toggle(
function()
{
$('#div1').css({'display':'none'});
$('#div2').slideDown(); // or try "fadeIn()"
$('#button-img').attr('src','images/button-clicked.jpg');
},
function()
{
$('#div2').css({'display':'none'});
$('#div1').slideDown(); // or try "fadeIn()"
$('#button-img').attr('src','images/button.jpg');
});
});
</script>

</head>
<body>

<div id="button">
<img src="images/button.jpg" id="button-img"/>
</div>

<div id="div1">
<p>...content in Div One ...</p>
</div>

<div id="div2" style="display:none;">
<p>...switch to Div Two ...</p>
</div>

</body>
</html>

Not sure what you mean with the image thing though - if its to swop the button image, then thats covered in my code example above.