Closing EA Accordion with a button click

  • Resolved olivershotter

    (@olivershotter)


    2 years, 3 months ago

    I have added an accordion, and for content type I have selected a template which all displays fine.

    My challenge is that I need to make quite a lot of these style of accordions, some of which will have a lot of content inside of them.

    My client wishes that instead of scrolling to the top each time to close the accordion, the user can do this at the bottom of the content via a button.

    I have added a button [currently not doing anything] And I assume this is possible by giving the button its own class and using the JS extension to add some code [I have added the extension but unsure what code is required to close the accordion]

    If anyone can help me that would be great! The accordion in question is underneath the 2 buttons.

    Equally, if you think there’s a better way of achieving this, let me know.

    Thanks in advance

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

Viewing 9 replies - 1 through 9 (of 9 total)
  • Thread Starter olivershotter

    (@olivershotter)

    Looking at the file Adv_Accordion.php

    I think I have found the function to close the tab, being this:

    $repeater->start_controls_tab( 'closed_tab', 
            [ 
                'label' => esc_html__( 'Closed Tab', 'essential-addons-for-elementor-lite' ),
                'condition' => [
                    'eael_adv_accordion_tab_icon_show' => 'yes',
                ],
            ]
        );

    Is this actually the function that closes the accordion?

    How would I assign this function to the button inside the accordion to close it?

    • This reply was modified 2 years, 3 months ago by olivershotter.
    Plugin Support Abid Hasan

    (@abidhasan112)

    Hi @olivershotter ,

    Please add this JavaScript code on your page to get this done:

    jQuery(document).ready(function() {
    jQuery(".elementor-element-7c36cac3 .elementor-button").click(function() {
        jQuery("#history- .eael-accordion-tab-title").click();
        return false;
    });
});

    By the way, I would recommend you add a custom Class name on your Close button and write the JavaScript on that selector for good practice.

    NOTE: You can add JavaScript code on your page by using EA Custom JS extension: https://essential-addons.com/elementor/docs/custom-js/

    Let me know how it goes.
    Cheers!

    Thread Starter olivershotter

    (@olivershotter)

    Thank you! it works with the above code.

    I then gave the button its own class and replaced the .elementor-button with the class name but it’s not working. Am I doing something wrong?

    Also, could you tell me how I could add more text into the Tab section?
    I’d like to show the Title and then 2 or 3 lines of subtext in the tab before the user expands the content. Assuming I can edit the HTML but a bit unsure.

    • This reply was modified 2 years, 3 months ago by olivershotter.
    Plugin Support Abid Hasan

    (@abidhasan112)

    Hi @olivershotter ,

    You’ve added the class or the ID? In Elementor button, you can add the ID in button link from here: https://d.pr/i/CMWtFg

    And in selector ID need to write with “#” not the .(dot). So you have to replace .elementor-button to #button-id

    I hope you understand. If you still facing an issue please bring back the section (I can’t find that on your page now) on your page again so that I can help you again with the correct code with your custom id/class.

    Regarding the sub text bellow, the tab title – You can write any HTML there. Have a look at this video I made for you and see how I customized just like you want ?? : https://d.pr/v/ylwXsX

    I hope you will do it by following my procedure.
    Cheers!

    Plugin Support Abid Hasan

    (@abidhasan112)

    Hi @olivershotter ,

    Can you please get back to us? Has your issue been resolved yet?
    Let us know so that we can help you out.

    Thank you!

    Thread Starter olivershotter

    (@olivershotter)

    Hi,

    I can close the accordion with the button.

    But, If I add html to make a sub-text, this stops the button from working!
    When I remove the subtext html/css, the button works again and the accordion closes..

    Also, I have the design that I need to replicate here for the accordions, so would need to add a button to that section.
    Here is how I need to design it when the advanced accordion is closed: https://ibb.co/QdfV2S4

    Thread Starter olivershotter

    (@olivershotter)

    Please visit here, with working close button:

    https://addgp.leancomms.com/addisons-gp-about/

    I have added the styling above the accordion, this is how I need the closed tab to look.

    Alternatively if not possible, can I trigger the “more” button to open the accordion, but somehow make it included as part of the accordion?

    Thank you!

    • This reply was modified 2 years, 3 months ago by olivershotter.
    Plugin Support Abid Hasan

    (@abidhasan112)

    Hi @olivershotter again,

    Sorry for the late response here. I’ve just visited your given URL and saw that you’re now using another widget and achieved your requirement.

    So everything is good now? If so please let us know so that we can resolve this topic.

    Thank you!

    Plugin Support Abid Hasan

    (@abidhasan112)

    Hi there,

    Since you’ve achieved your requirement with another widget (from different plugin), I’m marking this topic as resolved.

    Thank you!

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Closing EA Accordion with a button click’ is closed to new replies.