[Th_DParticipant]

You mean on the url calling for the accordion?

like this? <a href="http://www.hyseco.be/blog/le-changement-de-baignoire/#collapse-2">Jump and Open Tab/Accordion #1</a>

Because even when doing that way, it’s not opening the accordion!

thanks!

[ZeshanMember]

Hi Th,

Thank you for writing in!

You may want to refer to this thread: http://theme.co/x/member/forums/topic/anchor-links-in-accordions/page/5/#post-85609

Cheers!

[fenixwebenParticipant]

Hello,

How would I accomplish this using one of the primary nav menu items? I have a primary nav on a single one page navigation website, the primary menu was added through Appearance > Menus. The actual syntax in view-code for this item is <a href="#collapse-3"> which is the result of adding this menu item as a custom link in Appearance>Menus. The ultimate goal is to be able to click on this menu item, in this case “Event Details” and access/open an accordion item in the same page. The accordion has only one item.

I thought about using javascript to add attributes data-jump-target and class.

Any ideas?

Thanks!

[Kosher KMember]

Hello,

Can you please provide us the URL of your site so we can check and provide you with more tailored advise.

Thanks

[fenixwebenParticipant]

http://www.risefestival.com

Clicking on “Events Details” takes you to a section that says:

“RiSE is a traditional lantern festival that brings
people together, so they can rise a little higher.”

Right beneath this paragraph you will find in smaller text:

“More Event Details”

“More Event Details” is an accordion item that contains content regarding the event. This is the accordion item that I’d like to have open when “Event Details” menu item is clicked.

I hope this helps to explain my problem.

Thanks

[ChristopherModerator]

Hi there,

Please add the code below into Customizer -> Custom -> Javascript:

jQuery('#menu-item-6741 a').click(function(){
	setTimeout(function(){
		jQuery('.x-accordion-toggle.collapsed').trigger('click');
	}, 1200);
});

Hope it helps.

[RachelMoranParticipant]

Hi,

