Hide a div intitially (in jquery), then click on another and the shown div disappears and is replaced by the hidden div

Question

I want to hide at first then when the user clicks on , then replaces it. Here is the jquery code:

<script>
$(document).ready(function(){
  $(".header-1").hide()(function(){
    $(".header-0").click(function(){
      $(".header-0").hide()(function(){   
        $(".header-1").show();
       });
    });
  });
});
</script>



<div class="header-0">Issued<br>Appts <span class="glyphicon glyphicon-play" style="font-size:9px;"></span></div>
<div class="header-1">Issued<br>Appts <span class="glyphicon glyphicon-backward" style="font-size:9px;"></span></div>

Answer 1

Your structure is just wrong. You pretty much just have to remove the (function(){ parts and their corresponding end parenthesis and brackets

Here is the correct structure

$(document).ready(function(){
  $(".header-1").hide();
  $(".header-0").click(function(){
      $(".header-0").hide();
      $(".header-1").show();
  });
});

Demo

If you want to toggle them, then use the following

$(document).ready(function(){
  $(".header-1").toggle();
  $(".header-0, .header-1").click(function(){
      $(".header-0").toggle();
      $(".header-1").toggle();
  });
});

Demo

Answer 2

What you want is an accordeon.

Check out this tutorial on how to do it: http://www.youtube.com/watch?v=uDD7Qn0-taI

Here you can find the code: http://www.newthinktank.com/2011/03/jquery-video-tutorial-pt-6/

Answer 3

This is called crossfades. In order for it to work as intented, you should place both the divs in a relative parent, make them both ABSOLUTE, top: 0, left: 0 so that they overlap. The first one being visible, the second one hidden, and vice versa. Please note that the "absolute" idea is usefull if you want to "fadeIn() fadeOut()". Else, it does virtually nothing different for simple .hide() and .show().

<div class="relative">
   <div class="absolute header-0">CONTENT</div>
   <div class="absolute header-1">CONTENT</div>
</div>

<script>
$(document).ready(function() {
   // Given the fact that they are both in the same div
   $('.relative').children('.absolute').click(function(e) {
      // Hides current div, shows the siblings
      $(this).hide().siblings('.absolute').show();
   });
});
</script>