Details & Summary – Accordion coding error

  • Unknown's avatar
    actknowledgeinfo · Member ·

    Whenever I post an accordion post, earlier, it used to keep the details hidden. [User required to click on the points to open the details]

    Look at one of the posts [Click here ] . The accordion is supposed to work at “section details” which is just above the bold words of the page (scroll a fair amount down) .
    When I click on it, it does shut down. But by default, it is always open.
    When I click on it, before actually posting the article, on Chrome, the browser snaps. On Microsoft Edge, the bullets don’t show at all.

    Is it because of incompatibility with theme. Or something else?

    Note: The details aren’t open while posting. I’ve cleared cache and cookies many times before reattempting.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    kosiew · Member ·

    hi,

    I tested your link (https://actknowledgeinfo.wordpress.com/2018/07/18/savings-interest-or-fd-interest-which-is-exempt-for-me/) on these browsers on Windows 10:
    1. Chrome
    The Section Details expands when the arrow bullet is clicked
    2. Firefox
    The Section Details does not have an arrow bullet.
    It does expand when Section Details is clicked.
    3. Edge
    Section Details is fully expanded.
    Clicking on Section Details does not collapse the section.

    I have tagged modlook for a Staff to help you with this.
    Thank you for your patience while they get back to you ; )

  • kokkieh · Staff ·

    Hi there,

    This is not a WordPress.com issue and has nothing to do with your theme.

    The HTML code you’re using to create this effect is not supported or rendered in the same way across different browsers, and in Edge and Internet Explorer it is not supported at all, so it won’t work in those browsers. See:

    https://caniuse.com/#search=summary

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary#Browser_compatibility

    There’s nothing we can do about that, as we don’t control what HTML the companies behind different browsers choose to support or not, or how browsers are programmed to display content created using that HTML.

  • Unknown's avatar
    actknowledgeinfo · Member ·

    Is there any recommended browser, or, any alternative to accordions for making posts simpler and shorter?

    Thank you for your help.

  • Unknown's avatar
    brookedot · Member ·

    Hi there,

    Which browsers the details and summary HTML are supported by is decided both by the browser developers and the WC3 (a group of ). In your case, that means referring to one of the charts kokkien linked to above to see which browsers to support those elements.

    If you’d like to style the look for supported browsers, consider upgrading your site to the WordPress.com Premium plan or above which gives you the ability to add Custom CSS to your site. If you do decide to upgrade this guide (while a bit dated) provides some basics on how to style the elements:

    The details and summary elements

    As an alternative, Codedrops has also put a guide together on accordions without JavaScript which would be supported on sites with our Advanced Customization upgrade:

    Accordion with CSS3

  • The topic ‘Details & Summary – Accordion coding error’ is closed to new replies.