cakephp div and button toggles

Question

Need to solve CakePHP and Script problem

I am using three buttons( let b1,b2 & b3 ). Three buttons have its own separate div ( let d1,d2 & d3 )respectively. when I click the b1 ,then d1 should display but other d2 & d3 should hide . When I click the b2 then d2 should display and d3 and d1 should hide. How Should make this work using CakePHP and script in that?

Here is the code that I have tried

  <button id="b1"> btn1 </button>
  <button id="b2"> btn1 </button>
  <button id="b3"> btn1 </button>

  <div id="d1" style="display:none"> this is div1 </div>
  <div id="d2" style="display:none"> this is div2 </div>
  <div id="d3" style="display:none"> this is div2 </div>

// this is script

<?php $this->Html->scriptStart(['block' => 'scriptBottom']); ?>
    (function($) {
        $(document).ready(function(){

        });


        $('#b1').click(function () {
         $('#d1').show();
         $('#d2').hide();
         $('#d3).hide();

        });


        $('#b2').click(function () {
         $('#d1').hide();
         $('#d2').show();
         $('#d3').hide();

        });

        $('#b3').click(function () {
         $('#d1').hide();
         $('#d2').hide();
         $('#d3').show();

        });
    }
    )( jQuery );

<?php $this->Html->scriptEnd(); ?>

Answer 1

you can try the following:

 $('button').click(function(){ var index = $(this).index();//get the position of the current button $('div').eq(index-1).show();// display the div corresponding to that position ,note: eq start counting from 0 $('div').not(':eq('+(index-1)+')').hide();//hide the other usin not }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button> btn1 </button> <button> btn1 </button> <button> btn1 </button> <div style="display:none"> this is div1 </div> <div style="display:none"> this is div2 </div> <div style="display:none"> this is div3 </div> 

using ids:

 $('button').click(function(){ var id = '#d_'+this.id.split('_')[1]; console.log(id); $(id).show(); $('div').not(id).hide(); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="b_1"> btn1 </button> <button id="b_2"> btn1 </button> <button id="b_3"> btn1 </button> <div id="d_1" style="display:none"> this is div1 </div> <div id="d_2" style="display:none"> this is div2 </div> <div id="d_3" style="display:none"> this is div3 </div>