Customize Accordion in Muffin Builder

happydolphin · April 2016

Hi there,

1) Can I add an image background to the title and content for each section of the "Accordion"?

2) Can I hide the "+" icon and replace that with an image?

3) How can I do the above?

Thanks.

Albert · April 2016

Hi,

any link to page where you got this item?

happydolphin · April 2016

--

Albert · April 2016

Thanks.

1) To set background image for title and content of accordion, you need to use the following css:

.accordion .question.active .title { background-image: url('PATH-TO-IMAGE') !important; }
.accordion .question .answer { background-image: url('PATH-TO-IMAGE') !important; }

2) It is not possible to replace icon with image but you can remove it if you want with the following css:

.accordion .question.active .title > .acc-icon-plus, .accordion .question.active .title > .acc-icon-minus { display: none !important; }

happydolphin · April 2016

I tried adding a background image but don't see the changes taking place?

Kindly advice.

Albert · April 2016

Please send us link to page where you did it.

happydolphin · April 2016

--

Albert · April 2016

As we can see, you did mistakes in Custom CSS section and that's why it does not work. We suggest to move the css we gave you on 1st position to see the difference.

happydolphin · April 2016

I see the changes only when I click into the accordion. The ".accordion .question .title" class still uses the default "url(../images/bg_panel.png)" image. Kindly assist.

Albert · April 2016

Please use the following css then:

.accordion .question .title { background: #000 !important; }

Maybe this one would work.

happydolphin · April 2016

Oh it worked! Thanks!

Albert · April 2016

You are welcome

Customize Accordion in Muffin Builder

Comments