[bmahoney59Participant]

Hi-

I’d like the first “Learn more” button on http://bostonhypnosis.com/wordpress/ to link to the first accordion item on http://bostonhypnosis.com/wordpress/?page_id=911.

I read previous posts and pasted the code you posted into the java part of the customizer. I tried both ‘as is’ and search/replacing the word “tab” for “accordion.”

Then I pasted many versions of this code into the href area of the button.

#http://bostonhypnosis.com/wordpress/?page_id=911>Jump and Open Tab#1

Nothing I’ve tried seems to work and I can’t find a 100% clear example in anything that’s been posted. I’m not a coder. Can you help? Thanks.

-Brian

[SenthilMember]

Hi there,

Thanks for writing in!

Could you please share your WP login credentials?
So we can check it out and fix it for you.

Thanks!

[bmahoney59Participant]

This reply has been marked as private.

[RubinKeymaster]

Hey There,

As outlined in this topic, I’ve added the custom CSS the only thing you now will have to do is add the link “Jump and Open Tab/Accordion #1” to the section of the page where your accordion is being displayed. In your about page for example the ID selector would be #collapse-1.

[bmahoney59Participant]

Yes, I had read that. Sorry if I’m being dense, but can you tell me where I should add the link “Jump and Open Tab/Accordion #1” to the section of the page? Content band? Column? Then once i’m in that area, which area I should enter “Jump and Open Tab/Accordion #1′?

Can you tell me where on the ‘about’ page I should enter #collapse-1? sorry, I’m not a coder – what i know I’ve had to learn to get this one site working.

Thanks.

-Brian

[Paul RModerator]

Hi Brian,

You can add the ids in your tabnav item settings.

http://screencast.com/t/WuqnmUGL

Hope that helps.

[bmahoney59Participant]

Sorry, I’m confused. I don’t have any tab navs on the page (it’s an accordion) and when I guess at how this is supposed to be set up, it doesn’t work. Best I can get it to do is go to the 911 page – no accordion and it disables the slider at the top of the page so it doesn’t display. So can you tell me specifically-

1. What the code is that should be typed into the href section of the button on the the first “Learn more” button on http://bostonhypnosis.com/wordpress/ page?

2. If my guess was correct in typing “#collapse-1” into the ID field of the accordion item on the http://bostonhypnosis.com/wordpress/?page_id=911 that I want too open and if not, where I should put it?

Again, sorry if I’m being dense but I’m not seeing 100% clear examples and I’m spending a lot of time trial and error. Thanks.

[RubinKeymaster]

Hey There,

The best and cleanest solution would be to link to #x-content-band-2 and remove all the spacing you have in your content band / row so the accordion is sticking to the top of the content band. Then linking to the #x-content-band-2 will lead the customer directly to your accordion.

[bmahoney59Participant]

OK, I made the changes on the 911 page. It’s still not working though.

Can you please give me the exact and complete code that that should I should type into the href section of the first “Learn more” button on http://bostonhypnosis.com/wordpress/ page?
Right now I have: http://bostonhypnosis.com/wordpress/?page_id=911/#x-content-band-2. When the button is pressed it stays on the same page. Please tell me exactly what the string is if you can – again I’m not a coder so the more general answers aren’t enough for me to succeed with this.

Also, can you confirm that my guess was correct in typing “#collapse-1″ into the ID field of the accordion item on the http://bostonhypnosis.com/wordpress/?page_id=911/?

Sorry if I’m asking the same questions over and over again, I’m just trying to get this to work.

Thanks.

-Brian

[Nabeel AModerator]

Hey Brian,

Since you already have #content-band-2 on the homepage that’s why it stays on the homepage and slides to your content-band-2 on the same page. To fix it, you can change the id of content band on homepage only. You can do this by adding the following jQuery script via Appearance > Customize > Custom > Javascript

jQuery(document).ready(function($){
	$(".home #x-content-band-2").addClass("x-content-band-50").removeAttr('id');
	$(".home .x-content-band-50").attr('id', 'x-content-band-50');
});

Regarding your other query, just add collapse-1 in id attribute of your accordion.You’ll need to remove # from the id attribute.

Let us know how this goes!

[bmahoney59Participant]

Thanks. I added the code above and took the # out of the accordion ID attribute. Now it goes to the correct page and band, but the accordion doesn’t open. Can you help with that part as well?

-Brian

P.S. Note that I’m still not sure the code I have written into the href section of the button is correct.

[RadModerator]

Hi Brian,

You shouldn’t be adding #collapse-1 at your accordion. Those type of ID shouldn’t be used to itself as those are automatically generated by accordion for binding purposes. Toggles will be bind to the accordion body matching the auto generated ID.

Now, the problem is, that ID existed two times now (your added ID, and the generated one). It’s like instructing your toggles to toggle the entire accordion instead of just the body.

If you are trying to achieve linking tab from another page to that page. Then what you need is add #collapse-1 from the source and not to the target. Sources of trigger are of course menu navigation, custom link, or buttons.

Check these :

https://theme.co/x/member/forums/topic/open-accordion-from-link/#post-65132
https://theme.co/x/member/forums/topic/link-to-specific-tabs/#post-194644

There are no available features like that, so it needs custom coding fitted to your setup. And it can’t be done by just linking since the accordion or tab are operated through javascript.

Thanks!

[bmahoney59Participant]

Sorry, I’m getting more and more confused. I’ve read those posts – I had before I first asked for help. I’ve re-read your answer several times. I’m not a programmer. I’n not doing anything at all with tabs. The only thing I understand from that message is that I’m supposed to remove #collapse-1 from the accordion. I’ve now done that.

Again, what I want to do is this: make first “Learn more” button on http://bostonhypnosis.com/wordpress/ link to the first accordion item on http://bostonhypnosis.com/wordpress/?page_id=911. That’s all.

Can someone tell me how to do this with exact instructions for what to type where? Again, I’m not a programmer. Really dumbed down “type this in this area” instructions are all I need or can follow. if someone can help me this way, I’d really apprecaite it. Thanks.

[RadModerator]

Hi there,

Will explain it, but still similar to that thread.

Same code from other thread, add this at your customizer’s custom javascript. You don’t have to worry about tab_nav, this code is made to work on both tab and accordion.

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

Now go to your “Learn more” link/button and update it’s href to http://bostonhypnosis.com/wordpress/?page_id=911#collapse-1 And that’s it.

Eg. <a href="http://bostonhypnosis.com/wordpress/?page_id=911#collapse-1">Learn More</a>

If you will going to use it on link/buttons on the same page, you will have to add data-jump-target="#tab-1". But disregard if you don’t plan to.

Then please let us know when you’re done so we could check if there is any conflict from your current setup.

Hope this helps.

[bmahoney59Participant]

Hi-

Thanks for the really clear instructions. Much appreciated! It still doesn’t work, though. When I press the ‘Learn More’ button, it goes to page 911, but nothing happens with the accordion. Are there any other instructions you can give me that might enable me to do this?

[Author]

Posts