Support » Plugin: Accordion Shortcodes » Excellent plugin – here a CSS example!

  • Thank you to the author for this excellent plugin. Works as expected, is reliable and mobile-friendly.

    Even if it’s near perfect, here are my two suggestions:
    – The open/close animation is not really smooth. Could it be improved? (no idea how…)
    – It’s cool that the plugin has NO heavy CSS by default, but one could need some more CSS examples / design proposals.

    Here is the CSS I used (thanks to some other comments):
    .accordion-title {
    background-image: url(https:/myurl.com/wp-content/uploads/2017/04/expand64px.png);
    background-size: 20px 20px;
    background-position: right center;
    background-repeat: no-repeat;
    padding-right: 26px;
    }
    .accordion-title.open {
    background-image: url(https://myurl.com/wp-content/uploads/2017/04/expand64pxmin.png);
    }
    .accordion h4.accordion-title {
    border-right: 3px solid #e4e8ec;
    background-color: #e4e8ec;
    padding-top: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
    cursor: pointer;
    margin-bottom: 4px;
    margin-top: 4px;
    }
    .accordion-content p {
    margin-bottom: 22px !important;
    }

    Try it out at the bottom of this page:
    https://bundestagswahl-2017.com/landtagswahl-nrw/

    I used the Header and Footer Code plugin to insert the CSS only on the page I need the accordion. Don’t forget to insert the code inside:
    <style type=”text/css”>
    Here the CSS
    </style>

  • The topic ‘Excellent plugin – here a CSS example!’ is closed to new replies.