Question

I am making a page where there will be three buttons 1) Mission, 2) Vision, 3) Management

Here the functions have to be
1.By clicking the Mission Button a separate div(#mission1) shall open.

2.By clicking the Vision Button another div(#vision1) shall open in the same position of the #mission1 div and also the #mission1 & #mteam divs shall close.

1. By clicking the Management Button another div(#mteam) shall open in the same position of the #mission1 & #vision1 divs and also the #mission1, #vision1 divs shall close.
   and so on consecutively

I have coded the following
Script

$('document').ready(function() {

   $('#show1').click(function(){

     $('#mission1').slideToggle();  


       });

       $('#show2').click(function(){

           $(' #vission1').slideToggle();



           });


           $('#show3').click(function(){

            $('#mteam').slideToggle();   

               });
});

CSS

 #mission1 
  {
    width:450px; 
    height:200px; 
    background:#069; 
    margin-top:10px;
    display:none; 
    position:absolute; }


  #vission1
  {
    width:450px; 
    height:200px; 
    background:#096;
    margin-top:10px;
    display:none; 
    position:absolute; }

    #mteam
  {
    width:450px; 
    height:200px; 
    background:#CC3;
    margin-top:10px;
    display:none; 
    position:absolute; }​

HTML

<button id="show1">Mission</button>
<button id="show2">Vision</button>
<button id="show3">Management</button>

         <div id="mission1">Abcd</div>
         <div id="vission1">VVVVVVV</div>
         <div id="mteam">MMMMMMMMM</div>

See Demo

I have done it but I am facing the problem only the hide issues. My hiding is being operated only after clicking the same buttons but not clicking the other buttons.

Please help me how shall I do this.
Thanks a lot in advance

Answer 1

thecodeparadox’s answer is very good. But you can use jQuery.data() to get the div id from the button element. If so, you must do like this:

<button data-href="mission1">Mission</button>
var currentDivId = $('button').data('href');

and then try this code:

<button id="show1" data-href="mission1">Mission</button>
<button id="show2" data-href="vission1">Vision</button>
<button id="show3" data-href="mteam">Management</button>

<div id="mission1" class="demo">Abcd</div>
<div id="vission1" class="demo">VVVVVVV</div>
<div id="mteam" class="demo">MMMMMMMMM</div>

and the JavaScript code:

$('document').ready(function() {
    $('#show1, #show2, #show3').click( function() {
        var $div = $('#' + $(this).data('href'));
        $('.demo').not($div).hide();
        $div.slideToggle();
    });
});