Open Accordion by button click

[webmasterLSM]

Hi,
I have tryed to implement the solution of this topic without success:
[https://theme.co/apex/forum/t/open-accordion-with-button-click/24588](https://theme.co/apex/forum/t/open-accordion-with-button-click/24588)

About section -> Learn More Button -> the accordion is just below

Like the creator of the topic when I click the button, it just scroll to accordion level, but the accordion still not open.
Can someone enlight me please?

[rad]

Hi Andrea,

Thanks for reaching out.

I don’t see any accordion below the button in About section, the accordion I’m seeing is under the Tour section. If that’s you’re currently referring then the code will not work since it’s MEC accordion. Would you mind clarifying which one? If it’s MEC then it may require another custom code that is beyond the current function which we can’t cover here in the forum.

Thanks!

[webmasterLSM]

Look through it by Cornerstone. I make accordion quite invisible by removing border, text and background. In my dreams when I click on the button the accordion should magically open, showing information.
It’s right under the button in “about” section. There’s any other way to do so with the same resoult?
Thanks in advance for youre patience.

[thai]

Hi @AndreaM,

I’ve updated the custom JS code a little bit. Everything is working fine now:

jQuery(document).ready(function($) {
  $('.open_accordion').on( "click touchstart", function(e) {
    
    var $this = $(this);
    var thisHref = $this.attr('href');
    var accordion = $(thisHref).find('button');

    if ( accordion.length ) {
      e.preventDefault();

      accordion.trigger('click');
      
      return false;
    }

  });
});

Cheers!

[webmasterLSM]

Great @thai !
It works like a charm now

There is a way to avoid accordion open when I click on it? In other words it shold be open only by the button and no by accidental click?

Thank you very much

[jade]

Hey Andrea,

Please add this code in X > Theme Options > CSS:

#about_modal button {
    pointer-events: none;
}

https://www.w3schools.com/cssref/css3_pr_pointer-events.asp

Hope this helps.

[webmasterLSM]

Outstanding!
Thank you @Jade It’s perfect!

[Prasant]

You are most welcome.