1. LIMITED-TIME SALE Be a Pro Member @ $99 / lifetime & access all our 16+ premium Divi extensions: Divi Block Pro, Carousel Toolkit, etc.LEARN MORE
Dismiss Notice
NEW Divi.Help Pro Carousel AI Toolkit - Magically turn your Divi design into carousel, simply by using our online toolkit. No plugins needed.Try our carousel AI toolkit
BEST Divi Block - A revolutionary drag & drop tool to easily mix & match 960+ premade blocks (Light & Dark) to kick start your Divi site design. Special module designs are included as well. Also newly added AI generator & color.
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

Solved Style accordion into toggle module

Discussion in 'Free Divi Community Forum' started by TommyB, Jan 24, 2022.

  1. TommyB

    TommyB New Member

    Hi everyone,
    I'm asking for help on a website I'm working on where I managed to put content different from plain text into toggle modules. Basically modules into the toggle modules.
    The problem is when I'm dealing with accordion modules into toggle modules: having the same class they basically work simultaneously. When I open the toggle module it automatically open the accordion module within, changing the styling of the accordion and opening all the tabs (I'm attaching a screen of what happens).
    Is there a way to have them work separately?
    Thanks in advance
     

    Attached Files:

    1. PRO MEMBER PERKS Divi Block Pro - Easy-to-use drag & drop interface to mix & match 456+ premade Divi blocks & export as json file:Learn More
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    Not quite sure what you meant. Are you using any custom jQuery code? Also kindly share your URL.
     
  3. TommyB

    TommyB New Member

    in the meantime I found a solution.
    Basically I needed to put a module into another module (toggle module) and followed this tutorial:
    https://www.elegantthemes.com/blog/...ws-inside-other-divi-modules-without-a-plugin

    I then found out the you can achieve the same thing using shortcodes with the divi toolbox. Creating your layout in the divi library and then copy and paste the shortcode into the toggle module.

    The problem I had was with putting an accordion module into a toggle module. Having the same class, it was difficult style the accordion inside the toggle without affecting the last one.

    I found a workaround using some jquery adapting what I found on this other tutorial:
    https://divibooster.com/reveal-a-divi-module-or-row-section-when-button-clicked/
     
    FrançoisG likes this.
    1. PRO MEMBER PERKS Divi Ultimate Footer Plugin - Custom global Divi footer (20 premade styles) + Revealing footer effect:Learn More
  4. FrançoisG

    FrançoisG New Member


    A good solution that works well and remains very simple...
     
  5. Divi Booster

    Divi Booster Divi Expert

    Hey TommyB,

    I'm glad you were able to workaround the issue with the reveal button post :)

    In case you ever want to revisit the accordion-in-toggle setup, I also have a post addressing what I think is probably the same issue but when you use an accordion in another accordion:

    https://divibooster.com/put-one-divi-accordion-module-inside-another/

    It would probably need tweaked to work with the toggle module, or you could use an accordion with a single item in place of the toggle module.

    Anyway, give me a shout if you have any questions about any of it.
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade testimonial carousel design for your Divi site without using any plugins:View Demo
  6. FrançoisG

    FrançoisG New Member

    Thank you, I saw this solution too. It works well but I have added javascript code which allows you to close the first tab of the integrated accordion as well as add a second close button at the bottom of the open tabs (when they are long it is practical). In this solution these codes no longer work correctly because of the similarity of the CSS classes between the first accordion and the second integrate.
    I found another solution. Open a Divi module from a button.
     
    Divi Booster likes this.