title: Expand div with slideToggle
body: <p>I have HTML like that :</p>
  
  <pre><code>&lt;div id='hidden-section'&gt;
    content is hidden
  &lt;/div&gt;
  &lt;div id='mainleft-content'&gt;
    content is visible
  &lt;/div&gt;
  
  &lt;div id="expand-hidden"&gt;Button Expand + &lt;/div&gt;
  </code></pre>
  
  <p>I use slideToggle to expand/collapse like code below, but it is not working :</p>
  
  <pre><code>$(document).ready(function(){
      $("#hidden-section").hide();
      $("#expand-hidden").click(function(){
          $("#hidden-section").slideToggle();
              if($("#mainleft-content").is(":hidden")) {
                  $("#mainleft-content").visible();
              }
              else{
                  $("#mainleft-content").hide();
                  }
      });
  
  });
  </code></pre>
  
  <p>I want : when I click on <code>Button Expand</code> the hidden content(<code>hidden-section</code>) is visible and <code>mainleft-content</code> is hidden. when I click again, the 'hidden-section' is hidden and <code>mainleft-content</code> is visible. </p>