Tagged: anchor link, tab section
-
AuthorPosts
-
April 9, 2021 at 3:37 am #1293407
Hi,
I’ve created a page to feature a number of restaurants. The page is here: http://discoverdowntowndanville.org/welcome/dine.
I have the restaurants listed in various tab sections based on the food they offer: breakfast, lunch, dinner, etc. When a user clicks on a tab section (lunch, for instance), they see all the restaurants that offer lunch. If they click on an anchor link for a restaurant listed in the tab section, it takes them to content on the same page about that restaurant. I would like to then link back from that restaurant to a different tab section (dinner, for instance).
The tab sections work great to link down to the restaurant content, but I can’t get the anchor links in the restaurant sections to take me back to a different tab section. I can’t see a place to apply an ID attribute to a tab section. I tried a workaround of linking to a text column in the tab section with a custom ID, but that doesn’t work, either.
I see that a few other people have asked similar questions (here and here and here, and I have tried to follow the advice in these threads but without any luck. Based on one of the threads, I placed the following code in my Enfold Child functions.php:
// custom script
add_action( ‘wp_footer’, ‘ava_custom_script_tab_section’ );
function ava_custom_script_tab_section() {
?>
<script type=”text/javascript”>
(function($) {
function scrollToTab(s, e,) {
$(s).on(e, function(event) {
var anchor, loc, cur, hash, tab, parent, pos;if( e == ‘load’ ) {
loc = window.location.hash;
hash = loc;
} else {
loc = $(this).attr(‘href’);
hash = loc.substring(loc.indexOf(‘#’));
}tab = $(‘.av-section-tab-title[href=’+ hash +’]’);
parent = tab.parents(‘.av-tab-section-outer-container’);
pos = parent.offset();tab.trigger(‘click’);
if(hash) {
setTimeout( function() {
$(window).scrollTop( pos.top – 100 )
}, 1000 );
}
});
}scrollToTab( ‘.menu-item a’, ‘click’ );
scrollToTab( window, ‘load’ );
})(jQuery);
</script>
<?php
}I would really appreciate any help you can provide.
Thanks!
JohnApril 12, 2021 at 6:08 am #1293846Hey johnjosephjohansson,
Thank you for the inquiry.
The script is not yet working because it is currently listening for any click events done on the default menu items, but it looks like you are using the button element. To fix that, you have to look for this line..
scrollToTab( ‘.menu-item a’, ‘click’ );
.. and replace it with this.
scrollToTab( ‘.avia-button’, ‘click’ );
Make sure that the button link corresponds to the tab section title or ID. So with that in mind, the button link should be set to “#coffee–pastries” when you want that button to open the Coffee & Pastries tab. And if you are wondering about the double hyphen between coffee and pastries, that is because the theme automatically replaces spaces with hyphen and removes special characters, which in this case the character “&”.
Best regards,
IsmaelApril 23, 2021 at 4:44 pm #1296386Hi, thanks so much for your reply. I updated the functions.php file with the new scrollToTab line but, unfortunately, the anchor link is not working to scroll back up the page to the tab section.
Maybe the problem is that I’m not sure where to set the link in the tab section. I see that I can set a custom ID in a column’s Developer Sections, but I don’t see that same option in a tab’s Developer Section. I only see Custom CSS Class and Lockable Custom CSS Class.
Thanks for your help,
JohnApril 26, 2021 at 7:42 am #1296681Hi,
The custom ID is based on the tab title, so for Coffee & Pastries tab, the ID will be coffee–pastries, and for Ice Cream, it will be ice-cream. As we noted above, spaces and special characters such as “&” will be automatically converted to hyphens.
This syntax is invalid.
scrollToTab( ‘.avia-button’, ‘click’ );
You have to replace the curly quotes with straight ones.
scrollToTab('.avia-button', 'click' );
Best regards,
IsmaelMay 20, 2021 at 5:44 pm #1301469Thanks for your help! This is perfect.
May 22, 2021 at 4:41 am #1301720 -
AuthorPosts
- You must be logged in to reply to this topic.