Accordion Styling - Custom Font & Icon

[derekbritton]

Hello,

I was working in the previous Support environment to refine the styling of an Accordion I have on my site. I’m almost there with the CSS - but there is still an issue where the dormant state of the Accordion header does not match hover/click state.

1. When the header is closed/inactive, I need to change the font of the title “Feedback on this tool” to ‘ag-super’ and ‘color:#0066B3;’
2. The hover state works perfectly: ‘ag-super’ and circle-down displays correctly
3. When the accordion is active and no hover, need to make the title ‘ag-super’ and the circle-down icon also needs to be fixed so that it points directly down (instead of down to the left).

Attached is a video/gif of the behavior:

Below is the code I have in Customizer currently. Thanks in advance for your help!

Cheers,
DB

/–ACCORDION styles–/

/Accordion heading background color/
/change the font and color of the accordion item title/
.accordion-tool .x-accordion-heading a {
background-color: #fff;
font-family: “ag-super” !important;
color: #0066B3;
}

/Accordion heading hover color/
.accordion-tool .x-accordion-heading a:hover {
background-color: #fff;
font-family: “ag-super” !important;
}

/Overall accordion border color/
.accordion-tool .x-accordion-group {
border-color: #fff;
}

/Border color for each accordion item/
.accordion-tool .x-accordion-group:first-of-type {
border-color: #fff;
}

.accordion-tool .x-accordion-group:nth-of-type(2) {
border-color: #fff;
}

/Background color for each accordion header/

.accordion-tool .x-accordion-heading .x-accordion-toggle {
background: #fff;
}

/Background color for each accordion item/
.accordion-tool .x-accordion-body .x-accordion-inner {
background-color: #fff;
}

/* Toggle Icons */

/* Change Icon of Toggle and color when open */
.accordion-tool .x-accordion-heading .x-accordion-toggle:before {
content: “\f13a”;
color:#0066B3;
}

/* Toggle Icon Color when closed*/
.accordion-tool .x-accordion-heading .x-accordion-toggle.collapsed:before {
color:#0066B3;
content: “\f138”; /* If you wanted a different Icon when closed */
}

/* Toggle Icon Hover Color & Position */
.accordion-tool .x-accordion-heading .x-accordion-toggle:hover:before {
color:#0066B3;
transform: rotate(0) !important;
}

[ruenel]

Hello There,

Thanks for updating in! You will have to upload your code and make use of this code instead:

/* --ACCORDION styles-- */

/*Accordion heading background color*/
/*change the font and color of the accordion item title*/
.accordion-tool .x-accordion-heading a {
background-color: #fff;
font-family: "ag-super" !important;
color: #0066B3;
}

/*Accordion heading hover color*/
.accordion-tool .x-accordion-heading a:hover {
background-color: #fff;
font-family: "ag-super" !important;
}

/*Overall accordion border color*/
.accordion-tool .x-accordion-group {
border-color: #fff;
}

/*Border color for each accordion item*/
.accordion-tool .x-accordion-group:first-of-type {
border-color: #fff;
}

.accordion-tool .x-accordion-group:nth-of-type(2) {
border-color: #fff;
}

/*Background color for each accordion header*/

.accordion-tool .x-accordion-heading .x-accordion-toggle {
background: #fff;
}

/*Background color for each accordion item*/
.accordion-tool .x-accordion-body .x-accordion-inner {
background-color: #fff;
}

/* Toggle Icons */

/* Change Icon of Toggle and color when open */
.accordion-tool .x-accordion-heading .x-accordion-toggle:before {
content: "\f13a";
color:#0066B3;
}

/* Toggle Icon Color when closed*/
.accordion-tool .x-accordion-heading .x-accordion-toggle.collapsed:before {
color:#0066B3;
content: "\f138"; /* If you wanted a different Icon when closed */
}

/* Toggle Icon Hover Color & Position */
.accordion-tool .x-accordion-heading .x-accordion-toggle:before {
    transform: rotate(0deg);
    transition: all 0.3s ease;
}

And by the way, I noticed that most of your css comments is invalid. Instead of use this: /--*general styles - ACTIVE CRUMB*--/, the correct one should be this: `/* --general styles - ACTIVE CRUMB-- */

Hope this helps. Kindly let us know.

[rinzin]

Two questions:

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 anymore. Does that make sense?

[christopher]

Hi there,

The best way is to wrap each of the accordion codes to a div tag with a unique ID. Then you can have your code like this:

#accordion1 REST OF THE SELECTOR {
CSS STYLING
}

To assist you mode I need to have the exact URL which you have added the accordions to follow up.

Thank you.

[derekbritton]

Hello,

Thank you! This worked a treat - and I really appreciate the sidetone about the CSS comments being invalid.

Follow-up question: everything is working as expected, except the borders for each accordion item. I currently have this CSS inputted - and only the first two items are showing with a border… items #3 and so on do not have a border.

Can you tell me how to fix this so that all accordion items have the same borders?

Cheers,
DB

/Border color for each accordion item/
.accordion-opportunity .x-accordion-group:first-of-type {
border-color: #C7C6C6;
}

.accordion-opportunity .x-accordion-group:nth-of-type(2) {
border-color: #C7C6C6;
}

[nabeel]

Hi again,

I checked your page and border is with all of your Accordion items (see screenshot)

Please clear your browser’s cache and check the page again.

Cheers!

[derekbritton]

My apologies - we moved from dev to prod, and I forgot to provide the new details.

[nabeel]

Hi again,

Thank you for providing the new details. Please add the following code in your Customizer:

.accordion-opportunity .x-accordion-group {
    border-color: #C7C6C6 !important;
}

Let us know how this goes!