replace div with new div with jquery
I need some help with something simple! It's a jquery function to change
div content.
The basic idea is to have a container div with a div (div1) inside it that
contains 4 images. I want the function to change the div content (with a
fade) inside the container div from div1 to div 2.
Div 1 and 2 are identical ; it's just the images that are being replaced.
Here is the html:
<html>
<head>
<title>xx</title>
<link rel="stylesheet" href="stylesheet.css">
<script src="jquery.js"></script>
<head>
<body>
<input id="doit" type="button" value="clickme">
<div id="containerdiv">
<div id="div1">
<img class="SW">
<img src="Img/SW_A.jpg" height=125px width 125px >
<img src="Img/SW_B.jpg" height=125px width 125px >
<img src="Img/SW_C.jpg" height=125px width 125px >
<img src="Img/SW_D.jpg" height=125px width 125px >
</div>
</div>
<div id="div2">
<img class="SW" >
<img src="Img/SW_E.jpg" height=125px width 125px >
<img src="Img/SW_F.jpg" height=125px width 125px >
<img src="Img/SW_G.jpg" height=125px width 125px >
<img src="Img/SW_H.jpg" height=125px width 125px >
</div>
<body>
<html>
And the script:
$('#doit').click(function(){
$('#div1').fadeOut('slow', function() {
$('#div1').html$('#div2')
$('#div1').fadeIn('slow');
});
});
The function does work when I put simple text as the content for div2:
$('#doit').click(function(){
$('#div1').fadeOut('slow', function() {
$('#div1').html('my new content')
$('#div1').fadeIn('slow');
});
});
But I want the div to be replaced by a new similar div, not by text! I've
searched a lot on jquery for this simple code, but can't seem to find what
I'm looking for.
Also, I need to find a way to hide the content of div2 from the page
before loading from the function.
Any help would be really great.
No comments:
Post a Comment