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

**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;

Code:

<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.

Thread: jQuery/Javascript Swap Position of 2 Divs Completely & FadeIn/Out on Toggle Button.

Thread Tools

Search Thread

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

Bookmarks

Bookmarks

Posting Permissions