title: Expand / Collapse div by clicking another
body: <p>I'm looking to create a div that expands and collapses when a completely separate, non-parent div element is clicked. </p>
  
  <p>Below is an example of an expanding/collapsing effect I like and have been messing around with. I am unsure how best to modify the code below so that I could, say, click on a div located in a sidebar, and cause another div located below the header say, to expand/collapse, pushing all content below it downwards. </p>
  
  <p>The contents of the expanding/collapsing div in question might be a search bar for instance, which can be shown/hidden by the user by clicking on a sidebar button.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(".header").click(function () {
  
      $header = $(this);
      //getting the next element
      $content = $header.next();
      //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
      $content.slideToggle(500, function () {
          //execute this after slideToggle is done
          //change text of header based on visibility of content div
          $header.text(function () {
              //change text based on condition
              return $content.is(":visible") ? "Collapse" : "Expand";
          });
      });
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
      width:100%;
      border:1px solid #d3d3d3;
  }
  .container div {
      width:100%;
  }
  .container .header {
      background-color:#d3d3d3;
      padding: 2px;
      cursor: pointer;
      font-weight: bold;
  }
  .container .content {
      display: none;
      padding : 5px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="container"&gt;
      &lt;div class="header"&gt;&lt;span&gt;Expand&lt;/span&gt;
  
      &lt;/div&gt;
      &lt;div class="content"&gt;
          &lt;ul&gt;
              &lt;li&gt;I'm putting a search bar here.&lt;/li&gt;
              
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>