Accordion using HTML, CSS and JavaScript

What is accordion in web design

In web design, an accordion is an interactive component that functions like the musical instrument of the same name. It consists of a vertically stacked list of sections, typically headers or titles. When a user clicks on a header, the associated content expands or unfolds, revealing more information. Clicking on the same header again collapses the content.

Accordions are a valuable tool for organizing information on a webpage, particularly when you have:

Limited space:Accordions help condense large amounts of content into a smaller area, keeping the initial view uncluttered and improving page load times.
Multiple related topics:By grouping related information under collapsible sections, users can easily find what they're looking for without being overwhelmed by all the details at once.
Frequently Asked Questions (FAQs):Accordions are a popular choice for presenting FAQs because they allow users to quickly scan through questions and expand only the ones that interest them.

Here are some key benefits of using accordions in web design:

Improved user experience:Accordions give users control over the information they see, making it easier for them to find what they need.
Enhanced readability:By hiding detailed content initially, accordions can improve the overall readability of a webpage, especially on smaller screens.
Increased engagement:Users are more likely to explore additional content when it's presented in a clear and organized manner.

Overall, accordions are a versatile and user-friendly way to structure content on webpages, promoting a more efficient and engaging user experience.

Want to see this accordion come to life?

Check out the accompanying video tutorial below for a step-by-step guide on building this accordion using HTML, CSS, and JavaScript. The video will walk you through the code at your own pace, making it easy to learn and follow along.

Bonus Tip:While you're watching, consider subscribing to my YouTube channel for more coding tutorials and web development tips! I regularly upload new content to help you on your coding journey.

Here's what you'll learn in the video:

The HTML structure for building the accordion.
How to style the accordion with CSS for a clean and professional look.
The JavaScript code that powers the expand/collapse functionality.
Tips and tricks for customizing your accordion.

Ready to Get Coding?

This code is your playground! We've provided the building blocks to create this accordion, but the fun part is making it your own. Click the button and get hands-on with the code. Here are some ideas to spark your creativity:

edit & experiment

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Accordion | ZonetoCode</title>
</head>

<body>
    <div class="wrapper">
        <h1>Frequently Asked Question</h1>

<div class="container">
            <div class="label">What is HTML</div>
            <div class="content">
                Hypertext Markup Language (HTML) is a computer language that makes up most web
                pages and online applications. A hypertext is a text that is used to reference other pieces of text,
                while a markup language is a series of markings that tells web servers the style and structure of a
                document. HTML is very simple to learn and use.
            </div>
        </div>

<div class="container">
            <div class="label">What is CSS?</div>
            <div class="content">CSS stands for Cascading Style Sheets. It is the language for describing the
                presentation of Web pages, including colours, layout, and fonts, thus making our web pages
                presentable to the users. CSS is designed to make style sheets for the web. It is independent of
                HTML and can be used with any XML-based markup language. CSS is popularly called the design
                language
                of the web.
            </div>
        </div>
        <div class="container">
            <div class="label">What is JavaScript?</div>
            <div class="content">JavaScript is a scripting or programming language that allows you to implement
                complex features on web pages — every time a web page does more than just sit there and display
                static information for you to look at — displaying timely content updates, interactive maps,
                animated 2D/3D graphics, scrolling video jukeboxes, etc. — you can bet that JavaScript is
                probably
                involved. It is the third of the web trio.</div>
        </div>

<div class="container">
            <div class="label">What is PHP?</div>
            <div class="content">PHP is a server-side and general-purpose scripting language that is especially
                suited for web development. PHP originally stood for Personal Home Page. However, now, it stands
                for
                Hypertext Preprocessor. It’s a recursive acronym because the first word itself is also an
                acronym.
            </div>
        </div>

<div class="container">
            <div class="label">What is MySql?</div>
            <div class="content">MySQL is a relational database management system (RDBMS) developed by Oracle that is
                based on structured query language
                (SQL). A database is a structured collection of data. It may be anything from a simple shopping list to
                a picture
                gallery or a place to hold the vast amounts of information in a corporate network.
            </div>
        </div>
    </div>

</body>

</html>

/*------------------------ Google Fonts - Poppins ------------------------*/
        @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap");

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

body {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #008080;
        }

.wrapper{
            background-color: #fff;
            padding: 15px 20px;
            height: 759px;
            width: 750px;
        }

.wrapper h1{
            font-weight: 600px;
            text-align: center;
            margin: 10px 0 20px;
        }

.wrapper .container{
            border-bottom: 1px solid #000;
        }

.container .label{
            position: relative;
            font-size: 18px;
            font-weight: 600;
            padding: 8px;
            cursor: pointer;
        }

.container .label::after{
            position: absolute;
            content: '\002b';
            top: 50%;
            right: 8px;
            transform: translateY(-50%);
            font-size: 20px;
            font-weight: 600;
        }

.container .label.active::after{
        content: '\2212';
        }

.container .content{
            padding: 0 8px;
            max-height: 0;
            overflow: hidden;
            transition: all .3s ease-out;
        }

.label.active + .content{
            margin-bottom: 8px;
        }

Don't be afraid to experiment!

The beauty of coding is that there's usually more than one way to achieve something. Feel free to break things and try again. That's the best way to learn and become a confident coder.

Get your custom static website starting at just ₹5000!

follow uS

share on

Accordion using HTML, CSS and JavaScript

What is accordion in web design

Want to see this accordion come to life?

Here's what you'll learn in the video:

Ready to Get Coding?

Don't be afraid to experiment!

similar articles

Login Form using HTML and CSS

Custom Checkbox using HTML & CSS

Breadcrumb using HTML & CSS

leave a comment

check it out!

The Future of Neuralink

follow uS

share on

What is accordion in web design

Want to see this accordion come to life?

Here's what you'll learn in the video:

Ready to Get Coding?

**Don't be afraid to experiment! **

Login Form using HTML and CSS

Custom Checkbox using HTML & CSS

Breadcrumb using HTML & CSS

The Future of Neuralink

Don't be afraid to experiment!