a newbie here... I have an accordion that's content is being brought in through includes. The accordion is showing up but with all the tabs in the open position and they won't toggle open/close. I'm completely stuck on how to get these to work with the accordion content being brought in dynamically. This is the code that works on the normal content accordions:
(function($, window, document, undefined) {
'use strict';
$(document).ready(function() {
/\*\*
\* Accordions ===========================
\* Save DOM selectors.
\*/
var $container\_class = $('.accordions');
var $default\_class = $('.beefup');
var $toggle\_buttons\_class = $('.toggle-buttons');
/\*\*
\* default options.
\*/
var $default\_options = {
openSingle: true,
openSpeed: 300,
closeSpeed: 300
};
/\*\*
\* default settings.
\*/
// we have accordions selector?
if ($container\_class.length) {
// loop throw main containers
$container\_class.each(function() {
// we have beefup selector?
if ($default\_class.length) {
$(this).find($default\_class).beefup($default\_options);
}
});
}
// we have toggle buttons selector?
if ($toggle\_buttons\_class.length) {
$toggle\_buttons\_class.each(function() {
var $this = $(this);
var $beefup = $this.find($default\_class).beefup($default\_options);
// open all
$this.find('.toggle-open-all').on('click', function() {
$beefup.open();
});
// close all
$this.find('.toggle-close-all').on('click', function() {
$beefup.close();
});
// open accordion using button
$this.find('.buttons-group').find('.button').each(function(index) {
$(this).on('click', function() {
if (!$(this).hasClass('toggle-open-all') && !$(this).hasClass('toggle-close-all')) {
$this.find($container\_class).find($default\_class).each(function(item) {
if (index === item) {
$beefup.click($(this));
}
});
}
});
});
});
}
The classes are different for the dynamic accordion, I tried to change