Conditional Accordion Width Update

User
let currentIndex = 0; // To keep track of the current active li
const liElements = $('.img-acc .accordion ul li'); // Get all li elements
const liElementsa = $('.img-acc .accordion ul li a');
const liElementsamain = $('.img-acc .accordion');
const totalItems = liElements.length;

// Function to update the widths of the li elements
function updateWidths() {
liElements.removeClass('normalhover');
liElements.addClass('normala');
liElements.css('width', '8%'); // Reset all widths to default
liElements.eq(currentIndex).css('width', '100%'); // Increase width of the active li
liElements.eq(currentIndex).removeClass('normala');
liElements.eq(currentIndex).addClass('normalhover');
}

// Initial width setup
updateWidths();

// Left arrow click event
$('.left-arrow').click(function () {
currentIndex = (currentIndex > 0) ? currentIndex – 1 : totalItems – 1; // Move to previous or loop to last
updateWidths();
});

// Right arrow click event
$('.right-arrow').click(function () {
currentIndex = (currentIndex < totalItems – 1) ? currentIndex + 1 : 0; // Move to next or loop to first
updateWidths();
});

// Click event on li elements
liElements.click(function () {
currentIndex = $(this).index(); // Update the index to the clicked element
updateWidths();

// Additional onclick functionality

});
run if img-acc .accordion div exist in page

Assistant
To ensure that the script runs only if the `.img-acc .accordion` div exists on the page, you can wrap the entire code inside a conditional check. Here’s the updated version of your script:

$(document).ready(function () {
    // Check if the .img-acc .accordion div exists on the page
    if ($('.img-acc .accordion').length > 0) {
        let currentIndex = 0; // To keep track of the current active li
        const liElements = $('.img-acc .accordion ul li'); // Get all li elements
        const totalItems = liElements.length;

        // Function to update the widths of the li elements
        function updateWidths() {
            liElements.removeClass('normalhover');
            liElements.addClass('normala');
            liElements.css('width', '8%'); // Reset all widths to default
            liElements.eq(currentIndex).css('width', '100%'); // Increase width of the active li
            liElements.eq(currentIndex).removeClass('normala');
            liElements.eq(currentIndex).addClass('normalhover');
        }

        // Initial width setup
        updateWidths();

        // Left arrow click event
        $('.left-arrow').click(function () {
            currentIndex = (currentIndex > 0) ? currentIndex - 1 : totalItems - 1; // Move to previous or loop to last
            updateWidths();
        });

        // Right arrow click event
        $('.right-arrow').click(function () {
            currentIndex = (currentIndex < totalItems - 1) ? currentIndex + 1 : 0; // Move to next or loop to first
            updateWidths();
        });

        // Click event on li elements
        liElements.click(function () {
            currentIndex = $(this).index(); // Update the index to the clicked element
            updateWidths();

            // Additional onclick functionality
        });
    }
});

### Explanation:
1. **Existence Check**: `if ($('.img-acc .accordion').length > 0)` ensures that the code runs only if the `.img-acc .accordion` element is present on the page.
2. **Scoped Code**: The entire logic is inside the `if` block to avoid unnecessary operations when the element doesn’t exist.
3. **jQuery Ready**: The `$(document).ready` ensures the script executes only after the DOM is fully loaded.

This approach prevents errors in the console and unnecessary execution of the script on pages where `.img-acc .accordion` is not present.

Leave a Comment

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