Support » Plugin: Shortcodes Ultimate » Accordion shortcode not working

  • Resolved cayennecreative

    (@cayennecreative)


    Hi,

    Just wondering why the accordion shortcode is not working anymore. Not the spoiler one with the plus and minus icon, but the one with the collapsible box that reveals the content when clicked on. It’s still in the ultimate shortcode settings page in the cheatsheet but will not work when I paste it in a page.

    Any help on this would be greatly appreciated.

    Thanks!

    http://wordpress.org/plugins/shortcodes-ultimate/

Viewing 13 replies - 1 through 13 (of 13 total)
  • Don’t know if this is any help. But here is the link to the page to show what I mean.

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

    I really need this to work! Please respond.

    Plugin Author Vladimir Anokhin

    (@gn_themes)

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

    Plugin Author Vladimir Anokhin

    (@gn_themes)

    I see the working accordion on this page – http://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.

    http://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.

    Plugin Author Vladimir Anokhin

    (@gn_themes)

    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.

    Plugin Author Vladimir Anokhin

    (@gn_themes)

    http://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!

    Plugin Author Vladimir Anokhin

    (@gn_themes)

    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! 🙂

    Plugin Author Vladimir Anokhin

    (@gn_themes)

    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: http://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.

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Accordion shortcode not working’ is closed to new replies.