Docs

[Bell_Lodge]

Hi,

I have tried to understand and follow all of the info provided for the above including
https://community.theme.co/forums/topic/open-accordion-from-link/page/6/#post-1001306

I really would like to see this work for me.. I have the latest code, but am lost on where the Id goes and what I should be calling (If that makes sense)

I currently have a single link on about page http://staging.bell-lodge.co.nz/about/ . I want to link to FAQ! on http://staging.bell-lodge.co.nz/about/faqs/

Tried everything and not working

Rad suggested starting a new thread to get update for accordion, I cannot find this so have started a further link..

Cheers

Rick M

NZ

[Lely]

Hi Rick,

Can you try adding this code on Appearance > Customize > Custom > Edit Global Javascript:

jQuery( function( $ ) {

var collapse = location.hash.replace('#collapse-', '');

if ( collapse !== '' ) {

$(document).ready( function() {

$( '.x-accordion-group:nth-child(' + collapse + ') .x-accordion-heading a').trigger('click');

setTimeout ( function() {

 $('html,body').stop().animate({scrollTop: $( '.x-accordion-group:nth-child(' + collapse + ') .x-accordion-heading').offset().top - ( $('.x-navbar').height() - 43 )},700 ,'swing');

}, 300 );

} );

}
  
  $('.x-nav-wrap .x-nav a').click(function(){ 
    
    var collapse1 = this.hash.substr(1);
    var collapse2 = collapse1.replace('collapse-', '');
    if(collapse2 !== ''){
    $( '.x-accordion-group:nth-child(' + collapse2 + ') .x-accordion-heading a').trigger('click');

		setTimeout ( function() {
		
		 $('html,body').stop().animate({scrollTop: $( '.x-accordion-group:nth-child(' + collapse2 + ') .x-accordion-heading').offset().top - ( $('.x-navbar').height() - 43 )},700 ,'swing');
		
		}, 300 );
    }
 

    
  });

} );	

Then to open accordion, please add this to your href: http://staging.bell-lodge.co.nz/about/faqs/#collapse-2
Change 2 to your accordion content you want to be open. Above code is generic. I can see that you have 2 accordion element. Please add id on each accordion then we will adjust the code. Tell which accordion you want to open.

Hope this helps.

[Bell_Lodge]

Hi Lely

This works.. Yayayay.. I have added ids for both accordions faql1 and faql2..

Thank you for helping out.. Would you be able to explain where I was going wrong?? I like to try and learn a little from these sorts of things..

I can start building out a new section for my faqs on the front page now..

Thanks again..

Rick M

NZ

[Lely]

Hi Rick,

Please update the code to this:

jQuery( function( $ ) {

var collapse = location.hash.replace('#collapse-', '');

if ( collapse !== '' ) {

$(document).ready( function() {

$( '#faql2 .x-accordion-group:nth-child(' + collapse + ') .x-accordion-heading a').trigger('click');

setTimeout ( function() {

 $('html,body').stop().animate({scrollTop: $( '#faql2 .x-accordion-group:nth-child(' + collapse + ') .x-accordion-heading').offset().top - ( $('.x-navbar').height() - 43 )},700 ,'swing');

}, 300 );

} );

}
  
  $('.x-nav-wrap .x-nav a').click(function(){ 
    
    var collapse1 = this.hash.substr(1);
    var collapse2 = collapse1.replace('collapse-', '');
    if(collapse2 !== ''){
    $( '#faql2 .x-accordion-group:nth-child(' + collapse2 + ') .x-accordion-heading a').trigger('click');

		setTimeout ( function() {
		
		 $('html,body').stop().animate({scrollTop: $( '#faql2 .x-accordion-group:nth-child(' + collapse2 + ') .x-accordion-heading').offset().top - ( $('.x-navbar').height() - 43 )},700 ,'swing');
		
		}, 300 );
    }
 

    
  });

} );	

I have updated this line:
$( '.x-accordion-group:nth-child(' + collapse2 + ') .x-accordion-heading a')
To this:
$( '#faql2 .x-accordion-group:nth-child(' + collapse + ') .x-accordion-heading a')

The previous line calls every accordion on the page. On the updated line we have added the accordions unique identifier -> the id which is faql2. Adding those ID means that the code will just work for that specific accordion. So when you go to this link:http://staging.bell-lodge.co.nz/about/faqs/#collapse-2 it will open just the second accordion item of the accordion on the right side of your FAG page.

Hope this helps.

[Bell_Lodge]

Hi Lely

Thanks for that, I was hoping I could have this work for both accordions, accordion 1 ID=faql1 & accordion 2 ID=faql2

Would you be able to update the code to reflect that..

Much appreciate the efforts..

Rick M

NZ

[Rad]

Hi Rick,

It’s kind of tricky working on tab and accordion now that they have the new structure. It’s now index based structure, and not by ID.

Since your accordion has two group, or may have more than one group, indexes may change too. Let’s update your javascript to this,

jQuery( function( $ ) {

var target_hash = window.location.hash;

var id_index_table = {
'#faq1' : 1,
'#faq2' : 2,
'#faq3' : 3,
};

$(document).ready( function() {

var target_index = id_index_table[ target_hash ];

if ( target_hash !== '' && target_index > 0) {

$( $( 'a.x-accordion-toggle' ).get( target_index - 1 ) ).click();

 $('html,body').stop().animate({scrollTop: $( $( 'a.x-accordion-toggle' ).get( target_index - 1 ) ).offset().top - ( $('.x-navbar').height() - 43 )},700 ,'swing');

}

} );

} );

As you’ll notice here

var id_index_table = {
'#faq1' : 1,
'#faq2' : 2,
'#faq3' : 3,
};

We assign specific ID to each Tab index. 1 is always the first tab, then rest follows 🙂

You can now add whatever ID you prefer 🙂 Example,

var id_index_table = {
'#faq_part_one' : 1,
'#faq_part_one' : 2,
'#faq_final' : 3,
};

Then simply link it, http://domain.com/page/page/#faq_part_one

Cheers!

[Bell_Lodge]

Lely & Rad

I would like to say “Bodacious”, Fabulous, Magic, Brill, Beaudy Mate, Bloody Marvelous..

Thank you so much.. Works like a charm.. Took me a little to understand how it worked, however.. THANK YOU SO MUCH..

Have an Ab Fab day / night

Rick M

NZ

[Paul R]

You’re welcome Rick and thank you for your kind words. 🙂

[Author]

Posts