On click slideToggle multiple hidden div

Question

What I have :

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")
          }
        });
      });
    });

What I want

• On clicking on a div show its hidden div(content) with slideToggle
  
• if a hidden content of another div is already open then close it with slideUp and open the one you clicked (open only after the slideUp animation is completed)
  
  I managed to get the desired effect with two hidden divs Sample 1
  but with three i have this Sample 2 auto toggle problem
  
  Help! And if there's a better and simpler alternative to get this effect please suggest.
  P.S. Sorry for my broken English.

Answer 1

Your code could be refactorized using common classes and then using following logic with promise().done() callback, which will be called only once for all set:

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

You can use something like this:

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

I hope it helps. :-).