[Carlos3618Participant]

I would like to trigger an accordion element with a button using cornerstone.
Well I recently saw different approaches doing so, but none of them worked for me.
Maybe you could give me an advice. The setup is very easy – One section with two rows.
Row one is a button, row two the accordion. The goal is to open the accordion with the button.

[RadModerator]

Hi there,

Thanks for writing in.

Would you mind providing your site’s URL that has this accordion?

Thanks.

[Carlos3618Participant]

This reply has been marked as private.

[ZeshanMember]

Hi Carlos,

Thanks for writing back!

To open an accordion by clicking a button, follow this workaround:

Step 1: Add a custom ID (e.g., accordion-item-id) to the accordion item you want to open when button is pressed (see: http://prntscr.com/a0fg53). You can add the ID under ID field of its settings (see: http://prntscr.com/7qep0j).

Step 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 (see: http://prntscr.com/7qeolc).

Step 3: Add following JS code under Custom > JavaScript in the Customizer:

jQuery(document).ready(function($) {
  $('.open_accordion').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');
    }

  });
});

That’s it.

Now every time you want to open an accordion by clicking a button, just follow the Step 1 & 2.

Thank you!

[Carlos3618Participant]

Thank you very much! Now it works just perfect.

But just now I tried to resize the accordions width, but it seems, as if the extra width is only added to the right side. I tried everything I can imagine to resize it evenly centered, but nothing works for me.
If you could help me out, this could safe my night.

Thank you!

[RupokMember]

Hi there,

Thanks for writing back. It seems you are trying to increase the width with very large pixel value. Kindly use less value or 100% although it should be 100% by default.

However to increase the width on both side, you can disable the column container. To do this, select the ROW that contains the accordion and disable Column Container – http://prntscr.com/a1qoqd

Hope this helps.

Cheers!

[iluxusParticipant]

Hello I need a bit of help

Sorry to bring up this post again. I am trying to do the same thing Carlos. I managed to make my accordian open when you click a button which is great. But i need it to work with a button inside a prompt element i tried to adding the “open_accordian” in the prompt class but its not working. So my question is how can i make this work with a button in a prompt element.

Thank you

[Rue NelModerator]

Hello There,

Thanks for updating this thread! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you.

[iluxusParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi,

Thank you for providing your url.

To make it work on your prompt’s button, you can change the javascript code to this.

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');
    }

  });
});

Hope that helps.

[Author]

Posts