Create an Accordion Menu in 15 minutes with JavaScript

Показать описание

In this project we Create an Accordion Menu in 15 minutes with JavaScript.

Рекомендации по теме

Комментарии

man.. your way of explaining is so good. u should make more videos like this!

anushrestha

This is what I call a perfect simple explanation in 15 minutes. Awesome video John! Subscribed.

dj-

This tutorial is awesome. You explained everything really clearly, and the code is great as well. Not too much, just enough. Love it

fs

Amazing video; Every other accordion tutorial just made a box appear under the accordion. You on the other hand, expanded the accordion box which is what I wanted!

bobbysmurf

This is the perfect solution I've been looking for... Thank you so much for this video!

thedeveloperroli

very great tutorial.. waiting for more javaScript projects.

romelmahmud

<body>
<div class="accordion">
<div class="accordion-item">
<h2 class="accordion-title"> This is a testing question</h2>
<p class = "accordion-answer">

</p>
</div>
<div class="accordion-item">
<h2 class="accordion-title"> This is a testing question</h2>
<p class = "accordion-answer">

</p>
</div>
<div class="accordion-item">
<h2 class="accordion-title"> This is a testing question</h2>
<p class = "accordion-answer">

</p>
</div>
</div>
<script src="script.js"></script>
</body>

HTML

*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Raleway", sans-serif;
font-weight: 400;
}

body {
background-color: #082d52;
}

.accordion {
max-width: 1200px;
margin: 0 auto;
padding: 50px;
}

.accordion-item {
border-radius: 10px;
padding: 20px;
margin-bottom: 20px;
background-color: white;
}

.accordion-title {
display: flex;
align-items: center;
cursor: pointer;
}

.accordion-title::after {
content: "+";
font-size: 40px;
margin-left: auto;
}

.active-header::after {
content: "-";
}

.accordion-answer {
max-height: 0;
overflow: hidden;
transition: 1000ms ease max-height;

CSS

const accordionTitles =

=> {
accordionTitle.addEventListener("click", () => {
const height =
console.log(height);

if {
= `${height}px`;
} else {
= "0px";
}
});
});

JavaScript

bobbysmurf

There’s one problem actually with this approach. If you keep your accordion tab opened and start resizing the window, it’ll be overflowed since the scroll height stays all the time the same

advance

Hi John, Great video and really explained. Any tips on how we could extend this slightly to only allow one accordion item to be open at a time?

andybeable

Is it just me or is the font extremely small in this video? Seems like the content is good, but I can barely see the code.

LuckySampson

Hey, cool video! As a beginner I find your content quite helpful!

I did everyting you showed step by step. HTML and CSS went smoothly. However, I couldn't make js worked. My code was:

const accordionTitles=

=> {
accordionTitle.addEventlistener("click", () => {
const height =
console.log(height);

= '${height}px';

} else {
= "0px";
}
});
});

It did not work. What was the mistake? And, is there any programme for debugging js codes? Thanks in advance!

leventerenturk

The tutorial went really smoothly but my if else statement just doesn't seem to be working. When I click on the titles the + changes to a - and console log prints out the scroll height.. I've tripled checked my code against yours but I just can't seem to make it work. Any help, please?

const accordionTitles =

=> {
accordionTitle.addEventListener("click", () => {
const height =
console.log(height);

if {
= '$(height)px';
} else { = "0px";
}

})
})

denhamk

Create an Accordion Menu in 15 minutes with JavaScript

How to create an accordion menu in Axure

Accordion Menu Figma - How To Create A Accordion Menu

How to Create an Accordion Menu in Axure RP 7 (BASIC) - A Simple Tutorial

Creating Interactive Accordion in Figma

Accordion Menus in Axure RP

How to Create an Accordion Menu in Thunkable

Let's make a bouncy accordion in Figma #shorts

Create an Interactive Accordion Menu in JavaScript | Taught by Laurence Svekis

Create Simple Accordion Menu using HTML, CSS & JavaScript

Create an Accordion Menu in 15 minutes with JavaScript

How To Create an Accordion Menu in Squarespace Step-by-Step Tutorial 2022 | Helium Strategic

New! How To Create An Accordion Menu In Wix (Full Guide) 2025!

How to create an interactive accordion component in Figma tutorial #figma #uidesign #figmatutorial

How To Create An Accordion Menu Using Only HTML & CSS

How To Make Accordion Design Using HTML And CSS Step By Step

How to create an Accordion using CSS & Javascript

ACCORDION Menu in Microsoft Access

How to Build an Accordion Menu Using HTML, CSS and JavaScript #accordion #javascript

Build an Accordion Menu with React & Tailwind CSS

How to Create an Accordion Menu using InDesign & in5 (no coding)

Accordion Dropdown Menu in Squarespace

Creating a simple full page accordion menu using only HTML and CSS in Webflow

How To Create An Accordion Menu In Wix (2025)

How to build an HTML only - accordion -no Javascript required #css3 #css #html5 #html