Conditional Accordion Width Update
January 14, 2025 · AI Conversations
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
$(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.