На нажмите slideToggle несколько скрытый DIV

Question

Что у меня есть:

Html

<div id="content1"></div> 
<div id="content2"></div> 
<div id="content3"></div> 

<div class="content1" style="display:none"></div> 
<div class="content2" style="display:none"></div> 
<div class="content3" style="display:none"></div> 

Js

$(document).ready(function() { 
     $('#content1').click(function() { 
     $(' .content2, .content3 ').slideUp({ 
      style: "height", 
      speed: "slow", 
      complete: function() { 
      $(' .content1').slideToggle("slow") 
      } 
     }); 
     }); 
     $('#content2').click(function() { 
     $(' .content1, .content3 ').slideUp({ 
      style: "height", 
      speed: "slow", 
      complete: function() { 
      $(' .content2').slideToggle("slow") 
      } 
     }); 
     }); 
       $('#content3').click(function() { 
     $(' .content1, .content2 ').slideUp({ 
      style: "height", 
      speed: "slow", 
      complete: function() { 
      $(' .content3').slideToggle("slow") 
      } 
     }); 
     }); 
    }); 

То, что я хочу

• При нажатии на DIV показать его скрытый div (содержимое) с slideToggle
  
• если скрытое содержание другого DIV уже открыт, то закройте его slideUp и открыть тот, который вы щелкнули (открыт только после того, как анимация slideUp завершена)
  
  мне удалось получить желаемый эффект с двумя скрытыми дивы Sample 1
  но с тремя у меня есть Sample 2 auto toggle problem
  
  Помощь! И если есть более простая и простая альтернатива для получения этого эффекта, пожалуйста, предложите.
  P.S. Извините за мой сломанный английский.

Answer 1

Ваш код может быть refactorized используя общие классы, а затем, используя следующую логику с promise().done() обратного вызова, которая будет вызываться только один раз для всего набора:

$(document).ready(function() { 
 
    $('.for_content').click(function() { 
 
    var i = $(this).index('.for_content'); 
 
    $('.content:not(:eq(' + i + '))').slideUp({ 
 
     style: "height", 
 
     speed: "slow" 
 
    }).promise().done(function() { 
 
     $('.content').eq(i).slideToggle("slow") 
 
    }); 
 
    }); 
 
});

* { 
 
    padding: 0px; 
 
    margin: 0px; 
 
    overflow: hidden; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #222; 
 
} 
 
li { 
 
    float: left; 
 
} 
 
.link { 
 
    display: inline-block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 10px; 
 
    margin-left: 10px; 
 
    margin-right: 10px; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
} 
 
.link:hover { 
 
    text-shadow: 0px 1px 10px #fff; 
 
} 
 
.content1 { 
 
    height: 400px; 
 
    width: 100%; 
 
    top: 0; 
 
    background-color: #333; 
 
} 
 
.content2 { 
 
    height: 400px; 
 
    width: 100%; 
 
    top: 0; 
 
    background-color: #444; 
 
} 
 
.content3 { 
 
    height: 400px; 
 
    width: 100%; 
 
    top: 0; 
 
    background-color: #555; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div> 
 
    <ul> 
 
    <li> 
 
     <a href="#"><span class="link">Home</span></a> 
 
    </li> 
 
    <li> 
 
     <div class="link for_content" id="content1">Link 1</div> 
 
    </li> 
 
    <li> 
 
     <div class="link for_content" id="content2">Link 2</div> 
 
    </li> 
 
    <li> 
 
     <div class="link for_content" id="content3">Link 3</div> 
 
    </li> 
 
    </ul> 
 
</div> 
 
<div> 
 
    <div class="content content1" style="display: none"> 
 
    <h1> 
 
     CONTENT 1 
 
     </h1> 
 
    </div> 
 
    <div class="content content2" style="display: none"> 
 
    <h1> 
 
     CONTENT 2 
 
     </h1> 
 
    </div> 
 
    <div class="content content3" style="display: none"> 
 
    <h1> 
 
     CONTENT 3 
 
     </h1> 
 
    </div> 
 
</div>

Answer 2

Вы можете использовать что-то например:

$('div[id^=content]').click(function() { 
     var name = $(this).attr('id'); 
     $('div[class^=content]:visible').slideUp('slow', function() { 
      $('.' + name).slideDown('slow'); 
     }); 
}); 

Надеюсь, это поможет. :-).