Love the shortcodes

Thanks for the review. You can add a visual indicator using some simple CSS.

// Add a background image to the .accordion-title class
.accordion-title {
    background-image: url("accordion-arrow-closed.png");
    background-position: right center;
    background-repeat: no-repeat;
}
// Add a different background image on the .accordion-title.open class
.accordion-title.open {
    background-image: url("accordion-arrow-open.png");
}

Obviously you’ll have to create those images and make sure you add them to your theme. If you need any help with that, let me know.

That’s brilliant. Thanks sincerely.

That works perfectly if you don’t have any accordion-title text.

We have text which says “Click to open/close”, and the arrows overlap this.

Is there any way we can move the arrows to the left or move the accordion-title text to the right?

Thanks!!!

You can change the alignment of the arrows to align them to the left by changing the background-position to left center. Additionally, you may need to add some padding-left to the .accordion-title {} to allow the text to not overlap the arrow background images. You might need to play around with the amount of padding depending on the width of your arrows. 20px is probably a good place to start.

Alternatively, if you want to keep the arrows on the right as originally coded in my last response, just add some padding-right to the .accordion-title {}. That should make it so that the text doesn’t overlap the arrows.

Hope that helps.

Thanks again for the great plugin and support @philbuchanan

Didn’t work first time. But it did work after I added “!important”.

padding-left: 10px !important;

Thanks!!!