Screenshot

I’m unable to make the nested accordion responsive for mobile devices. I’m using a Windows platform + Chrome + WP 4.9.7 + Visual Composer/WPBakery. Any ideas?

Thank you! -jazz

[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 prefix underscore on the closing tab only in the nested spoilers.

• the sub-spoilers end in a printed [/su_accordion], even though I didn’t write that shortcode there
• the open sub-spoiler doesn’t close when I click on another one

A possible answer: in that “How to Use Nested Shortcodes” page, the samples were not [_su_spoiler], but [_spoiler], etc. Should we not use prefixes with nested accordions? Or accordions at all?

This is the page.

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

I have a problem. I don’t know how to make nested accordion. I am begginer especially in JS. Here is my code:

HTML:
<div class=”accordion”>
<h3><span class=”accordion_height”>Novembar 2015.</span></h3>
<div class=”pane”>
//This is place where I want to put my nested accordion
</div>

<h3><span class=”accordion_height”>Decembar 2015.</span></h3>
<div class=”pane”>
//This is place where I want to put my nested accordion
</div>

<h3><span class=”accordion_height”>Januar 2016.</span></h3>
<div class=”pane”>

• List item one
• List item two
• List item three

</div>

<h3><span class=”accordion_height”>Februar 2016.</span></h3>
<div class=”pane”>
//This is place where I want to put my nested accordion
</div>

<h3><span class=”accordion_height”>Mart 2016.</span></h3>
<div class=”pane”>
//This is place where I want to put my nested accordion
</div>

<h3><span class=”accordion_height”>April 2016.</span></h3>
<div class=”pane”>
//This is place where I want to put my nested accordion
</div>
</div>

JS:
jQuery(document).ready(function ($) {
// Accordion Panels
$(“.accordion div”).hide();
setTimeout(“$(‘.accordion div’).slideToggle(‘slow’);”, 1000);
$(“.accordion h3”).click(function () {
$(this).next(“.pane”).slideToggle(“slow”).siblings(“.pane:visible”).slideUp(“slow”);
$(this).toggleClass(“current”);
$(this).siblings(“h3”).removeClass(“current”);
});
});

CSS:
.accordion {
margin:1em 0;
}
.accordion h3 {
background:#199CD8;
color:#fff;
cursor:pointer;
margin:0 0 1px 0;
padding:4px 10px;
}
.accordion h3.current {
background:#C6ED2C;
cursor:default
}
.accordion div.pane {
padding:5px 10px
}
.accordion_height{
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
I’ve tried to insert same accordion in those places I wrote but it can open that. I’ve tried on so many ways and I didn’t make it. I don’t know what I have to change (HMTL or JS or both). I’ve seen so many examples and I pick this and I want to do my first nested accordion this one . Can You help me please? Thx!

It is working here: –>https://codepen.io/anon/pen/pjXrQB3<–
but not on my template page…
Why?

I used the command [_su_spoiler]Content[_/su_spoiler] to create nested accordions which worked, but when you flip open the enclosing accordion to see the nested ones, they only show the first word of their title.

The page in question is at https://www.wpcc.edu/section-i-general-information/ and tne accordion containing the problem is the 4th one down “Emergency Response Roles for Key Employees.” Do I need to put something special in the title names to make them fully show?

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

i just copy the below code and paste into my page.

[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]
you can check result in below video.
https://screencast.com/t/x7bzRh95L

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