Q:

A div tag is shown but not hidden even after giving hide() event

<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.

A:

First of all there is a Syntax error in every click handler:
#total2, , #total4

Double commata is not needed here I guess.

