how to create a fluid collapsible bar using html, css, and jquery

Having collapsible content on your site helps to save space on your and keeps things organised. In this tutorial, I will be creating collapsible contents using web technologies.

Prerequisite

In this tutorial, we will make use of Html, CSS, Vanilla JavaScript and Jquery.

HTML

 <div id="container">
<div class="collapsible-head" id="head1" onclick="showBody(1)">
<span class="title">Collapse 1</span>
<span class="sign" id="sign1">-</span>
</div>
<div class="collapsible-body" id="body1">
<div class="body-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</div>
</div>

<div class="collapsible-head" id="head2" onclick="showBody(2)">
<span class="title">Collapse 2</span>
<span class="sign" id="sign2">+</span>
</div>
<div class="collapsible-body hidden" id="body2">
<div class="body-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</div>
</div>
</div>
              

CSS

 body {
margin: 0;
}

#container {
max-width: 900px;
margin: 0 auto;
padding: 0 15px;
}

.collapsible-head {
background: #2694b6;
border: 3px solid #6ecbe7;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
padding: 15px 0;
color: white;
cursor: pointer;
margin-top: 15px;
}

.collapsible-head:hover {
background: white;
color: black;
}

.title {
margin-left: 20px;
font-weight: bold;
}

.sign {
float: right;
margin-right: 20px;
font-weight: bold;
}

.hidden {
display: none;
}

.collapsible-body {
background: #2694b6;
border-bottom: 3px solid #6ecbe7;
border-right: 3px solid #6ecbe7;
border-left: 3px solid #6ecbe7;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
padding: 15px 0;
color: white;
margin-bottom: 15px;
}

.body-text {
padding: 0 20px;
}  

JAVASCRIPT

 <!--importing jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function showBody(x) {
//checks if collapsible-body is visible
if ($("#body" + x).css("display") == "block") {
//slides up collapsible-body
$("#body" + x).slideUp();
//changes the sign
$("#sign" + x).html("+");
} else {
//slides up collapsible-body
$("#body" + x).slideDown();
//changes the sign
$("#sign" + x).html("-");
}
}
</script>
  

Conclusion

Using Jquery to design the collapsible bars makes your job easier, all you have to use is slideUp() and slideDown() for a smooth slide.