Accordians within an accordian

[AshleyF]

Hello,

I am trying to do something on a webpage which I am not sure is valid CSS because I am getting errors, and for the life of me I can’t figure it out.

Basically, on a webpage I have added an accordion, but within it I wanted to create a list of other accordions. I have it working partially, but the problem is when I open the first accordion (half way down the link in the note) the sub accordions are all open by default until I close one and then they call close (which is what I want by default).

The image below is what I want it to look like by default when first opened.

[ruenel]

Hello There,

Thanks for writing in! To resolve your issue, you will have to update your accordion content and have this nested accordion shortcode instead:

[accordion id="faq-accordion"] 
[accordion_item title="Checking." parent_id="ocdtype-accordion" ]The need to check is the compulsion, the obsessive fear might be to prevent damage, fire, leaks or harm. Common checking includes:


[accordion class="ocduk-accordion" id="ocdtype-accordion"] [accordion_item title="For reassruance" parent_id="ocdtype-accordion"]Accordions are great for when you have a lot of content to share and you want to do it in a nice and orderly fashion. Here’s to organization![/accordion_item] [accordion_item title="Accordion Title" parent_id="ocdtype-accordion"]Accordions are great for when you have a lot of content to share and you want to do it in a nice and orderly fashion. Here’s to organization![/accordion_item] [accordion_item title="Past memories" parent_id="ocdtype-accordion"]Accordions are great for when you have a lot of content to share and you want to do it in a nice and orderly fashion. Here’s to organization![/accordion_item] [accordion_item title="Gas knobs" parent_id="ocdtype-accordion"]Accordions are great for when you have a lot of content to share and you want to do it in a nice and orderly fashion. Here’s to organization![/accordion_item] [accordion_item title="Water taps" parent_id="ocdtype-accordion"]Accordions are great for when you have a lot of content to share and you want to do it in a nice and orderly fashion. Here’s to organization![/accordion_item] [accordion_item title="Door locks" parent_id="ocdtype-accordion"]Accordions are great for when you have a lot of content to share and you want to do it in a nice and orderly fashion. Here’s to organization![/accordion_item] [accordion_item title="Car mirrors when driving" parent_id="ocdtype-accordion"]Accordions are great for when you have a lot of content to share and you want to do it in a nice and orderly fashion. Here’s to organization![/accordion_item] [/accordion]




[/accordion_item] 


[/accordion] 

We would loved to know if this has work for you. Thank you.

[AshleyF]

Hi, Thanks for helping, I am afraid that didn’t quite work.

I applied your code and it created this:

For now I have gone back to my original code. What I am trying to do is create this, but with the sub accordians all closed by default instead of open as here:

[rad]

Hi there,

Nesting the accordion is a bit tricky and it’s not recommended. Which is why the accordion element has only one level by default.

As per your code, do not use the same accordion parent ID in your accordion. Doing that will group your child toggle action with its parent accordion.

This is the main root accordion, [accordion_item title="Checking." parent_id="my-accordion" ] with parent ID of my-accordion. And this is the child root accordion <div class="ocduk-accordion" id="ocdtype-accordion"> with the parent ID of ocdtype-accordion. Hence, your child accordion shouldn’t be using the data-cs-collapse-parent="#my-accordion", instead it should be data-cs-collapse-parent="#ocdtype-accordion".

Only use #my-accordion in multiple parent elements where it’s not related to the child accordions.

Thanks!

[AshleyF]

I changed the child code but it’s still opening by default, but if I then close one child accordion it closes all and seems to work as expected.

[accordion id="faq-accordion"] 
[accordion_item title="Checking." parent_id="subcat-accordion" ]The need to check is the compulsion, the obsessive fear might be to prevent damage, fire, leaks or harm. Common checking includes:


<div class="ocduk-accordion" id="ocdtype-accordion">

<div class="ocduk-accordion-group" data-cs-collapse-group="">
<div class="ocduk-accordion-heading"><a class="ocduk-accordion-toggle collapsed" data-cs-collapse-parent="#ocdtype-accordion"  data-cs-collapse-toggle="">For reassruance</a></div><div class="ocduk-accordion-body collapse" style="height: 0px;" data-cs-collapse-content="">
<div class="ocduk-accordion-inner"> Accordions are great for when you have a lot of content to share and you want to do it in a nice and orderly fashion. Here’s to organization! </div>
</div>
</div> 

<div class="ocduk-accordion-group" data-cs-collapse-group="">
<div class="ocduk-accordion-heading"><a class="ocduk-accordion-toggle collapsed" data-cs-collapse-parent="#ocdtype-accordion" data-cs-collapse-toggle="">Past memories</a></div><div class="ocduk-accordion-body collapse" style="height: 0px;" data-cs-collapse-content="">
<div class="ocduk-accordion-inner"> Accordions are great for when you have a lot of content to share and you want to do it in a nice and orderly fashion. Here’s to organization! </div>
</div>
</div> 

 </div>



[/accordion_item] 
[/accordion] 

[ruenel]

Hello There,

Instead of using a nested and mixed of shortcode and html content, please use plain html code instead. You may have this:

