Accordion Block – Missing Expand/Collapse Arrows

@nicolewp Hi Nicole! Shavua tov!

I’ve just tried out an accordion block on 5.7 myself, and had no problems with it. The expand / collapse arrows show up as expected on Chrome desktop, and other browsers I tested too.

So then I went on a search to try and discover why the arrow could not be showing on the page you linked to. At first I thought the arrow might be added via CSS through our plugin…?but then I learned (for the first time) about the <details> HTML tag: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

Genesis Blocks inserts a HTML tag that does all the accordion work. I didn’t know such a thing existed until today. All the styling, including the arrow, should be handled by the browser.

So then I looked a little closer at the theme that you’re using and found the problem. On line 83 of your stylesheet (https://nicciherrmann.com/wp-content/themes/rebalance/style.css?ver=5.7) the <details> tag is told to display: block. This display property hides the browsers default handling of the accordion. Removing details from this CSS definition fixes the problem.

Hope that helps! Sorry for the wall of text. I had fun figuring out what the problem was and wanted to share the journey.

Luke

• This reply was modified 3 years, 8 months ago by Luke Carbis.

Hi Luke, Thanks so much for coming back. I removed the details, from article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
display: block;
} and I am afraid it hasn’t solved the problem.

Hi Luke, this worked:
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
display: block;
}

summary {
display: list-item;
}

Glad you got it sorted!

Hi.

I am also having this problem on the two wordpress sites I manage which use the theme Total.

I tried both above options but none of them worked.

Any other ideas as to how to fix it?

These are the two pages experiencing the issue

https://www.citizenscience.org.au
https://www.watergum.org

@abseedy The problem is that your theme specifies that the summary element should display as block. This needs to be updated in your CSS to display as list-item.

Hi Luke. Thanks for the reply. However, as I said I already tried this and it didn’t work. First I removed display, and then I also tried their version;

Hi Luke, this worked:
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
display: block;
}

summary {
display: list-item;
}

But this didn’t work either. Do you have any other idea of how to fix the problem?

@abseedy If you send me the pages that aren’t displaying properly, I could take a look at how your theme’s CSS is affecting them.

HI Luke.

Thanks so much, I really appreciate it.

There are lots and lots of pages. But here are a couple, from two different sites, which both use the same theme, Total.

https://watergum.org/platypuswatch/
https://watergum.org/cane-toad-challenge/

https://citizenscience.org.au/online-resource-finder/
https://citizenscience.org.au/who-is-acsa/

Hi Luke.

Did you manage to get anywhere with this?

We are still experiencing the issue.

Cheers