[Casper BParticipant]

Hello,

Using anchor tags is it possible to jump to an accordion on the same page and have that accordion pop open?

Testing Garden Care Accordion link on this page (link under slider).

http://staging5.yasemingreenscapes.ca/services/

Thanks,
Casper

[RadModerator]

Hi Casper,

Thank you for writing in!

Sure that is possible, just add this code at your customizer’s custom javascript.

jQuery(function($){

	$(document).ready(function(){ jump_to_tab( $, $('.x-nav-tabs .x-nav-tabs-item a[href="#' + location.href.split("#").slice(-1)[0] + '"], .x-accordion-toggle a[href="#' + location.href.split("#").slice(-1)[0] + '"]') ); });
	$('.enable_jump_to').click( function(e){ e.preventDefault(); jump_to_tab($, $('.x-nav-tabs .x-nav-tabs-item a[href="' + $(this).attr('data-jump-target') + '"], .x-accordion-toggle a[href="' + $(this).attr('data-jump-target') + '"]') ); } );

});

function jump_to_tab($, tab_nav) {
			if(tab_nav.length >=1) {
	            $(tab_nav).click();
	            $('html,body').animate({scrollTop: $(tab_nav).offset().top - ( $('.x-navbar').height() + 50 )},700 ,'swing');
        	}
}

Then, every time you add a button, or a link. You just need to add enable_jump_to and data-jump-target (target ID)

Example : <a href="#" class="enable_jump_to" data-jump-target="#tab-1">Jump and Open Tab/Accordion #1</a>

This should work on both tab and accordion.

Let us know how it goes.

[Jeff FParticipant]

How can I achieve this but at the same time jump to another page that has the tabs.. For example I have a homepage slideshow to link to our products page tab 1 and another slide on the homepage that would link to our products page tab 2?

[Colton TParticipant]

Jeff, that sounds like what I wanted to do. Support answered my question a while back. Here: http://theme.co/x/member/forums/topic/anchor-links-in-accordions/

[RadModerator]

Hi guys,

This code should do that. But instead of adding enable_jump_to, you will just need to add the url of the page where you tab is then the tab ID.

Example :

<a href="http://domain.com/my-page/#tab-1">Jump and Open Tab/Accordion #1</a>

Thanks!

[Jeff FParticipant]

Worked perfect thanks guys!

[Kosher KMember]

That’s great

Cheers

[Th_DParticipant]

Hi!

I tried adding the code to the customizer Javascript and then to put it on my page. But it doesn’t work.

The page URL is:

http://www.hyseco.be/blog/le-changement-de-baignoire

(the password for the page is 123)

Am I missing something here?

[Paul RModerator]

Hi,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[Th_DParticipant]

This reply has been marked as private.

[ZeshanMember]

Hi there,

The code seems to be working fine. Can you direct us where have you added the link to your accordion?

Example:

<a href="http://domain.com/my-page/#tab-1">Jump and Open Tab/Accordion #1</a>

Thank you.

[Th_DParticipant]

Hi 🙂

On that URL:
http://www.hyseco.be/blog/le-changement-de-baignoire/

– I tried three different ways:

<a class="enable_jump_to" href="#" data-jump-target="#tarif"><img class="aligncenter wp-image-357" src="http://www.hyseco.be/blog/wp-content/uploads/2014/08/Tarifs_PBN-1024x768.png" alt="Tarifs_PBN" width="400" height="300" /></a>

<a class="enable_jump_to" href="#" data-jump-target="#tarif">Jump and Open Tab/Accordion #1</a>
<a class="enable_jump_to" href="video" data-jump-target="#video">Go Go Go Go</a>[accordion]

– The code on the accordion is

[accordion_item title="Tarif"  class="accordion-hyseco" id="tarif"]

[ZeshanMember]

Hi TH,

Thank you for writing in!

I got the issue now. Actually we had made a little change in the code, so please follow this post in this thread: http://theme.co/x/member/forums/topic/open-accordion-from-link/#post-69749

Hope this helps. 🙂

Thank you.

[Th_DParticipant]

Hi,

Thank you! It solved part of the problem! It’s actually redirecting to the right accordion, but it doesn’t open!

Am I still missing something?

Sorry for the inconvenience!

Thanks a lot!!!!!!

[ZeshanMember]

Hi TH,

Thank you for writing in!

It seems that you aren’t using proper IDs of your accordion inside the URL. Your accordion items have IDs of collapse-1 … collapse-4.

Please use the correct IDs.

Hope this helps. 🙂

Thank you.

[Author]

Posts