Want a collapsible menu like this?
This is what you’ll be adding to your blog posts! Making collapsible menus is surprisingly easy! Here you’ll find the code to use and how to customize it to your liking.
Let us begin!
Collapsible Menu
- Create a new post or open an existing one.
- Copy and paste this code at the TOP of your post.
- Copy and paste this code wherever you want a collapsible section to appear.
- Copy and paste this code at the very BOTTOM of your post.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.collapsible {
background-color: #FF6B7A;
font-size: 15px;
color: #ffffff;
text-align: left;
cursor: pointer;
padding: 18px;
width: 100%;
border-radius: 30px;
border: 0px;
border-color: #777777;
border-style: solid;
outline: none;
}
.active, .collapsible:hover {
background-color: #777777;
}
.collapsible:after {
content: '\002B';
color: white;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.content {
padding: 0 35px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
</style>
</head>
<body>
<button class="collapsible">Insert Title Here</button>
<div class="content">
<p>
<br>
Insert text here that'll be inside the collapsible.
</p>
</div>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
</script>
</body>
</html>
When done correctly, you should have a button like this:
Insert text here that will appear inside the collapsible.
Customizing the Collapsible
Conventiantly, you can customize the collapsible in one place: the code you pasted at the Top of your post.Font Size
font-size: 15px;
Adjust the pixel value to change the Font Size of the button text.
Font Color
color: #ffffff;
Replace with your desired HEX code to change the Font Color.
Font Alignment
text-align: left;
This changes the position of the Title Font. Here are some basic alignments:
- left
- right
- center
- justify
Border Thickness
border: 0px;
Adjust the pixel value to change the thickness of the Border.
Border Color
border-color: #777777;
Replace with your desired HEX code to change the Border Color.
Border Style
border-style: solid;
This changes the Style of the Border. Here are some basic styles:
- solid
- dotted
- dashed
- double
- groove
- ridge
- inset
- outset
Collapsible Size
width: 100%;
Adjust the value to change the width of the collapsible.
Collapsible Shape
border-radius: 30px;
Increase the pixel value for rounded corners, decrease for sharper corners.
Collapsible Color
.collapsible {
background-color: #FF6B7A;
Replace with your desired HEX code to change the Collapsible’s Color.
.active, .collapsible:hover {
background-color: #777777;
Replace with your desired HEX code to change the Collapsible’s Color for when the mouse is hovering and when it’s open.
Full Code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.collapsible {
background-color: #FF6B7A;
font-size: 15px;
color: #ffffff;
text-align: left;
cursor: pointer;
padding: 18px;
width: 100%;
border-radius: 30px;
border: 0px;
border-color: #777777;
border-style: solid;
outline: none;
}
.active, .collapsible:hover {
background-color: #777777;
}
.collapsible:after {
content: '\002B';
color: white;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.content {
padding: 0 35px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
</style>
</head>
<body>
<button class="collapsible">Insert Title Here</button>
<div class="content">
<p>
<br>
Insert text here that'll be inside the collapsible.
</p>
</div>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
</script>
</body>
</html>
Outro
If you have any questions, leave a comment! I’ll do my best to help.
