Alt text not available
Recent Blog

How to create Accordian / collapse / fade in-fade out / create custom Accordian

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.

Alt text not available

"As a seasoned blogger, I bring expertise in HTML5, CSS3, JavaScript, SCSS, jQuery, PHP, MySQL, React, and Next.js to my articles. Continuously expanding my skill set, I'm passionate about exploring new technologies. Eager to engage with fellow software engineers, I invite connections from the community. Let's collaborate and innovate together!"

    Order by :

    Leave a Reply

    Your email address will not be published. Required fields are marked *