toggle - How to Toggle div Content with multiple divs?

Question

I want to toggle my content using two different divs. If I click on div with class "open" this open contents and to close the contents i click on separate div with class "close".

<div class="open"></div>
<div class="close"></div>

<div id="contents"></div>

How can I accomplish this?

This is my script:

$('.open').toggle(function(){
    $('#contents').hide();
    $('.wrapper').animate({'width':'200px'}).end().find('.content').animate({ 'right': '30px' }) 
}, 
function() {
    $('#contents').show();      
    $('.wrapper').animate({'width':'40px'}).end().find('.content').animate({ 'right': '0' })    
});

Thank you!

Answer 1

それらを2つのクリック機能に分けます

$('.close').click(function(){
    $('#contents').hide();
    $('.wrapper').animate({'width':'200px'}).end().find('.content').animate({ 'right': '30px' }) 
});
$('.open').click(function() {
    $('#contents').show();      
    $('.wrapper').animate({'width':'40px'}).end().find('.content').animate({ 'right': '0' })    
});

Answer 2

クリックイベントハンドラーを個別の要素にバインドできます

$('div.open').click(function(){
   // your open code here
});
$('div.close').click(function(){
   // your close code here
});

Answer 3

$(".open").click(function() {
    $("#contents").show();
});

$(".close").click(function() {
    $("#contents").hide();
});