How to change the accordion item

Support
#1

Hi there!

I need to get rid of the left arrow
And also how to move it to the center, next left to the text?

Also how to make those corners with no radius

…e73-14.x-container {
background-color: rgb(152, 150, 127);
}

.e73-16.x-acc .x-acc-header {
border-width: 0px;
border-style: none;
border-color: transparent;
border-radius: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family: inherit;
font-size: 1em;
font-style: normal;
font-weight: 400;
line-height: 0;
text-align: center;
color: rgba(0,0,0,1);
background-color: rgb(152, 150, 127);
}

.e73-16.x-acc .x-acc-content {
border-width: 0px 0 0 0;
border-style: solid;
border-color: rgba(225,225,225,1) transparent transparent transparent;
padding: 0px 0px 0px 0px;
font-family: inherit;
font-size: 1em;
font-style: normal;
font-weight: 400;
line-height: 0;
color: rgba(0,0,0,1);
background-color: #eaebc5;
}

.e73-16.x-acc .x-acc-header:hover, .e73-16.x-acc .x-acc-header[class*=“active”] {
color: rgba(0,0,0,0.5);
background-color: rgb(234, 235, 197);
}

p, .p {
line-height:0em;
font-weight: 100 !important;
}
p, .p {
margin-top: 0em !important;
margin-bottom: 0em !important;
}

THANKS!

#2

Hello @Iban,

Thanks for asking. :slight_smile:

Please add following CSS under Pro > Theme Options > CSS to make necessary changes:

.e73-16.x-acc .x-acc-header-indicator {
    display: none;
}

.e73-16.x-acc .x-acc-item {
    border-radius: 0;
}

Can you please elaborate your second question?

Thanks.

#3

Thanks!

Question
How can I make the accordion background header transparent/opacity 0?

The second question is to move the Arrow that was on the left, next to the text (text is in the center now). The arrow changes pointing to the left when is closed and it points down when is open. I need that next to the text.

Thanks!

#4

Hi again,

Please try adding the following CSS as well:

.x-acc, .x-acc-item, .x-acc-header {
    background-color: transparent !important;
}

Also remove the accordion’s container background.

To move the arrow icon, first add the following script in the Theme Options > JS:

jQuery(document).ready(function($){
	$('.x-acc-header-indicator').insertAfter('.x-acc-header-text p');
});

Then add the following code in the Theme Options > CSS:

.x-acc-header-text p, .x-acc-header-indicator {
    display: inline-block !important;
}

Cheers!

#5

That worked, thank you

Question:

How to get rid of the border shadow around the accordion header?

Thanks!

#6

Hi there,

To get rid of box shadow, add the following CSS as well:

.x-acc .x-acc-item {
    box-shadow: none !important;
}

Cheers!

#7

Thanks! that worked