Blog Hamper

Step-by-Step Guide: Creating a Custom Accordion

This guide will walk you through creating a custom accordion component using HTML, CSS, and jQuery. An accordion is a user interface element that allows you to show or hide content when a specific trigger, such as a button, is clicked.

1. HTML Structure



<!DOCTYPE html>
<html lang=”en”>
<head>
    <!– Head content here –>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <title>Accordian</title>
    <link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css”>
</head>
<body>
    <div class=”site-wrapper container”>
        <div class=”accordian-container”>
            <div class=”accordian-btn”>Button 1</div>
            <div class=”content”>
                <!– Content for section 1 goes here –>
            </div>
        </div>
        <!– You can add more .accordian-container elements as needed –>
    </div>
</body>
</html>

2. CSS Style



    <style>
        :root {
            –font-awesome: ‘FontAwesome’;
            –font-awesome-pro: ‘Font Awesome 6 Pro’;
        }
        .accordian-container {
            border: 1px solid #efefef;
            padding: 12px;
        }
        .accordian-container .content {
            margin-top: 0;
            height: 0;
            opacity: 0;
            overflow: hidden;
            transition:
                height ease 0.5s,
                opacity ease 0.5s,
                margin ease 0.5s;
        }
        /* on click of btn */
        .accordian-container.is-active .content {
            margin-top: 17px;
            height: auto;
            opacity: 1;
        }
        .accordian-btn {
            cursor: pointer;
            position: relative;
        }
        .accordian-btn::after {
            content: ‘\2b’;
            font-size: 12px;
            line-height: 14px;
            font-family: var(–font-awesome-pro);
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
        }
        .accordian-container.is-active .accordian-btn::after {
            content: ‘\f068’;
        }
    </style>

2. JS Script



    <script src=”https://kit.fontawesome.com/20e2f44b6f.js” crossorigin=”anonymous”></script>
    <script src=”https://code.jquery.com/jquery-3.6.4.slim.min.js”
        integrity=”sha256-a2yjHM4jnF9f54xUQakjZGaqYs/V1CYvWpoqZzC2/Bw=” crossorigin=”anonymous”></script>
    <script>
        $ = jQuery;
        $(function () {
            $(‘.accordian-btn’).on(‘click’, function () {
                $(this).closest(‘.accordian-container’).toggleClass(‘is-active’);
            });
        });
    </script>

This custom accordion is built using HTML, CSS, and jQuery. It consists of multiple .accordian-container elements, each containing a button with the class .accordian-btn and a content area with the class .content. When a button is clicked, the associated content area expands or collapses with a smooth animation.

The styling for the accordion can be customized according to your needs by adding styles to the provided CSS section.

Techpd

"Experienced blogger skilled in HTML5, CSS3, JavaScript, SCSS, PHP, MySQL, React, and Next.js. Passionate about new tech and connecting with fellow engineers to collaborate and innovate."