How to build a responsive toggle button with javascript and CSS/HTML for beginners.

Why it is important to have a responsive component? Well, the variety of screens and browsers will display your components very differently. If you use your dev tools you will realize quickly that your display may break on a small screen so the solution is to have responsive components that display nicely on different sized screens.

index.html

For this tutorial, I hardcoded my text in HTML but you can use queries in your JS file to make it even more versatile. Also, I used CSS “class Selector” so I could use the style for different components.

The HTML Source Code

<div class=”accordion”>
<div class=”accordion-item”>
<div class=”accordion-item-header “>
FIT GUIDE
</div>
<div class=”accordion-item-body”>
<div class=”accordion-body-content”>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo
</p>
</div>
</div>
</div>
<div class=”accordion”>
<div class=”accordion-item”>
<div class=”accordion-item-header”>
CARE
</div>
<div class=”accordion-item-body”>
<div class=”accordion-body-content”>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo
</p>
</div>
</div>
</div>
<div class=”accordion”>
<div class=”accordion-item”>
<div class=”accordion-item-header “> 
MATERIALS 
</div> 
<div class=”accordion-item-body”> 
<div class=”accordion-body-content”> 
<p class=”pourcentage”>50% 46% 4%</p> <p class=”mater”>
cashmere <span class=”refb”> modal </span></p> <br><br> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo </p>
</div>
</div>
</div>

Style.css

The important thing to note here is that to make your button responsive to a different screen, you will create two different styles for each to fit the screen display. you can create your navbar or button as usual on the full screen then use the toggle button for smaller screens.

@media screen and (max-width: 767px){

Allows you to choose which size will trigger the new display

.accordion {
display: none;
}

This will hide the component when the size is larger than 767px

.accordion-item-header::after {
content:”\2212";

Will trigger the display of the ” — “ minus icon

.refb::before {
content:”wool”;
padding-bottom: 15px;
border-bottom-style: solid;
border-bottom-width: 3.1px;
width: fit-content;
}

Will add the word wool to the Dom and display the line under

The CSS Source Code Style.css

.accordion {
display: none;
}
/* phone size page */
@media screen and (max-width: 767px){
.navbar-links {
display: none;
width: 100%;
}
.accordion {
max-width:1000px ;
display: block;
}
.accordion-item {
background-color: #fff;
color: #111;
margin: none;
border-radius: none;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.75);
}
.accordion-item-header {
padding:0.5rem 3rem 0.5rem 1rem ;
min-width: 3.5rem;
line-height: 1.25rem;
font-weight: bold;
display: flex;
align-items: center;
position: relative;
cursor: pointer;
font-family: sans-serif;
}
.accordion-item-header::after {
content:”\2212";
font-size: 1rem;
position: absolute;
right: 1rem;
border-image: none;
}
.accordion-item-header.active::after{
content:”\002B”;
}
.accordion-item-body{
display: none;
padding: 1rem;
line-height: 1.5rem;
}
.accordion-item-header.active +
.accordion-item-body{
display: block;
}
.accordion-body-content.bari {
height: 3px;
width: 100%;
background-color: black;
border-radius: 10px;
}
.accordion-body-content .pourcentage {
word-spacing: 50px;
font-size: 200%;
text-align: center;
line-height: 0%;
}
.accordion-body-content .mater {
word-spacing: 50px;
font-size: 150% ;
text-align: center;
line-height: 0%;
}
.refb::before {
content:”wool”;
padding-bottom: 15px;
border-bottom-style: solid;
border-bottom-width: 3.1px;
width: fit-content;
}
}

Button.js

On click event, the + or — icons will trigger the display of the header ”accordion-item-header” or content ”accordion-body-content” of the component.

const accordionItemHeaders = document.querySelectorAll(“.accordion-item-header”);
accordionItemHeaders.forEach(accordionItemHeaders => { accordionItemHeaders.addEventListener(“click”, event => { accordionItemHeaders.classList.toggle(“active”);
});
});