Show One Div Correspond To The Button Click

August 04, 2022 Post a Comment

).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(); })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--Act as button-->
<div class="sprite-big not-visited" id="1">B1</div>
<div class="sprite-big not-visited" id="2">B2</div>
<div class="sprite-big not-visited" id="3">B3</div>

<!--These are the content div-->
<div class="div" id="D1">Some content1</div>
<div class="div" id="D2">Some content2</div>
<div class="div" id="D3">Some content3</div>

Solution 2:

Working Fiddle

Jquery

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

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

function HideDiv() {

  $('#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();

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

      }
    });
    });
    </script>

<div id="D1">Some content</div>
<div id="D2">Some content</div>
<div id="D3">Some content</div>

<div id = place>
<div class="sprite-big not-visited" id="1">B1</div>
<div class="sprite-big not-visited" id="2">B2</div>
<div class="sprite-big not-visited" id="3">B3</div>
</div>

javascript spravka

Show One Div Correspond To The Button Click

Solution 2:

Solution 3:

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