<div id="faq-accordion" class="x-accordion"><div class="x-accordion-group" data-cs-collapse-group=""><div class="x-accordion-heading"><a class="x-accordion-toggle" data-cs-collapse-toggle="">Checking.</a></div><div class="x-accordion-body collapse in" data-cs-collapse-content="" style=""><div class="x-accordion-inner">The need to check is the compulsion, the obsessive fear might be to prevent damage, fire, leaks or harm. Common checking includes:<p></p>
<div id="ocdtype-accordion" class="x-accordion ocduk-accordion"> <div class="x-accordion-group" data-cs-collapse-group=""><div class="x-accordion-heading"><a class="x-accordion-toggle collapsed" data-cs-collapse-toggle="" data-cs-collapse-parent="#ocdtype-accordion">For reassruance</a></div><div class="x-accordion-body collapse" data-cs-collapse-content="" style="height: 0px;"><div class="x-accordion-inner">Accordions are great for when you have a lot of content to share and you want to do it in a nice and orderly fashion. Here’s to organization!</div></div></div> <div class="x-accordion-group" data-cs-collapse-group=""><div class="x-accordion-heading"><a class="x-accordion-toggle collapsed" data-cs-collapse-toggle="" data-cs-collapse-parent="#ocdtype-accordion">Accordion Title</a></div><div class="x-accordion-body collapse" data-cs-collapse-content="" style="height: 0px;"><div class="x-accordion-inner">Accordions are great for when you have a lot of content to share and you want to do it in a nice and orderly fashion. Here’s to organization!</div></div></div> <div class="x-accordion-group" data-cs-collapse-group=""><div class="x-accordion-heading"><a class="x-accordion-toggle collapsed" data-cs-collapse-toggle="" data-cs-collapse-parent="#ocdtype-accordion">Past memories</a></div><div class="x-accordion-body collapse" data-cs-collapse-content="" style="height: 0px;"><div class="x-accordion-inner">Accordions are great for when you have a lot of content to share and you want to do it in a nice and orderly fashion. Here’s to organization!</div></div></div> <div class="x-accordion-group" data-cs-collapse-group=""><div class="x-accordion-heading"><a class="x-accordion-toggle collapsed" data-cs-collapse-toggle="" data-cs-collapse-parent="#ocdtype-accordion">Gas knobs</a></div><div class="x-accordion-body collapse" data-cs-collapse-content="" style="height: 0px;"><div class="x-accordion-inner">Accordions are great for when you have a lot of content to share and you want to do it in a nice and orderly fashion. Here’s to organization!</div></div></div> <div class="x-accordion-group" data-cs-collapse-group=""><div class="x-accordion-heading"><a class="x-accordion-toggle collapsed" data-cs-collapse-toggle="" data-cs-collapse-parent="#ocdtype-accordion">Water taps</a></div><div class="x-accordion-body collapse" data-cs-collapse-content="" style="height: 0px;"><div class="x-accordion-inner">Accordions are great for when you have a lot of content to share and you want to do it in a nice and orderly fashion. Here’s to organization!</div></div></div> <div class="x-accordion-group" data-cs-collapse-group=""><div class="x-accordion-heading"><a class="x-accordion-toggle collapsed" data-cs-collapse-toggle="" data-cs-collapse-parent="#ocdtype-accordion">Door locks</a></div><div class="x-accordion-body collapse" data-cs-collapse-content="" style="height: 0px;"><div class="x-accordion-inner">Accordions are great for when you have a lot of content to share and you want to do it in a nice and orderly fashion. Here’s to organization!</div></div></div> <div class="x-accordion-group" data-cs-collapse-group=""><div class="x-accordion-heading"><a class="x-accordion-toggle collapsed" data-cs-collapse-toggle="" data-cs-collapse-parent="#ocdtype-accordion">Car mirrors when driving</a></div><div class="x-accordion-body collapse" data-cs-collapse-content="" style="height: 0px;"><div class="x-accordion-inner">Accordions are great for when you have a lot of content to share and you want to do it in a nice and orderly fashion. Here’s to organization!</div></div></div> </div>
<p>Maecenas in erat magna. Vivamus in aliquet arcu. Curabitur iaculis scelerisque neque a tincidunt. Proin aliquam tortor vel sapien aliquet, eu dignissim nulla condimentum. Aenean porta feugiat nulla. Cras non ante id est sodales ornare. Nunc pellentesque nunc at suscipit mattis. Sed sem nisi, tristique vel odio ac, faucibus bibendum lorem. Etiam dictum est non semper malesuada. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut luctus quam tellus, sed porttitor justo auctor sit amet. Ut bibendum lacus ac magna placerat euismod. Vivamus molestie tristique tellus, non dignissim nulla malesuada vel. Nulla imperdiet urna sed lacus cursus rutrum id at odio. Donec laoreet tincidunt risus in aliquet.</p></div></div></div></div>

This code is already working on a test page. Please see the secure note.

If you break down the code be aware of the new lines and line breaks because WordPress editor will tend to convert them into <br> and <p> tags.

Hope this helps.

[AshleyF]

Hi,
Thanks for trying to help. The test page you created does work by default on first open, the sub accrodians are closed, but if I close and then re-open the parent accordion the sub-accordians are all opened again (rather than being closed).

[ruenel]

Hello There,

I have tested several instances and it turns out that there is a limitation in using the accordion element. You cannot nest an accordion element within an accordion items. The result would be that you cannot control the child accordion items. It will open or close as soon as you click the parent accordion item which is what you have experience now. Please choose another design route for your contents.

Meanwhile, we’ve added a feature request to nest accordion elements so it can be taken into consideration for future development.

Thank you for your understanding.