CODEWITHSUNDEEP
jquery
Abhi
Abhi

Reputation: 75

Menu links show/hide content in another div

I'm trying to figure out how to write a script where when a link is clicked in the left nav column, it will display text in the right main column. So, when you first arrive to the page, nothing will appear in the main portion of the site. Content(more specifically page) only appears after clicking on a link. When you click on another link, the previous content is hidden, and the new text is displayed.

  <div class="nav">


      <ul id="menu">


        <li id="link1"><a href="#">Topic One</a></li>


        <li id="link2"><a href="#">Topic Two</a></li>


        <li id="link3"><a href="#">Topic Three</a></li> 


    </ul>


</div>


<div class="main">


    <div id="page1" class="content">


    <h1>Show Page1</h1>


    </div>


    <div id="page2" class="content">


   <h1>Show Page2</h1>


    </div>


    <div id="page3" class="content">  


   <h1>Show Page3</h1>


    </div>             


</div>

Upvotes: 0

Views: 8591

Answers (2)

123
123

Reputation: 525

This will display the content that you want to if you click the link and hide the other content:

$('#link1').click(function(){
    $('#content1').show();
    $('#content2').hide();
    $('#content3').hide();
);
$('#link2').click(function(){
    $('#content2').show();
    $('#content1').hide();
    $('#content3').hide();
);
$('#link3').click(function(){
    $('#content3').show();
    $('#content2').hide();
    $('#content1').hide();
);

For example if you click link1, content1 will show and content2 and content3 will hide.

Upvotes: 0

Dan Goodspeed
Dan Goodspeed

Reputation: 3590

Only a few lines with jQuery. Here's the JSfiddle - http://jsfiddle.net/dangoodspeed/M3ZhV/ and here's the code:

$(function() {
    var curPage="";
    $("#menu a").click(function() {
        if (curPage.length) { 
            $("#"+curPage).hide();
        }
        curPage=$(this).data("page");
        $("#"+curPage).show();
    });
});

Upvotes: 2

Related Questions