Accordion not working properly with dynamic content
JavaScript
1
Posts
1
Posters
0
Views
1
Watching
-
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