[Resolved] CSS & JS for Collapsible Menu

[Author]

Posts

[ramez-refaatG]

I am trying to:
We use Cache plugins, when we use activate JS Combine feature, but the Collapsible Menus view becomes inactive...so what is it to exclude it?
Any CSS or JS concerning it is needed please.

Link to a page where the issue can be seen:
hidden link

I expected to see:
The Collapsible Menus to work normally.

Instead, I got:
They become in active.

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

We have a list of scripts to exclude from such optimisation plugins here: https://toolset.com/faq/how-to-use-optimization-plugins-with-toolset/

I'm not sure if that will cover your collapsible accordions, but please try that first.

Otherwise, can you please describe how you have made the collapsible accordions, and then we can look into this further.

Note that the pending update of Toolset plugins (betas have just been released) will include an internal solution for optimising JS and CSS, and other solutions will not be required. Details will appear in a dedicated blog post when the final release is available.

[ramez-refaatG]

Actually I’m using the old Toolset way not the Blocks.

The Collapsible way is this way:
[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<div class="panel-group wpv-loop js-wpv-loop" id="accordion[wpv-attribute name='pid']" role="tablist" aria-multiselectable="true">

<wpv-loop>
<div class="panel panel-default">

<div class="panel-heading" role="tab" id="heading[wpv-taxonomy-id]">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion[wpv-attribute name='pid']" href="#collapse[wpv-taxonomy-id]" aria-expanded="true" aria-controls="collapse[wpv-taxonomy-id]">[wpv-taxonomy-title]</a>
</h4>
</div>

<div id="collapse[wpv-taxonomy-id]" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading[wpv-taxonomy-id]">
<div class="panel-body">
<h2>[wpv-post-body view_template="child-public-ar-subjects"]:</h2>

• [wpv-view name="posts-public-ar-subjects"]

</div>
</div>

</div>
</wpv-loop>

</div>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"][/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]

[Luo Yang]

Hello,

I have tried the URL you mentioned above, the "Collapsible accordions" does work when I click the title text, for example "Testimonies اختبارات", see my screenshot Collapsible.JPG

If you want to make entire accordion header to be clickable, you will need to wrap the "panel-title" into HTML link tag, for example:

...
<a role="button" data-toggle="collapse" data-parent="#accordion[wpv-attribute name='pid']" href="#collapse[wpv-taxonomy-id]" aria-expanded="true" aria-controls="collapse[wpv-taxonomy-id]">
<h4 class="panel-title">[wpv-taxonomy-title]</h4>
</a>
...

[ramez-refaatG]

No it's working now because we avoid to activate the feature Combine JS.
Once we activate it, all accordio view stop being collapsible.
So please give us the JS to execlude it from the Cache plugin.
Thanks a lot.

[Luo Yang]

I assume you are using Bootstrap framwork to setup the "Collapsible accordions", if it is, you can try these:
1) Deactivate the "Combine JS" plugin you mentioned above
2) Open the page you mentioned above with Chrome browser, activate Chrome Network panel, refresh page, you should be able to find the bootstrap JS/CSS files, see my screenshot network-console.JPG, then copy the file URLs, and exclude them in your "Combine JS" plugin

More help:
hidden link

[ramez-refaatG]

Combine JS is causing a lot of other menus not working not only ones of Toolset so we decided to not use it. Thank you!