Accordion in Upfront Theme does not close all sections

Hello
when adding a accordion i noticed that one of the section alway remains open. Is there a state that keeps them all closed?

Thanks for your help

  • Predrag Dubajic
    • Support

    Hey @purewaterboy,

    Hope you're doing well today :slight_smile:

    This option is not currently available but it has been mentioned few times before so developers are considering changing this in future.
    I have added your thread to list of users looking for this :slight_smile:

    Best regards,
    Predrag

  • David
    • Site Builder, Child of Zeus

    This is a necessary feature. The whole point of an accordion is to MINIMISE the amount of seen text. I am using the accordion to display a large amount of text for 12 separate industry groups but because the fist industry is open on page load, the use has to scroll, scroll, scroll to even see the other listings.

    It defeats the whole purpose.

    You can see the page here

  • Milan
    • WordPress Wizard

    Hello David,

    I hope you are having a good day and thanks for your deep insights. :slight_smile:

    Yes you are right, whole point of according is to minimize the amount of seen text, but our developer could have thought it differently and provided one accordion already opened, I think their intention was to give member first reading shot.

    But I do believe that is not the case with every single member of our community. :slight_smile: So there is one other option we can try here with third party plugin Accordion. Please install that plugin on your site and follow these steps to make your accordion the way you want. :slight_smile:

    #1) Install and active Accordion plugin.
    #2) Add new accordion. In its accordion content tab as shown in below screenshot, add your accordion content. You may want to copy paste, because I can see there is larger amount of content in each accordion

    #3) After this much process, setup custom styling accordion to your need and if you are not sure how to do so, please ping us back here with some specific styling query ( like title of accordion should be green in color ). If you want to set custom styling, please set it up for accordion in its "custom css" tab.

    #4) One you are done with all of tweaking and setting up stuff, please check accordion's "shortcode" tab and copy shortcode text from there.

    #5) Now open Upfront editor > navigate to page where you have put accordion > remove that and add text element from left side panel > paste copied shortcode text in it > Save changes and see this process's result in action on front end.

    Please let me know how it goes for you. :slight_smile:
    Kind Regards,
    Milan

  • David
    • Site Builder, Child of Zeus

    Hi Milan and thanks for your response.

    I am aware of alternative options but the last thing I want to do is add external plugins when they should not be necessary.

    Over the past 5 years I've bought more than 150 themes and plugins - all of which need to be monitored for updates. I have subscribed to WPMUDev to end that cycle, not perpetuate it.

    I understand that you are offering assistance here - and I appreciate it - but the solution is simply an option in the Upfront Accordion widget. Open or closed. In fact, that option has been present in every accordion tool I have ever used.

    Each external solution I have to apply loads up my site and slows it down.

    David Wilks

  • Milan
    • WordPress Wizard

    Hello again David Wilks,

    Yes you are 100% right, solution here is just to add simple option in Upfront editor, but dear David, as my colleague Predrag told you in his last post, he already moved your this thread to list of users who are looking for this feature, but its not the easy process, First this feature needs to be approved by developer( they review and checks its important and relevance in existing functionality ), then they start working on it and finally after testing they merge it with next updated build. But this will need lot of time investment when there are other critical updates and bugs are being taken in account. So my only point just was to provide you best alternative solution meantime. :slight_smile:

    Hope this will clarify a bit.
    Best Regards,
    Milan

  • David
    • Site Builder, Child of Zeus

    Hi Milan,

    As I said, I do appreciate your input. There is no question that your work-a-round can alleviate the problem. My point is only that it is a temporary solution to a permanent problem. At some stage the accordion widget will have the necessary functionality and then I will need to move everything back (if I want to have an optimized site).

    DW

  • Milan
    • WordPress Wizard

    Hello David,

    Yes you are right, let's see what our developer has to say on this. :slight_smile: I will update you as soon as I get some notification about our this feature request. :slight_smile: Till that time, please let me know if there is something in which I can help you with. :slight_smile:

    Best Regards,
    Milan

  • Kenneth
    • Design Lord, Child of Thor

    Hi David,

    You probably already have a functioning work-around for this issue but one option is to create an extra accordion panel above your first content and then use a bit of css "display:none" on that panel. When the feature is fixed the additional panel can simply be deleted.

    Best regards
    Ken

  • Adam Czajczyk
    • Support Gorilla

    Hello David, hello Ken!

    As my colleagues mentioned, Accordion's behavior has already been marked as a feature request. For now though solution proposed by Ken seems to be a reasonable workaround. I tested it on my setup and it's working great.

    Here's a step by step guide on how to apply it to your site:

    1. first you need to make sure that the first accordion panel is either empty or doesn't carry any meaningful content as we'll hide it

    2. in Upfront editor click on Accordion element on layout and click on "Settings" button (a gray "gear" icon on top edge of element"

    3. In Upfront panel on the left click on "Coose or Create Preset" drop down list:
    - if you created preset for this element before, select it
    - if there's only a default preset available, type any name for your preset there and click "Add"

    4. right above "Advanced Settings" there's an 'Edit Preset CSS" button, so click it

    5. put this line into the CSS editor that pops out:

    .accordion-panel:first-of-type {display:none;}

    6. save editor and save Upfront layout

    From now on the very first panel of an accordion will be hidden and only those "not-expanded by default" will be shown.

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.