Accordion background-color when collapsed and accordion header placement below content

[nblund]

Hi there.

1. How do I set the background-color of the accordion (.x-acc) - not just the accordion item - when collapsed? I would like the background to be transparent when collapsed in order to see an image of an underlying element.
2. How do I place the header (and indicator / toggle) below the accordion content?

Thanks

[prakash_s]

Hello @nblund,

Thanks for writing to us.

1. How do I set the background color of the accordion (.x-acc) - not just the accordion item - when collapsed? I would like the background to be transparent when collapsed in order to see an image of an underlying element.

You can use this custom CSS code on the element CSS for it

$el.x-acc .x-acc-item {
background-color: transparent;
}

2. How do I place the header (and indicator / toggle) below the accordion content?

Regretfully there is no option to move the Header or indicator down. It would require custom development. I would suggest you contact a developer who can assist you with your concern.

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector or you subscribe to One where customization questions are answered.

Hope it helps.
Thanks

[nblund]

Hi @prakash_s. Yes, I am by all means an amateur and it is totally fine, if you tell me that what I am asking for is outside the scope of your theme support. From reading all the support tickets I get the feel that it is not totally clear, when an issue is within our outside the scope of your support. Just let me know.

Meanwhile, For your information, I did observe the .x-acc, .x-acc-item, .x-acc-header, .x-collapsed, and .x-acc-content classes in the theme.co accordion documentation, and yet still don’t manage to control the background-color of the accordion as follows: 1) Background-color: #fff when open; and 2) background-color: transparent when collapsed. The reason I wish to style the accordion rather than the accordion item is that the accordion makes out 100% height of the parent column (which the accordion item does not).

As far as I can see, what you suggested, is just a general styling of the accordion item no matter if it is collapsed or not - not quite the same.

Thank you for your help.

[tristup]

Hi @nblund,

Providing the extensive custom CSS codes are outside the scope of our Theme Support, but we still provide small CSS code which helps the customers to resolves their issues. Now, coming to your point, if I have correctly understood it, you want the Accordion Header color to transparent while the Item is collapsed and when it opens the header and the content background should be white.
If that is the case, you need to add another piece of CSS code with the code provided by my colleague and place it where he referred to.

$el.x-acc .x-acc-item 
{
    background-color: transparent;
}

$el.x-acc .x-acc-item .x-active
{
    background-color: #ffffff;
}

$el.x-acc .x-acc-item > div
{
    background-color: #ffffff;
}

Hope it helps.
Thanks

[nblund]

Excellent, thanks. I can work with that. If I can achieve the same logic, however, only with the full accordion (.x-acc) background (rather than the item .x-acc-item background) that would save me some work. Would you care to advise, please?

[tristup]

Hi @nblund,

Targetting the .x-acc class will affect the full Accordion in that case the space between two Accordion Item will be affected with it. To target only the Accordion Item, you need to use the .x-acc-item.

Thanks

[nblund]

Hi there. In my case, however, there is just one item, so there would be now space issue… I am trying to achieve a layout identical to this element just below the hero on this page: https://www.apple.com/compliance/ - except that the toggle would be in the same (right) column as the accordion content. Thanks.

[ruenel]

Hello @nblund,

The example URL has a different element structure compared to the Accordion element. Regretfully this is not possible by using any of the builder elements and customizing the element with a CSS. To be able to achieve something like will need custom element structure, custom CSS and a custom JS code. Be advised that this is beyond the scope of our support. You may need to contact a 3rd party developer to be able to accomplish this.

Thank you for your understanding.

[nblund]

Okay, no problem. So, using .x-acc-item .x-active, how do I style it to be 100% of the column height, please? Styling it with a fixed height, eg 20vh, would require I manually set the height responsively.

(I did see other comments in this forum like: Equal Height Columns for Accordions - but it didn’t solve my puzzle.)

(Also, would this be a suggestion for a future feature - identical to what is already found in tabs and card?)

Thanks a lot.

[ruenel]

Hello @nblund,

Did you created a sample page where we can find the Accordion element? We will have to check it and see why the solution on the other thread is not working for you. You may have a different element structures or CSS class slectors.

Best Regards.

[nblund]

Hi again. Actually, it did work - and I am happy with that. But my latest question about the 100% height of the accordion item was not part of the initial question. Please see ref to page and login credentials in in secure note. Thanks.

[tristup]

Hi @nblund,

There is no option to make the Accordion height 100%, but it might be achievable using some customization. As you know that customization is beyond the scope of Theme Support you need to hire a developer who can assist you to do the customization or you can avail of our newly launched service called One, where we answer the questions beyond normal theme support.

Thanks

[nblund]

Okay, thanks. Your help is very much appreciated.

[tristup]

Hi @nblund,

Glad that we are able to help you.

Thanks