SVG Icon Accordion Toggle

November 13, 2024 · AI Conversations

User
$('.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).html('');
});
add svg icon place of + –

Assistant
To replace the `+` and `-` text with SVG icons, you can update your jQuery code to include the SVG elements. Here's an updated version of your code:

### HTML Structure
First, ensure that your HTML structure includes a placeholder for the icons:

<div class="accordion">
    <div class="accordion-header">
        <span class="icon"></span>
        Section 1
    </div>
    <div class="accordion-content">
        <p>Content for section 1</p>
    </div>

    <div class="accordion-header">
        <span class="icon"></span>
        Section 2
    </div>
    <div class="accordion-content">
        <p>Content for section 2</p>
    </div>

    <div class="accordion-header">
        <span class="icon"></span>
        Section 3
    </div>
    <div class="accordion-content">
        <p>Content for section 3</p>
    </div>
</div>

### Updated jQuery Code with SVG Icons

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

    // Toggle the icon between 'plus' and 'minus' SVGs
    const icon = $(this).find('.icon');
    if (icon.hasClass('plus-icon')) {
        icon.html(minusIcon).removeClass('plus-icon').addClass('minus-icon');
    } else {
        icon.html(plusIcon).removeClass('minus-icon').addClass('plus-icon');
    }
    
    // Close other accordion items
    $('.accordion-content').not($(this).next()).slideUp();
    $('.icon').not(icon).html(plusIcon).removeClass('minus-icon').addClass('plus-icon');
});

// SVG icons
const plusIcon = `
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M12 5V19M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>`;

const minusIcon = `
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>`;

// Initialize all icons to be plus by default
$('.icon').html(plusIcon).addClass('plus-icon');

### Explanation
– **HTML**: Each accordion header now includes a “ for placing the SVG.
– **JavaScript**:
– The `plusIcon` and `minusIcon` variables hold the SVG markup.
– The jQuery click function toggles between the plus and minus SVG icons.
– When closing other accordion items, the icons are reset to the plus icon.

### CSS (Optional)
You may want to adjust the styling for your icons:

.accordion-header {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.icon {
    transition: transform 0.3s ease;
}

This setup ensures that you have SVG icons for expanding and collapsing your accordion sections.

User
Assistant
To enhance your accordion component by toggling the SVG icon on click, we'll modify your current HTML structure and update the jQuery code. The idea is to rotate the SVG icon when the accordion is expanded or collapsed.

Here's an optimized solution:

### Updated HTML

<div class="accordion-item">
    <div class="accordion-header">
        <h4><span><?php the_title(); ?></span></h4>
        <span class="icon">
            <svg class="accordion-icon" width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g id="icon-arrow">
                    <path d="M7 21H35" stroke="#FFCC00" stroke-width="4" stroke-linecap="round"/>
                    <path d="M21 7L21 35" stroke="#FFCC00" stroke-width="4" stroke-linecap="round"/>
                </g>
            </svg>
        </span>
    </div>
    <div class="accordion-content">
        <?php the_content(); ?>
        <div class="job-detail-button">
            <div class="primary-button-yellow">
                <a class="primary-button-yellow" href="<?php the_permalink(); ?>">
                    <?php echo __('Jetzt per Mail bewerben', 'rosemeier'); ?>
                </a>
            </div>
        </div>
    </div>
</div>

### jQuery Code

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

    // Rotate the SVG icon
    const icon = $(this).find('.accordion-icon');
    icon.toggleClass('rotate-icon');
    
    // Close other accordion items
    $('.accordion-content').not($(this).next()).slideUp();
    $('.accordion-icon').not(icon).removeClass('rotate-icon');
});

### CSS for Icon Rotation

.accordion-header {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.accordion-icon {
    transition: transform 0.3s ease;
}

.rotate-icon {
    transform: rotate(45deg);
}

### Explanation
– **HTML**: The SVG icon is now inside a “, and I've added a class `accordion-icon` for easier selection.
– **jQuery**:
– The `rotate-icon` class is toggled to rotate the SVG by 45 degrees when the accordion header is clicked.
– It removes the `rotate-icon` class from other accordion items when one is expanded.
– **CSS**: A simple CSS transition and rotation are added to create a smooth icon rotation effect.

This solution keeps your accordion accessible and enhances the visual feedback with an animated SVG icon rotation, making it more user-friendly.

User
Assistant
To adjust your existing accordion setup and toggle between your custom SVG icons, here's an updated solution that integrates your specific HTML structure.

### Updated HTML Structure
I've retained your original SVG icons but added classes to easily target them for toggling:

<div class="accordion-item">
    <div class="accordion-header">
        <h4><span><?php the_title(); ?></span></h4>
        <span class="icon plus-icon">
            <!-- Default SVG for "Plus" -->
            <svg class="plus-svg" width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g id="icon-arrow-up-right">
                    <path id="Line 28" d="M7 21H35" stroke="#FFCC00" stroke-width="4" stroke-linecap="round"/>
                    <path id="Line 29" d="M21 7L21 35" stroke="#FFCC00" stroke-width="4" stroke-linecap="round"/>
                </g>
            </svg>
        </span>
    </div>
    <div class="accordion-content">
        <?php the_content(); ?>
        <div class="job-detail-button">
            <div class="primary-button-yellow">
                <a class="primary-button-yellow" href="<?php the_permalink(); ?>">
                    <?php echo __('Jetzt per Mail bewerben', 'rosemeier'); ?>
                </a>
            </div>
        </div>
    </div>
</div>

### Updated jQuery Code
Here’s how you can adjust your jQuery code to switch between the "plus" and "minus" icons dynamically:

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

    // Toggle the icon between 'plus' and 'minus' SVGs
    const icon = $(this).find('.icon');

    if (icon.hasClass('plus-icon')) {
        icon.html(minusIcon).removeClass('plus-icon').addClass('minus-icon');
    } else {
        icon.html(plusIcon).removeClass('minus-icon').addClass('plus-icon');
    }

    // Close other accordion items
    $('.accordion-content').not($(this).next()).slideUp();
    $('.icon').not(icon).html(plusIcon).removeClass('minus-icon').addClass('plus-icon');
});

// Define SVGs for plus and minus
const plusIcon = `
<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g id="icon-arrow-up-right">
        <path d="M7 21H35" stroke="#FFCC00" stroke-width="4" stroke-linecap="round"/>
        <path d="M21 7L21 35" stroke="#FFCC00" stroke-width="4" stroke-linecap="round"/>
    </g>
</svg>`;

const minusIcon = `
<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g id="icon-minus">
        <path d="M7 21H35" stroke="#FFCC00" stroke-width="4" stroke-linecap="round"/>
    </g>
</svg>`;

// Initialize all icons to be plus by default
$('.icon').html(plusIcon).addClass('plus-icon');

### Explanation
1. **HTML**: The `icon` span now has a class (`plus-icon` or `minus-icon`) to determine the current state.
2. **jQuery**:
– When an accordion header is clicked:
– It toggles the `accordion-content` section.
– Checks if the icon has the class `plus-icon`. If so, it replaces it with the `minusIcon`. Otherwise, it switches back to `plusIcon`.
– It ensures only one accordion is open at a time, closing others.
3. **CSS (Optional)**:
– Add some CSS for smooth transitions if needed:

.accordion-content {
       display: none; /* Ensure content is hidden by default */
   }

   .icon svg {
       transition: transform 0.3s ease;
   }

This solution maintains your original design while enhancing the accordion functionality with dynamic SVG icons.

Leave a Comment

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