I need help figuring out how to create a collapsible div that expands and collapses when a different div is clicked. The expanding/collapsing effect that I've been experimenting with is similar to what I want, but I'm not sure how to modify the code to make it work the way I need it to.
For example, I want to be able to click on a div in a sidebar and have another div below the header expand or collapse, pushing all content below it downwards. The div that expands and collapses could contain a search bar that the user can show or hide by clicking a button in the sidebar.
$(".sidebar-div").click(function () {
$sidebar = $(this);
//getting the corresponding content element
$content = $sidebar.next();
//open up the content needed - toggle the slide- if visible, slide up, if not slide down.
$content.slideToggle(500, function () {
//change text of sidebar button based on visibility of content div
$sidebar.text(function () {
//change text based on condition
return $content.is(":visible") ? "Collapse" : "Expand";
});
});
});.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;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
<div class="header"><span>Expand</span>
</div>
<div class="content">
<ul>
<li>Here goes the content inside the collapsible div.</li>
</ul>
</div>
</div>