Show/Hide divs that occupy the same space with separate links

Question

I'm having an issue with trying to get divs to occupy the same space, and to also have a show/hide ability on them when clicking their respective links.

Can anybody please let me know the proper jQuery to put in to make this happen? Below is the code without jQuery.

The idea is that when I click on Print 1, then the piece #1 will show up, and when I click Print 2, #1 will disappear and #2 will take it's place.

Current HTML looks something vaguely like this:

<div id="content">

    <div id="SideNav">                  
       <ul>
          <li>
            <a>Print 1</a>
          </li>
          <li>
            <a>Print 2</a>
          </li>             
       </ul>
    </div>

    <div id="pieces">
       <div id="1">
       </div>
       <div id="2">
       </div>
    </div>

 </div>

CSS is basically this:

#content {
    width:848px;
    position:relative;
}

#SideNav {
    width:169px;
    float:left;
}

#pieces  {
    width:678px;
    top:0px;
    float:right;
    position:relative;
}

#1 {
    position:absolute;
    top: 0px;
    right: 0px;
    z-index:1;
}

#2 {
    position:absolute;
    top: 0px;
    right: 0px;
    z-index:2;
}

Answer 1

JSFIDDLE

a Basic example of what you want to achieve :

JS :

$('a').on("click",function(){
   alert($(this).text());
    if($(this).text() == "Print 1"){
        $('#1').show();
        $('#2').hide();
    }else{
        $('#2').show();
        $('#1').hide();
    }
});    

putting an event on click of your anchors and then checking the value of the clicked anchor.

Answer 2

Assuming the first link toggles the visibility of the first div and the second link toggles the second div

$('a').click(function() {
  var index = $(this).closest('li').index();
  $('#pieces div').eq(index).toggle();
}

And set display:none on the the second div

Answer 3

You setup the click function for each of the anchors within the #sideNav container, prevent the default anchor tag function( preventDefault() , in case an href attribute is provided) and then execute what you want to do.

$('#sideNav a').click(function(e){

  // prevent default link event
  e.preventDefault();

  // use show()/hide() or toggle()
}); 

Answer 4

The trick is to make your markup structure a little more meaningful, and your CSS styling a little more generalized. This allows you to leverage common indexes between the links and the tabs below, as well as to define the style using a single CSS class. Then you can easily scale the solution for any number of links and panels:

jsFiddle

HTML

<div id="content">
    <div id="SideNav">
        <ul>
            <li> <a href="#" id="link1">Print 1</a>

            </li>
            <li> <a href="#" id="link2">Print 2</a>

            </li>
        </ul>
    </div>
    <div id="pieces">
        <div id="panel1" class="panel">First Div</div>
        <div id="panel2" class="panel">Second Div</div>
    </div>
</div>

CSS

/* 
  #content, #SideNav, #pieces
  Same As Before
*/

.panel {
    display: none;
    position:absolute;
    top: 0px;
    right: 0px;
}

JS

$(function () {
    $("a[id^='link']").click(function (e) {
        e.preventDefault();
        var index = this.id.replace("link", "");
        $(".panel").hide();
        $("#panel" + index).show();
    });
});