Numerous occurrences of this accordion component within a single page

I have been experimenting with having multiple instances of this accordion on the same page. You can view the fiddle here

The second accordion is essentially a duplicate of the first one with different heading text or content. Below is the code snippet. Please refer to the fiddle External Resources section for any dependencies.

(function($) {

// cache some values
var cache   = {
        idx_expanded    : -1, 
        sliceH          : 0,  
        current         : 0,  
        totalSlices     : 0   
    },
    aux     = {
       // functions and logic here
    }
    // more code...
    
})(jQuery);

Answer №1

Make sure that each ID is unique by altering the id of the second element:

<div id="va-accordion" class="va-container">
...
</div>
<div id="va-accordion2" class="va-container"> //Include the number 2 in the ID
...
</div>

In your jQuery function, include both IDs like this:

(function ($) {
    $('#va-accordion, #va-accordion2').vaccordion();//Include the additional ID
}(jQuery));

View a demonstration on Demo Fiddle

If you want to enhance your code further, consider using the classname instead of individual IDs:

(function ($) {
    $('.va-container').vaccordion();
}(jQuery));

Explore another example on Demo Fiddle

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Retrieving the value of an array for a specific DOM element using jQuery

Issue: I am struggling to pass an array of checkbox IDs to a hidden DOM element and retrieve it successfully. Currently, I can only manage to do this for a single checkbox ID, as shown in the example below: var selectedCheckBoxIds = [22, 23, 24]; $(&apos ...

Issue with flickering scroll-snap in React component with useState

I've encountered an unusual flickering glitch that only occurs when using the combination of: css scroll-snap useState Sub-Components But it's strange because the issue only arises when these three are combined! https://i.sstatic.net/TvwyW.gif ...

Override the use of box-shadow

In my design, I apply a box-shadow to all images within a certain section. However, there is one image in that section that should not have a box-shadow. If I assign that image an ID or class to give it higher priority, how can I effectively remove the box ...

Having trouble with clearing divs function not working as expected

I'm facing a challenge in properly aligning 3 div elements without resorting to adding padding at the bottom of the wrapping div, which isn't the most practical solution. Check out the issue demo here How would you suggest addressing this parti ...

Issue encountered after updating to version 2.0 of Datatables.net: Conflict between custom CSS and BS5

Having utilized Datatables.net v1.13.11 in conjunction with custom BS5 templates from Themesbrand (), I recently upgraded to v2.0 and came across the following observations: A border box appeared when hovering over a column header. Extra top and bottom bo ...

The import statement is causing a malfunction in the application

Currently, I am facing an issue while trying to import a mongoose model from one file that contains the schema (issue.js) into another file (server.js). Everything runs smoothly when running the app with nodemon until I attempt to import the Issue model fr ...

React - Incorrect components experiencing style changes due to setTimeout

Check out the code snippet here: https://jsfiddle.net/69z2wepo/204131/ A main component displays two 'notifications' each with different disappearance timings. class Page extends React.Component { constructor(props) { super(props); t ...

Achieving Title Alignment in PDF Export with Balkan OrgChartJS

function preview() { /*centerElement();*/ let fileNameWithTitle = MyTitle.replace(/\s+/g, '_'); let PdfTitle = "<center>" + MyTitle + "</center>"; OrgChart.pdfPrevUI.show(chart, { forma ...

Tips for incorporating css @keyframes within a cshtml file:

My cshtml page includes a Popup that I created, but I encountered an issue with keyframes. When I tried to use it without keyframes, the fade effect was lost. I am looking for a way to fix my @keyframes. (I tested the code on Chrome and Opera) I found the ...

There are mistakes in the code that I am struggling to fix

I am encountering an issue where my website only functions properly on Firefox and not on Chrome. However, when I run the HTML using NetBeans on Chrome, the website works fine. I'm unsure of what to do as I need to submit this project within the next ...

Get the coordinates needed for a Google Map display

I need help with this information: 45°25'02.98" 10°11'30.39", does anyone know how to extract the Latitude and Longitude for use in gLatLng? ...

Update the react component's state props to trigger a re-render when the state changes

I'm facing an issue with getting a component to rerender in React even though one of its components is a piece of state that receives updates. The piece of state in question is 'board': const [board, setBoard] = useState("") The component i ...

What makes it essential to use jasmine's runs and waitFor function?

My current task involves testing an asynchronous code snippet structured like this: randomService.doSomething().then(function() { console.log('The operation has been completed!'); }); Interestingly, I've noticed that the success messag ...

When applying a background color with Bootstrap 4, the card borders may appear inconsistent or distorted

(Customizing Bootstrap 4.1.3) I am currently working on personalizing a card design. Initially, I added border-danger <div class="row"> <div class="col"> <div class="card border-danger"> <div class="card-heade ...

Setting the value for datepicker and timepicker in ReactJS for individual rows

Can you please explain how to set a default value for the datepicker and timepicker in each row? I have successfully implemented the datepicker and timepicker functionalities in my code. In the home.js file, there is a state called additionalFields which ...

Javascript alert: An issue has been detected when attempting to open a URL along with the user's input through Javascript

Having trouble with my javascript codes... I'm trying to create an input box and submit button. Whatever the user inputs in the box should be added to the default web URL, but it's not functioning as expected. The issue I'm facing is that ...

XMLHttpRequests

Hey there, I'm currently working on making xmlhttp requests to a local server that connects to an external network. In Chrome, I encountered the following error message: XMLHttpRequest cannot load Origin is not allowed by Access-Control-Allow-Origi ...

Tips for displaying the XYZ axes on a graph using JavaScript

I am working with a dataset that captures motion data over time, specifically along the XYZ axes. I want to visualize the object's movement using these values on a JavaScript graph. Which type of graph would be most suitable for visualizing this kind ...

Rails cross-domain proxy: securely access resources across domains

I need assistance finding a solution/gem/plugin to dynamically load the HTML content of various websites using JavaScript. I am working on a feature similar to Facebook's status update form, where users can add links that will be crawled for images an ...

Invoke actions when clicking outside of components

Currently, I have a HeaderSubmenu component that is designed to show/hide a drop-down menu when a specific button is clicked. However, I am now trying to implement a solution where if the user clicks anywhere else in the application other than on this drop ...