CODEWITHSUNDEEP
jqueryasp.net-mvc-4
Ram
Ram

Reputation: 337

change the content of div with another div- jquery

My Requirement: I have three different <div>s. when user click the first link, first <div> data should be display. when click the second link, display second <div>data at the position of first <div>.

code:

<div id="firstdiv" >
//first div data
</div>

<div id="seconddiv">
//second div data
</div>

<div id="lastdiv">
//last div data
</div>

<ul class="footer_links">
        <li><a href="#" id="firstlink"></li>
         <li><a href="#" id="secondlink"></li>
         <li><a href="#" id="lastlink"></li>
</ul>

Here when user click the firstlink need to display the fistdiv data and when user click the secondlink need to display seconddiv data at position of firstdiv.

for this i have done jQuery, but it is not proper way.

$(document).ready(function () {
    $("#firstdiv").replaceWith($('#seconddiv'));
    $('#seconddiv').attr('id', 'firstdiv');
});

Here i have done firstdiv replacing with seconddiv and changing the id to firstdiv.
It displaying data at position of first <div>. But display forward only. Not as backward. Because here I am replacing firstdiv with seconddiv. So its not proper way. Can any one tell this. How can I do this forward and backward.

Upvotes: 3

Views: 1131

Answers (2)

Pete
Pete

Reputation: 58422

if you change your html to the following:

<div id="firstdiv" class="datadiv">
//first div data
</div>

<div id="seconddiv" class="datadiv">
//second div data
</div>

<div id="lastdiv" class="datadiv">
//last div data
</div>

<ul class="footer_links">
    <li><a href="#firstdiv" id="firstlink" class="link">first</a></li>
    <li><a href="#seconddiv" id="secondlink" class="link">second</a></li>
    <li><a href="#lastdiv" id="lastlink" class="link">third</a></li>
</ul>

you can use the following jquery:

var divs = $('.datadiv');
$('.link').click(function(e) {
    e.preventDefault();
    divs.hide();
    $($(this).attr('href')).show();
});

http://jsfiddle.net/uJ3yy/

Upvotes: 2

Mahmood Dehghan
Mahmood Dehghan

Reputation: 8265

<div id="firstdiv" class="myDiv" style="display:none;" >
//first div data
</div>

<div id="seconddiv" class="myDiv" style="display:none;" >
//first div data
</div>

<div id="lastdiv" class="myDiv" style="display:none;" >
//last div data
</div>

<ul class="footer_links">
        <li><a href="#" id="firstlink" data-div="firtstdiv"></li>
         <li><a href="#" id="secondlink" data-div="seconddiv"></li>
         <li><a href="#" id="lastlink" data-div="lastdiv"></li>
</ul>

in javascript:

$(function () {
    $(".footer_link a")click(function(e){
        $(".myDiv").hide();
        $("#" + $(this).data("div")).show();
        e.preventDefault();
        return false;
    });

});

Upvotes: 0

Related Questions