Skip to content Skip to sidebar Skip to footer
Home / Javascript / Jquery

Show One Div Correspond To The Button Click

Post a Comment
B1
B2
).hide(); // show the first div initially $div.first().show(); // bind a click event handler $('div.sprite-big').click(function() { // hide all divs $div.hide(); // get div to show based on clicked element id// and show the element $('#D' + this.id).show(); })
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!--Act as button--><divclass="sprite-big not-visited"id="1">B1</div><divclass="sprite-big not-visited"id="2">B2</div><divclass="sprite-big not-visited"id="3">B3</div><!--These are the content div--><divclass="div"id="D1">Some content1</div><divclass="div"id="D2">Some content2</div><divclass="div"id="D3">Some content3</div>

Solution 2:

Working Fiddle

Jquery 

HideDiv();
$('.sprite-big').on("click", function() {
  showHide($(this).prop('id'))
});

functionshowHide(id) {
  HideDiv();
  var id = '#D' + id;
  $(id).show();
}

functionHideDiv() {

  $('#D1').hide();
  $('#D2').hide();
  $('#D3').hide();
}

Solution 3:

I've just posted this exact question a moment ago.

Try this :

<script>
    $('#place').on('change', function() {
      if ( this.id== '1');
      {
        $("#D1").show();
        $("#D2").hide();
        $("#D3").hide();

      }
      elseif ( this.id== '2'); 
      {
        $("#D1").hide();
        $("#D2").show();
        $("#D3").hide();
      }
       elseif ( this.id== '3'); 
      {
        $("#D1").hide();
        $("#D2").hide();
        $("#D3").show();
      }
      else
      {
      $("#D1").show();
      $("#D2").show();
      $("#D3").show();

      }
    });
    });
    </script><divid="D1">Some content</div><divid="D2">Some content</div><divid="D3">Some content</div><divid = place><divclass="sprite-big not-visited"id="1">B1</div><divclass="sprite-big not-visited"id="2">B2</div><divclass="sprite-big not-visited"id="3">B3</div></div>

Post a Comment for "Show One Div Correspond To The Button Click"