Открытие DIV, нажав кнопку и закрыть тот же DIV, нажав другой buttonm

Question

творю страницу, где будет три кнопки 1) Миссия, 2) Видение, 3) Управление

Здесь функции должны be 1. При нажатии кнопки «Миссия» открывается отдельный div (# mission1).

2. Щелкнув по кнопке Vision, другой div (# vision1) откроется в том же положении # mission1 div, а также # mission1 & #mteam divs закрывается.

1. При нажатии кнопки управления другой Div (#mteam) должен открыть в том же положении # mission1 & # vision1 дивы, а также на # mission1, # vision1 дивы закроем. и так далее последовательно

Я кодируются следующим 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

Я сделал это, но перед лицом проблемы сталкиваются только проблемы с пряностями. Мое скрытие работает только после нажатия на те же кнопки, но не нажимает другие кнопки.

Пожалуйста, помогите мне, как мне это сделать. спасибо заранее

Answer 1

Ответ на thecodeparadox очень хороший. Но вы можете использовать jQuery.data(), чтобы получить идентификатор div из элемента кнопки. Если да, то вы должны сделать так:

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

, а затем попробуйте этот код:

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

и код JavaScript:

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

Answer 2

Согласно текущему коду:

$('#show1').click(function(){ 
    $('#vision1, #mteam').slideUp(); 
    $('#mission1').slideToggle(); 
}); 

$('#show2').click(function(){ 
    $('#mission1, #mteam').slideUp(); 
    $('#vission1').slideToggle(); 
}); 

$('#show3').click(function(){ 
    $('#mission1, #vission1').slideUp(); 
    $('#mteam').slideToggle(); 
}); 

Но если вы можете изменить разметку, как этот

<button class="mission1">Mission</button> 
<button class="vission1">Vision</button> 
<button class="mteam">Management</button> 

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

, а затем попробуйте этот код

$('button').on('click', function() { 
    var current = this.className; 
    $('div.common:visible').slideUp(function() { 
    $('div.' + current).slideToggle(); 
    }); 
}); 

было бы проще