WordPress.org

Ready to get started?Download WordPress

Forums

Shortcodes Ultimate
[resolved] Accordion shortcode not working (14 posts)

  1. cayennecreative
    Member
    Posted 11 months ago #

    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/

  2. cayennecreative
    Member
    Posted 11 months ago #

    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.

  3. Vladimir Anokhin
    Member
    Plugin Author

    Posted 11 months ago #

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

  4. Vladimir Anokhin
    Member
    Plugin Author

    Posted 11 months ago #

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

  5. cayennecreative
    Member
    Posted 11 months ago #

    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

  6. cayennecreative
    Member
    Posted 11 months ago #

    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.

  7. Vladimir Anokhin
    Member
    Plugin Author

    Posted 11 months ago #

    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.

  8. Vladimir Anokhin
    Member
    Plugin Author

    Posted 11 months ago #

    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.

  9. cayennecreative
    Member
    Posted 11 months ago #

    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!

  10. Vladimir Anokhin
    Member
    Plugin Author

    Posted 11 months ago #

    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]
  11. cayennecreative
    Member
    Posted 11 months ago #

    It worked! Thank you sooooooo much! You're my hero! :)

  12. Vladimir Anokhin
    Member
    Plugin Author

    Posted 11 months ago #

    Thank you for using)

  13. cayennecreative
    Member
    Posted 6 months ago #

    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!

  14. cayennecreative
    Member
    Posted 6 months ago #

    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.

Reply

You must log in to post.

About this Plugin

About this Topic