javascript - How to show/hide DIVs with jQuery

Question

I want to make a function to show and hide a div tag and hide all others:

function showPage(showdiv){
    $('#midRight').not(showdiv).hide(); 
    $(showdiv).show();  
}

Link calling the function:

<ul>
  <a style="cursor:pointer;" onclick="showPage('#home_page1')">
    <li>Show Page 1</li>
  </a>
  <a style="cursor:pointer;" onclick="showPage('#home_page2')">
    <li>Show Page 2</li>
  </a>
</ul>

DIVs on page:

<div id="midRight">
    <div id="home_page1">Content 1</div>
    <div id="home_page2" style="display:none;">Content 2</div>
</div>

The function showPage ends up hiding every div within midRight, while on JSFiddle, the click event doesn't seem to be handled at all.

What is the correct way to show/hide a DIV with jQuery?

Answer 1

You could write you selector to hide all child div's of midRight, then show the div with the passed ID. No need to cast to a String, since that is what you are passing:

function showPage(showdiv){
    $('#midRight > div').hide()  
    $(showdiv).show();    
}