Accordion customization with css

[rinzin]

Two questions:

I referenced this forum to begin customizing my accordians and have found some success but:

1. How do I have multiple customized accordians on one page. Mainly I want to change the bg colors for three distinct accordians with the same functions.

When I modify from:
.accordion-tool .x-accordion-heading .x-accordion-toggle {

to:
.accordion-tool-set1 .x-accordion-heading-set1 .x-accordion-toggle-set1 {

…they cannot be called more than once. Is there a simple way to create multiple variations within css on the same page?

[lely]

Hello There,

Do you mean adding 1 accordion element and then setting different colors for each item? If yes, try adding an ID on each of those accordion item ID field. For example, on the first accordion item add acc-item1 on the next one add acc-item2 and so on. Then custom CSS would be like this:

    #acc-item1 .x-accordion-heading a { /*For first accordion item */
          background-color: #fff;
          font-family: "ag-super" !important;
          color: #0066B3;
     }
    #acc-item2 .x-accordion-heading a { /*For second accordion item */
          background-color: #fff;
          font-family: "ag-super" !important;
          color: #0066B3;
     }
    #acc-item3 .x-accordion-heading a { /*For third accordion item*/
          background-color: #fff;
          font-family: "ag-super" !important;
          color: #0066B3;
     }

Copy the structure on how I used the ID for other custom CSS.

Hope this helps.

[rinzin]

That seems promising. Would I then need to make sure the id section of the accordion is #acc-item1, 2, 3?

Or would it go into another area (class)?

[friech]

Hi There,

Do you mean you want to style each Accordion element (not each accordion item) right?

Add a class to each of you Accordion element (example: accordion1, accordion2, accordion3 https://prnt.sc/fumf0z) then we will be using this classes to reference the accordion that you want to style.

Go back to the post you reference above, notice the given CSS, there is .accordion-tool on its selector? that was the class they use to target there accordion.

So in your case you need to replace that with the classes you added on your own accordion ( .accordion1, .accordion2, .accordion3).

Yes, you need 3 sets of that CSS block to style your 3 accordion elements differently.

Hope it helps,
Cheers!