Open accordion with button click

Support
#1

Hello, im trying to make so the accordion element is opened with button click.
I did search the forum for this specific problem, and found this thread:

I tried again and again according to the direction in the thread but failed.

Can you teach me how to do this (open accordion element with button click), and tell me what i did wrong.

#3

Hi there,

The code which is given is completely correct and working. I reiterate the answer:

  1. Add a custom ID (e.g., accordion-item-id) to the accordion item you want to open when the Classic Button is pressed. You can add the ID to ID field of its settings.

  2. Add a button element and under its Href field, add # with the ID you’ve added to the accordion element, e.g., #accordion-item-id. Then add a custom CSS class of open_accordion to the button under Class field of its settings.

  3. Add following JS code to X > Launch > Options > JS:

jQuery(document).ready(function($) {
  $('.open_accordion .x-btn').click(function(e) {
    
    var $this = $(this);
    var thisHref = $this.attr('href');
    var accordion = $(thisHref).find('.x-accordion-toggle');

    if ( accordion.length && $(thisHref).hasClass('x-accordion-group') ) {
      e.preventDefault();

      accordion.trigger('click');
    }

  });
});

The problem that you have with your setup is that you have a typo in your Button element class. You added open_accordian instead of open_accordion.

Thank you.

Cornerstone Accordions Open/Close on Link Click
#4

Hello there… thank you for your reply. Silly me regarding the typo.
I corrected my spelling of the button class to open_accordion

but, its still not working.
I tried to clear my browser cache but its not working.

When i click the button, it just scroll to accordion level, but the accordion still not open. I would be really grateful if you can help me. i really need this to work.

Thank you

#5

Hi there,

Please provide the site’s URL that has this accordion, I double checked your posts and I don’t see any site’s URL.

And make sure your accordion has the same ID as your button’s href. Example, if your button has href="#accordion_one" then your accordion item has ID of accordion_one. It’s the ID that will link the button and accordion item.

Thanks!

#6

the page that i want try this setup is checkout2

https://www.sabeerabeauty.com/checkout2/

can you correctly do the setup for me for this function in this page and demonstrate to me how its done. And at the same time show me what i did wrong. Because i tried to follow the instructions but its still not working.

Thank you.

#7

Hi there,

Thanks for the URL, and it’s working on my end. Please check this video https://www.dropbox.com/s/d1qer2lidyeuuvp/bandicam%202018-02-26%2002-28-48-082.mp4?dl=0

Thanks!

#8

its not working on my end, on my desktop browser and on my phone browser. why do you think that is?

#9

Hi there,

I checked the case with Chrome browser on my Macbook and it is working. Here is the video of the checkout2 page which I see:

Please check the website with another machine. Thank you.

#10

yes… i just check this thing on my end too. It works on desktop and imac. But it doesn’t work on chrome on android. Any thoughts?

#11

Hi,

Please change JS Code provided above to this

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

    if ( accordion.length && $(thisHref).hasClass('x-accordion-group') ) {
      e.preventDefault();

      accordion.trigger('click');
    }

  });
});

Hope that helps.

#12

I change the new JS code provided. Its still not working in the chrome android :persevere: Will you give me solution. Or better yet just adjust in my page until its working in chrome android and then you will know what i did wrong.
I really appreciate you helping me.

#13

Hi,

Sorry, there should be no space between .open_accordion and .x-btn

I went ahead and fix it in your site.

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

    if ( accordion.length && $(thisHref).hasClass('x-accordion-group') ) {
      e.preventDefault();

      accordion.trigger('click');
    }

  });
});

Please check.

Thanks

1 Like
#14

:grin::hugs::sob: you are a life saver. Thank you very much!!!

#15

You’re most welcome.

#16

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.