Multi level accordion

  • Hi,

    First off all i would like to say that i really like this plugin!

    For my website i’m trying to make a multi level accordion and i’m stuck at the last part. My accordion looks like this:

    [su_spoiler title=”Ja” style=”fancy” open=”no”] STAP 2

    [su_accordion]
    [su_spoiler title=”STAP 2 JA” style=”fancy”]
    [su_spoiler title=”STAP 3 JA” style=”fancy”] STAP 3 JA INSIDE
    [su_spoiler title=”STAP 3 NEE” style=”fancy”] STAP 3 NEE INSIDE
    [_/su_spoiler]
    [/su_accordion]

    [su_accordion]
    [su_spoiler title=”STAP 2 NEE” style=”fancy”]
    Stap 2 NEE INSIDE[_/su_spoiler]
    [/su_accordion]
    [/su_spoiler]

    [su_spoiler title=”Nee” style=”fancy” open=”no”] Nee Inside [/su_spoiler]

    I would like to put the text “STAP 3 JA INSIDE” inside “STAP 3 JA” and the same goes for the text “STAP 3 NEE INSIDE” inside “STAP 3 NEE”. My question is if this is even possible and/or what am i doing wrong?

    https://www.ads-software.com/plugins/shortcodes-ultimate/

Viewing 12 replies - 1 through 12 (of 12 total)

  • How about trying this?

    [su_spoiler title="Click me to see nested accordion" style="fancy"]
