Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • World
  • Users
  • Groups
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
Code Project
M

mhutch26

@mhutch26
About
Posts
1
Topics
1
Shares
0
Groups
0
Followers
0
Following
0

Posts

Recent Best Controversial

  • Accordion not working properly with dynamic content
    M mhutch26

    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

    JavaScript html database docker help tutorial
  • Login

  • Don't have an account? Register

  • Login or register to search.
  • First post
    Last post
0
  • Categories
  • Recent
  • Tags
  • Popular
  • World
  • Users
  • Groups