A div is shown but not hide even when hide() event given :     <script type="text/javascript">
      $(document).ready(function() {
        $("#total1").show();
      });

      $(".nstSlider1").on('click', function() {
       $("#total1").show();
       $("#total2, , #total4, #total3").css('display', 'none');
      });

      $(".nstSlider2").on('click', function() {
       $("#total2").show();
       $("#total4, , #total1, #total3").css('display', 'none');
      });

      $(".nstSlider3").on('click', function() {
       $("#total3").show();
       $("#total2, , #total1, #total4").css('display', 'none');
      });

      $(".nstSlider4").on('click', function() {
       $("#total4").show();
       $("#total2, #total1, #total3").css('display', 'none');
      });
    </script>

When i click on .nstSlider1, it shows #total1 and hide other #total2, #total3, #total4...but when i click on .nstSlider2, it also shows #total2, but does not hide #total1...hence when i click on .nstSlider3, #total3 was shown, but others are again not hided...why?any help is much appreciated.