[su_accordion]
[_su_spoiler title="Spoiler title"] Spoiler content [_/su_spoiler]
[_su_spoiler title="Spoiler title"] Spoiler content [_/su_spoiler]
[_su_spoiler title="Spoiler title"] Spoiler content [_/su_spoiler]
[/su_accordion]
[/su_spoiler]
    Thread Starter markkersten

    (@markkersten)

    Hi Raizadran,

    Thanks for the reply. Unfortunately this is not what i’m trying to achieve.
    It has to be a accordion in a accordion in a accordion.

    Hi,

    First off all i would like to say that i really like this plugin!

    I WANT TO BUILT A accordion LIKE THE WAY HE HAS IN THIS WEBSITE(https://www.thesum.ca/work.html).
    BUT I CANT CHANGE THE FONT SIZE AND ALSO THE TYPE OF accordion THAT HE USE.
    PLEASE HELP ME HOW CAN I CREATE THE CODE LIKE THIS PAGE:
    https://www.thesum.ca/work.html

    https://www.ads-software.com/plugins/shortcodes-ultimate/

    can anyone help me????

    Here’s a working 2 level solution – thanks to NightL’s forum solution

    [su_accordion]
[su_spoiler title="Plain spoiler" style="fancy"]Spoiler level 1[/su_spoiler]
[su_spoiler title="Click me to see nested accordion" style="fancy"]
  [_su_accordion]
    [su_spoiler title="Nested Spoiler title 1"] Spoiler content level 2[_/su_spoiler]
    [su_spoiler title="Nested Spoiler title 2"] Spoiler content level 2[_/su_spoiler]
    [su_spoiler title="Nested Spoiler title 3"] Spoiler content level 2[_/su_spoiler]
  [_/su_accordion]
[/su_spoiler]
[su_spoiler title="Plain spoiler" style="fancy"]Spoiler level 1[/su_spoiler]
[/su_accordion]

    Note the inner accordion is prefixed by ‘_’ on the open and close tag (may need to change for further nesting) but the inner spoilers are only prefixed by ‘_’ on the close tag!

    Nice plugin!!

    Is there a way to get a 3 Level spoiler/accordion? Should look something like an outline when fully expanded:

    Generic Title
    Level 1 Title A
    Level 2 Title B
    Level 3 Title C
    Level 3 Content C
    Level 3 Title D
    Level 3 Content D
    Level 2 Title E
    Level 3 Title F
    Level 3 Content F
    Level 1 Title G
    Level 2 Title H
    Level 3 Title I
    Level 3 Content I
    Level 3 Title J
    Level 3 Content J
    Level 2 Title K
    Level 3 Title L
    Level 3 Content L

    Would appreciate any assistance you could offer!

    Thanks,
    Mark <><

    Sorry about the formatting on the above request. Let me take another stab at it. Let’s assume the “>” symbol is a spacing unit of measure and the “+” symbol is the actual “+” icon on the accordion/spoiler.

    +Generic Title
    >>>+Level 1 Title A
    >>>>>>>+Level 2 Title B
    >>>>>>>>>>>+Level 3 Title C
    >>>>>>>>>>>>>>>Level 3 Content C
    >>>>>>>>>>>+Level 3 Title D
    >>>>>>>>>>>>>>>Level 3 Content D
    >>>>>>>+Level 2 Title E
    >>>>>>>>>>>+Level 3 Title F
    >>>>>>>>>>>>>>>Level 3 Content F
    >>>+Level 1 Title G
    >>>>>>>+Level 2 Title H
    >>>>>>>>>>>+Level 3 Title I
    >>>>>>>>>>>>>>>Level 3 Content I
    >>>>>>>>>>>+Level 3 Title J
    >>>>>>>>>>>>>>>Level 3 Content J
    >>>>>>>+Level 2 Title K
    >>>>>>>>>>>+Level 3 Title L
    >>>>>>>>>>>>>>>Level 3 Content L

    Would appreciate any assistance you could offer!

    Thanks,
    Mark <><

    Another way to state what I am trying to accomplish is this: is a 4 level accordion/spoiler possible? Have tried adding additional underscores “_” to @tazziedave’s example above for more potential levels, but so far it has not worked. Would greatly appreciate any direction available!

    Thanks!
    Mark <><

    I tried to get a three level accordion working but gave up in the end and resorted to using vertical tabs for my top level. See this page for an example. Try Premium layout features|Attributes, Variations and Custom CSS to see the third level.

    Not sure if you could make further tab/accordion/tab/accordion combinations to accomplish what you are trying to do. But if you’re interested I can show you the shortcode markup used to accomplish the above page.

    Dave

    • This reply was modified 7 years, 6 months ago by tazziedave.

    Dave,

    Thanks for the stunning example! Think I want to go with your vertical tabs and then accordions/spoilers. I like the way yours looks! Would like to take you up on seeing the shortcode markup on how you set this up.

    Thanks,
    Mark <><

    Hi Mark,

    Here you go:

    Nested Accordion with Tabs Example
[su_tabs vertical="yes"]
    [su_tab title='Tab 1']
        [su_accordion]
            [su_spoiler title='Tab 1 Spoiler 1' icon='caret' style="fancy"]
                Tab 1 Spoiler 1 Content
            [/su_spoiler]
            [su_spoiler title='Tab 1 Spoiler 2' icon='caret' style="fancy"]
                Tab 1 Spoiler 2 Content
            [/su_spoiler]
        [/su_accordion]
    [/su_tab]

    [su_tab title='Tab 2']
        [su_accordion]
            [su_spoiler title='Tab 2 Spoiler 1' icon='caret' style="fancy"]
                Tab 2 Spoiler 1 Content
            [/su_spoiler]
            [su_spoiler title='Spoiler with nested accordion' icon='caret' style="fancy"]
                [_su_accordion]
                    [su_spoiler title='Tab 2 Nested Spoiler 1' icon='caret' style="fancy"]
                        Tab 2 Nested Spoiler 1 Content
                    [_/su_spoiler]
                    [su_spoiler title='Tab 2 Nested Spoiler 2' icon='caret' style="fancy"]
                        Tab 2 Nested Spoiler 2 Content
                    [_/su_spoiler]
                    [su_spoiler title='Tab 2 Nested Spoiler 3' icon='caret' style="fancy"]
                        Tab 2 Nested Spoiler 3 Content
                    [_/su_spoiler]
                [_/su_accordion]
            [/su_spoiler]
            [su_spoiler title='Tab 2 Spoiler 3' icon='caret' style="fancy"]
                Tab 2 Spoiler 3 Content
            [/su_spoiler]
        [/su_accordion]
    [/su_tab]

    [su_tab title='Tab 3']
        [su_accordion]
            [su_spoiler title='Tab 3 Spoiler 1' icon='caret' style="fancy"]
                Tab 3 Spoiler 1 Content
            [/su_spoiler]
            [su_spoiler title='Tab 3 Spoiler 2' icon='caret' style="fancy"]
                Tab 3 Spoiler 2 Content
            [/su_spoiler]
        [/su_accordion]
    [/su_tab]

[/su_tabs]

    Dave

    Dave,

    You are the best!! THANKS!!

    Mark <><

    Here’s the multilevel solution:
    https://www.ads-software.com/support/topic/deeper-multi-level-accordion-and-spoilers/

    Enjoy! ??

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Multi level accordion’ is closed to new replies.