Expand / Collapse div by clicking another
<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>