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
  1. Home
  2. Web Development
  3. JavaScript
  4. Accordion not working properly with dynamic content

Accordion not working properly with dynamic content

Scheduled Pinned Locked Moved JavaScript
htmldatabasedockerhelptutorial
1 Posts 1 Posters 0 Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • M Offline
    M Offline
    mhutch26
    wrote on last edited by
    #1

    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

    1 Reply Last reply
    0
    Reply
    • Reply as topic
    Log in to reply
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes


    • Login

    • Don't have an account? Register

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