This is an example of how to toggle the visibility of an html element with a slide effect using jQuery en CSS, without pushing other elements down:
HTML
<div class="demo-wrap">
<div id="demo-header" class="demo-header">
What does the word “mare” in 'nightmare' mean?
</div>
<div id="demo-content" class="demo-content">
<div class="demo-text">
The word “mare” refers to a female goblin that sits on you, suffocates you while you sleep, entangles her hair around you, and tries to induce bad thoughts.
</div>
</div>
<div class="demo-content-sub">
<p><i class="fa-solid fa-person-circle-question fa-4x"></i></p>
<p>click on the header to show or hide the answer</p>
</div>
</div>
CSS
.demo-container {
position: relative;
margin: 0 auto;
max-width: 500px;
min-height: 240px;
}
.demo-content {
display: none;
background-color: rgba(255, 255, 255, 0.92);
position: absolute;
padding: 16px 0;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
z-index: 1;
}
.demo-text {
padding: 1em;
}
.demo-content-sub {
padding: 0.5em 1em;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.65);
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
}
.demo-header {
position: relative;
padding: 10px 20px;
background-color: #525252;
color: #FFFFFF;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
cursor: pointer;
}
.demo-header::after {
position: absolute;
content: "\f0ab";
font-family: FontAwesome;
font-size: 16px;
color: #F0F0F0;
right: 6px;
}
.demo-header-close::after {
position: absolute;
content: "\f0aa";
font-family: FontAwesome;
font-size: 16px;
color: #CCCCCC;
right: 6px;
}
JS
$(document).ready(function() {
$("#demo-header").click(function() {
$(this).next("#demo-content").slideToggle("slow");
$(this).toggleClass("demo-header-close");
});
});
Alternate table row styles
Conditional formatting of table rows
Copy text to clipboard
Disable spaces in an input field
Multi step form with progress indicator
Read more or less
Remove the leading and trailing space
Short functions
Toggle visibility with a slide effect
Toggle visibility without pushing content down
Validate checkboxes
Validate input fields
Validate radio buttons
Validate TinyMce editor