Excellent – Here’s another css example

  • franciscus

    (@franciscus)


    6 years, 6 months ago

    I needed a replacement for the [toggle] shortcode in the Canvas theme by WooThemes and this does the job perfectly. It doesn’t have all the bells and whistles of [toggle], but I wasn’t using those anyway.
    Here is the css I used, based on the example johanneseva gave in his comment (Thanks!)
    Mine creates a grey background for each accordion item.

    .accordion-title {
    background-image: url(./images/shortcode-toggle-open.png);
    background-size: 20px 20px;
    background-position: right center;
    background-repeat: no-repeat;
    padding-right: 26px; /* so that title does not overlap icon */
    }
    .accordion-title.open {
    background-image: url(./images/shortcode-toggle-close.png);
    }
    .accordion h4.accordion-title {
    border-right: 5px solid #e4e8ec; /* so that icon is some distance from right border */
    background-color: #e4e8ec;
    padding-top: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
    cursor: pointer;
    }
    .accordion-content {
    border: 1px solid #ebebeb;
    background: #f9f9f9;
    padding: 10px 10px;
    }

    • This topic was modified 6 years, 6 months ago by franciscus.
    • This topic was modified 6 years, 6 months ago by franciscus.
  • The topic ‘Excellent – Here’s another css example’ is closed to new replies.

Tags