Custom Accordion with jQuery

November 12, 2024 · AI Conversations

User

create custom accordian jquery with + sign right side

Assistant

To create a custom accordion with a `+` sign on the right side using jQuery, you can follow the example below. This will include HTML, CSS, and jQuery code to create a simple accordion effect where the `+` sign changes to a `-` when the accordion is opened.

### HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Accordion</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div class="accordion">
    <div class="accordion-item">
        <div class="accordion-header">
            <span>Accordion Item 1</span>
            <span class="icon">+</span>
        </div>
        <div class="accordion-content">
            <p>This is the content for item 1.</p>
        </div>
    </div>

    <div class="accordion-item">
        <div class="accordion-header">
            <span>Accordion Item 2</span>
            <span class="icon">+</span>
        </div>
        <div class="accordion-content">
            <p>This is the content for item 2.</p>
        </div>
    </div>

    <div class="accordion-item">
        <div class="accordion-header">
            <span>Accordion Item 3</span>
            <span class="icon">+</span>
        </div>
        <div class="accordion-content">
            <p>This is the content for item 3.</p>
        </div>
    </div>
</div>

<script src="script.js"></script>
</body>
</html>

### CSS (`style.css`)

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f5f5f5;
}

.accordion {
    width: 400px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.accordion-item {
    border-bottom: 1px solid #ddd;
}

.accordion-item:last-child {
    border-bottom: none;
}

.accordion-header {
    padding: 15px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f7f7f7;
    transition: background-color 0.3s ease;
}

.accordion-header:hover {
    background-color: #e0e0e0;
}

.accordion-content {
    display: none;
    padding: 15px;
    background-color: #fff;
}

.icon {
    font-size: 18px;
    font-weight: bold;
}

### jQuery (`script.js`)

$(document).ready(function() {
    $('.accordion-header').click(function() {
        // Toggle the current accordion item
        $(this).next('.accordion-content').slideToggle();

        // Toggle the icon between '+' and '-'
        const icon = $(this).find('.icon');
        icon.text(icon.text() === '+' ? '-' : '+');
        
        // Close other accordion items
        $('.accordion-content').not($(this).next()).slideUp();
        $('.icon').not(icon).text('+');
    });
});

### Explanation
– **HTML**: Defines the structure of the accordion with a header and content for each item. The `icon` class is used to show the `+` or `-` sign.
– **CSS**: Styles the accordion, giving it a clean look with borders and hover effects.
– **jQuery**: Handles the click event on the `.accordion-header`. It toggles the visibility of the corresponding `.accordion-content` and changes the icon between `+` and `-`. It also ensures that only one accordion item can be open at a time by closing any other open items.

This accordion is fully functional and can be customized further as per your design requirements.

Custom Accordion with jQuery

Leave a Comment Cancel