Accordion Block – Missing Expand/Collapse Arrows

  • Resolved nicoleWP

    (@nicolewp)


    3 years, 1 month ago

    Since the update to WordPress 5.7 today, I no longer see the expand/collapse arrows in the Accordion Block on Chrome desktop view. Mobile and tablet look good. Anybody else seeing this issue?

    The page I need help with: [log in to see the link]

Viewing 11 replies - 1 through 11 (of 11 total)
  • Luke Carbis

    (@lukecarbis)

    3 years, 1 month ago

    @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, 1 month ago by Luke Carbis.
    Thread Starter nicoleWP

    (@nicolewp)

    3 years, 1 month ago

    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.

    Thread Starter nicoleWP

    (@nicolewp)

    3 years, 1 month ago

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

    summary {
    display: list-item;
    }

    Luke Carbis

    (@lukecarbis)

    3 years, 1 month ago

    Glad you got it sorted!

    abseedy

    (@abseedy)

    3 years ago

    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?

    abseedy

    (@abseedy)

    3 years ago

    These are the two pages experiencing the issue

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

    Luke Carbis

    (@lukecarbis)

    2 years, 12 months ago

    @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.

    abseedy

    (@abseedy)

    2 years, 12 months ago

    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?

    Luke Carbis

    (@lukecarbis)

    2 years, 12 months ago

    @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.

    abseedy

    (@abseedy)

    2 years, 11 months ago

    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/

    abseedy

    (@abseedy)

    2 years, 10 months ago

    Hi Luke.

    Did you manage to get anywhere with this?

    We are still experiencing the issue.

    Cheers

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Accordion Block – Missing Expand/Collapse Arrows’ is closed to new replies.

Tags