show and hide nested divs using jquery

show and hide nested divs using jquery

I am trying to hide and sow divs, I have done it in a primitiv way, and I want to do a smart function 
the problem is that the inner divs doesn't shows
the functions name is  showdiv()

  2. <!doctype html>
  3. <html lang="en">
  4. <head>
  5.   <meta charset="utf-8">
  6.   <title>hide demo</title>
  7.   <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  8. </head>
  9. <body>
  10. <button id="div1show">show div1</button>
  11. <button id="div2show">Show div2</button>
  12. <a href="#" onclick="showdiv('div1');">Klicka här för div1</a></br>
  13. <a href="#" onclick="showdiv('div2');">Klicka här för div2</a>

  15. <div id="contentdiv" >
  16.     <div id="div1" name="div1" class="inner" style="display:none;" background: "red">
  17.       <span>Once</span> <span>upon</span> <span>a</span>
  18.       <span>time</span> <span>there</span> <span>were</span>
  19.       <span>three</span> <span>programmers...</span>
  20.     </div>

  22.     <div id="div2" name="div2" class="inner2" style="display:none;" background: "blue">
  23.          <div id="login" class="inner2"> 
  24.              <button id="btn">btn</button>
  25.         </div>
  26.          <p>text ... text</p>
  27.     </div>
  28. </div>
  29. <script>
  30.   
  31. function showdiv(toshow){
  32.     
  33.     $("#contentdiv div").hide("fast"); //Hide all divs
  34.     //$( document.getElementById("div2")).show( "fast" );
  35.     $("#" + toshow).show("fast"); //Show one specific div

  37. }    
  38.     

  40. $( "#div2show" ).click(function() {
  41.   $( document.getElementById("div1") ).hide( "fast");
  42.   $( document.getElementById("div2")).show( "fast" );
  43. });

  45. $( "#div1show" ).click(function() {
  46.   $( document.getElementById("div2") ).hide( "fast");
  47.   $( document.getElementById("div1")).show( "fast" );
  48. });
  49. </script>
  50.  
  51. </body>
  52. </html>