Icons in the Title of Cornerstone Accordion Element

Hey guys,

I’m using the Cornerstone Accordion element but my clients complain that is it is not obvious to them or their site visitors that the element is actually “clickable” and that there is additional content to consume hidden within the Accordion.

In the attached screen capture, there is a very nice solution to this problem that involves placing a small triangular carrot like icon at the end of the Accordion element title.

This provides a very nice visual cue that the element is clickable to reveal additional content to consume.

QUESTION: Is there any way to replicate what is shown in the attached file using the Cornerstone Accordion element?

Hi,

The accordion by default should have a plus and minus sign to the left of the accordion title as shown in our demo.

http://demo.theme.co/integrity-1/shortcodes/accordion/

But if you need to add that icon, you can do that using CSS

You may add this in X > Launch > Options > CSS


a.x-accordion-toggle:after {
   display:inline-block;
    content: url('icon.png');
    float: right;
}

Change icon.png with the url of your icon.

Hope that helps.

Beautiful!!!..thank you!

Splendid!..

Oh and did I say “thank you”!!!..

Kindest regards,

Dale

Hehe :slight_smile:

Glad to be of a help.