Accordion shortcode not working

Don’t know if this is any help. But here is the link to the page to show what I mean.

https://dev.mysmile.ca/#services

I really need this to work! Please respond.

Can you show me the code you’re using to create accordion?

I see the working accordion on this page – https://dev.mysmile.ca/#faq

Yeah, the spoilers are working… but not the accordion which they are supposed to be in. This is the shortcode I used.

[accordion]
[spoiler] content [/spoiler]
[spoiler] content [/spoiler]
[spoiler] content [/spoiler]
[/accordion]

and this is what I was aiming for. (See link for screenshot) It’s almost like the css for [accordion] has disappeared from the stylesheets because I could not find classes for that anywhere.

https://cayennecreative.ca/clients/mysmile_web/deisred_result.png

I’m aware the look might be the metro skin look…. which i downloaded and installed as well…. but it does not want to work either. But the default accordion still had a box that would collapse to hide the spoilers.

Elements which you can see on this screenshot it’s just a spoilers with different look. The accordion shortcode is not visible on the page. It’s just provides special logic for spoilers which are placed inside.

I understood your question correctly? If not, please provide more screenshots.

https://clip2net.com/s/5P4lXx

And styles for class=”metro-spoiler” you can grab from metro skin. Grab it from skin, add class metro-spoiler to each rule and put to custom CSS editor.

Okay, i understand now how the accordion works.

As for your instructions to apply the metro styling….. i’m afraid i’m a bit confused. Which style do I grab from the metro skin? And how do I apply these to the spoiler with the custom css editor?

Also will changes made in the editor be safe from being overwritten if ever plugin is updated?

Thank you so much for your help with this!

First, I’m not planning so big updates anymore =)
Also, custom CSS editor’s content doesn’t changes with plugin updates.

Here is what you need to do.
Switch to the default skin (plugin settings page).
Add next bit of css code to the custom CSS editor (plugin settings page)

.su-spoiler.su-spoiler-closed.su-spoiler-style-metro > .su-spoiler-content {
        margin: 0;
        padding: 0;
        width: 0;
        height: 0;
        opacity: 0;
        border: none;
        overflow: hidden;
}
.su-spoiler-style-metro > .su-spoiler-title {
        position: relative;
        min-height: 20px;
        line-height: 20px;
        padding: 8px 8px 8px 32px;
        font-weight: bold;
        color: #fff;
        background: #2d89ef;
        cursor: pointer;
}
.su-spoiler-style-metro > .su-spoiler-title > .su-spoiler-icon {
        position: absolute;
        left: 8px;
        top: 10px;
        display: block;
        width: 16px;
        height: 16px;
        background: -16px -16px url('%plugin_url%/assets/images/spoiler.png') no-repeat;
}
.su-spoiler-style-metro.su-spoiler-closed > .su-spoiler-title > .su-spoiler-icon { background: -16px 0 url('%plugin_url%/assets/images/spoiler.png') no-repeat }
.su-spoiler-style-metro > .su-spoiler-content {
        padding: 1.2em;
        background: #fff;
        color: #555;
        border: 1px solid #2d89ef;
        border-top: none;
}

Use this shortcode to get spoilers like on the screenshot

[accordion]
[spoiler style="metro" title="Parent spoiler"]
   [_spoiler title="Child spoiler 1"] ... [_/spoiler]
   [_spoiler title="Child spoiler 2"] ... [_/spoiler]
[/spoiler]
[/accordion]

It worked! Thank you sooooooo much! You’re my hero! ??

Thank you for using)

Hey,
So I had some problems when updating the plugin and my accordions no longer work. ?? The custom css you gave me worked like a charm, but the update deleted this. I re-pasted it in the custom css section and saved…..but it doesnt work anymore.

Could you help?

here is the link to a page that has accordions so you can see what is happening: https://dev.mysmile.ca/#faq

Thanks so much!

okay, so after playing around I think i sort of fixed it. It had reverted to the default settings and was adding the prefix su_ before shortcodes which was what was making it not work.

i just have to fix the colour and styling now so it should be good.