CODEWITHSUNDEEP
jqueryfade
fightstarr20
fightstarr20

Reputation: 12598

jQuery replace content instead of fade

I am trying to have content replaced when a div is clicked. I have achieved this kind of using jQuery but currently the content just stacks up instead of being replaced..

<script>
$(document).ready(function(){
  $("#link1").click(function(){
     $('#content1').fadeIn('slow');
  });
  $("#link2").click(function(){
     $('#content2').fadeIn('slow');
  });
});
</script>

<a id="link1" href="#">Link 1</a>
<a id="link2" href="#">Link 2</a>

<div id="content1">
    This is the test content for part 1
</div>
<div id="content2">
        This is the test content for part 2
</div>

http://jsfiddle.net/Wqc9N/

Can someone help?

Upvotes: 1

Views: 96

Answers (4)

Rory McCrossan
Rory McCrossan

Reputation: 337580

You need to make the content divs position: absolute and then put them inside a position: relative container. Try this:

.content-container {
    position: relative;
    width: 400px;
    height: 400px;
}
.content-container div {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

$("#link1").click(function () {
    $('#content1').fadeIn('slow');
    $('#content2').fadeOut('slow');
});
$("#link2").click(function () {
    $('#content1').fadeOut('slow');
    $('#content2').fadeIn('slow');
});

Updated fiddle

To reduce the amount of maintenance required when adding/removing links, try an approach like the following which uses classes to make elements more generic, and data attributes to maintain the connection between related elements.

<a class="link" href="#" data-rel="content1">Link 1</a>
<a class="link" href="#" data-rel="content2">Link 2</a>
<a class="link" href="#" data-rel="content3">Link 3</a>
<a class="link" href="#" data-rel="content4">Link 4</a>
<a class="link" href="#" data-rel="content5">Link 5</a>

<div class="content-container">
    <div id="content1">This is the test content for part 1</div>
    <div id="content2">This is the test content for part 2</div>
    <div id="content3">This is the test content for part 3</div>
    <div id="content4">This is the test content for part 4</div>
    <div id="content5">This is the test content for part 5</div>
</div>

$(".link").click(function() {
    $('.content-container div').fadeOut('slow');
    $('#' + $(this).data('rel')).fadeIn('slow');
});

More extensible update

Upvotes: 2

Yotam Omer
Yotam Omer

Reputation: 15366

Check this jsFiddle I've added div #content instead of #content1 and #content2

content = new Array(); // array to hold your content
content[1] = 'This is the test content for part 1';
content[2] = 'This is the test content for part 2';

$(document).ready(function(){
  $("#link1").click(function(){
     $('#content').html(content[1]) // click link1 load content[1]
  });
  $("#link2").click(function(){
     $('#content').html(content[2]) // click link2 load content[2]
  });
});

I recommend adding a class to all the links to attach the event to all of them at once.

Upvotes: 0

Patrick Evans
Patrick Evans

Reputation: 42736

You need to hide the other element

$(document).ready(function(){
  $("#link1").click(function(){
     $('#content1').fadeIn('slow');
     $('#content2').fadeOut('slow');
  });
  $("#link2").click(function(){
     $('#content2').fadeIn('slow');
     $('#content1').fadeOut('slow');
  });
});

Upvotes: 0

tymeJV
tymeJV

Reputation: 104775

You have to hide the previous content. I added a class to your divs of fadeContent, then placed the fadeIn inside the fadeOut callback:

Fiddle: http://jsfiddle.net/Wqc9N/5/

Code: 

$("#link1").click(function(){
    $(".fadeContent").fadeOut("slow", function() {
        $('#content1').fadeIn('slow');
    });
});
$("#link2").click(function(){
    $(".fadeContent").fadeOut("slow", function() { 
        $('#content2').fadeIn('slow');
    });
});

Upvotes: 1

Related Questions