I added the code from above (July 4, 2014 at 7:19 pm #65132) into my customizer’s Javascript in WordPress.

I’m still having trouble figuring out how to link a button to an accordion inside a tab. Could you confirm that I should be adding that JS code in WordPress to Appearance > Customize > Custom > Javascript?

Could you also take a look at this and help me understand what I’m not getting right? I’m trying to link a button inside a container to the first accordion item inside the first tab.

Thank you!! 🙂

[content_band style=”color: FFFFFF” bg_color=FFFFFF” border=”all” inner_container=”true”] [custom_headline type=”center” style=”margin-top: 0;” level=”h4″ looks_like=”h3″]I am a storyteller — a creative adventurer smitten with technology. [/custom_headline]

<center>At work, I am a writer for agencies and big brands. I invent concepts and story lines and write the copy and content. Sometimes, I’m in charge of other writers, too. In my free time, I work on various projects inspired by the absurdity of existence.</center><center>

[button type=”transparent” shape=”rounded” size=”large” href=”#” title=”My Work” class=”enable_jump_to” data-jump-target=”#royal-caribbean”]CHECK OUT MY WORK[/button]

[/content_band]

[tab_nav type=”three-up” float=”none”] [tab_nav_item id=”work-tab” title=”WORK” active=”true”] [tab_nav_item title=”LIFE”] [tab_nav_item title=”WORKLIFE”] [/tab_nav]

[tabs] [tab active=”true”] Here is my recent work.

[accordion id="my-accordion"] [accordion_item parent_id="my-accordion" id="#royal-caribbean" title="ROYAL CARIBBEAN (Digital + Print)" open="true"] This is Royal Caribbean work.[/accordion_item]

[fenixwebenParticipant]

It worked like a charm! Thank you!

One more thing. In the page “BUY TICKETS” you can also find a link “Event Details” that is intended to take you to the homepage Event Details accordion content. It does take you, I wonder how can it trigger the opening of the accordion as well.

So if you go to “BUY TICKETS” then click on “Event Details” my goal is to have the same accordion to open as well.

BTW, awesome theme and thanks a ton for the help.

[RadModerator]

Hi Fenix,

One page will work only with single page content. Your Buy Tickets is from different page in which it will not work that way.

You may consider this http://theme.co/x/member/forums/topic/page-links-using-ids/page/2/#post-98964 customization to make it possible with just two conditions.

Once done, change the previously given css and change it to this.

jQuery('#menu-item-6741 a, #menu-item-7257 a,').click(function(){
	setTimeout(function(){
		jQuery('.x-accordion-toggle.collapsed').trigger('click');
	}, 1200);
});

Cheers!

[RachelMoranParticipant]

SECOND TIME POSTING — please let me know if this isn’t in the right place!

Hi,

I added the code from above (July 4, 2014 at 7:19 pm #65132) into my customizer’s Javascript in WordPress.

I’m still having trouble figuring out how to link a button to an accordion inside a tab. Could you confirm that I should be adding that JS code in WordPress to Appearance > Customize > Custom > Javascript?

Could you also take a look at this and help me understand what I’m not getting right? I’m trying to link a button inside a container to the first accordion item inside the first tab.

Thank you!! 🙂

[content_band style=”color: FFFFFF” bg_color=FFFFFF” border=”all” inner_container=”true”] [custom_headline type=”center” style=”margin-top: 0;” level=”h4″ looks_like=”h3″]I am a storyteller — a creative adventurer smitten with technology. [/custom_headline]

<center>At work, I am a writer for agencies and big brands. I invent concepts and story lines and write the copy and content. Sometimes, I’m in charge of other writers, too. In my free time, I work on various projects inspired by the absurdity of existence.</center><center>

[button type=”transparent” shape=”rounded” size=”large” href=”#” title=”My Work” class=”enable_jump_to” data-jump-target=”#royal-caribbean”]CHECK OUT MY WORK[/button]

[/content_band]

[tab_nav type=”three-up” float=”none”] [tab_nav_item id=”work-tab” title=”WORK” active=”true”] [tab_nav_item title=”LIFE”] [tab_nav_item title=”WORKLIFE”] [/tab_nav]

[tabs] [tab active=”true”] Here is my recent work.

[accordion id="my-accordion"] [accordion_item parent_id="my-accordion" id="#royal-caribbean" title="ROYAL CARIBBEAN (Digital + Print)" open="true"] This is Royal Caribbean work.[/accordion_item]

[ZeshanMember]

Hi Rachel,

Thank you for writing in!

We’re sorry for not seeing your earlier message. Would you mind sharing your website’s URL so that we can take a closer look to your setup?

Meanwhile, please review our this post: http://theme.co/x/member/forums/topic/open-accordion-from-link/#post-69749

Thanks!

[fenixwebenParticipant]

Hi,

This is a reply for item: #109124

I’m not sure what I did but id=menu-item-6741 disappeared. The issue I’m facing is that the javascript opens all accordions on the page now. I edited the script for test run with the actual ids from the source code of the page but it didn’t fix it.

Thanks

[ZeshanMember]

Hi there,

Thank you for writing in!

Upon checking, the menu item 6741 is appearing just fine here. Regarding the accordion issue, you can try using the following code instead of the one provided above:

jQuery('#menu-item-6741 a').click(function(){
   setTimeout(function(){
      jQuery('#event_details .x-accordion-toggle.collapsed').trigger('click');
   }, 1200);
});

Hope this helps. 🙂

Thank you.

[fenixwebenParticipant]

Thank you for your help. This solved the immediate issue.

Perhaps you can help me with another issue or guide me to the solution. In the same website when you rendered it on a mobile device the main menu expands but does not stick, it collapses immediately. Up until a few days it working fine, I’m not sure what I did.

Any ideas?

Thanks!

[ChristianModerator]

Hey Fenix,

Please update X to the latest version (2.5.1). Please see also our new documentation in our Knowledge Base especially Prouduct Validation so you could update X and the plugins in your dashboard in the future.

Thanks.

[Author]

Posts