Proposed Feature: Allow for hash links to go to open show-hide section on page

  • KZeni

    (@kzeni)


    7 years, 1 month ago

    I have a page with multiple WP-ShowHide sections being used to have sections which are expandable/collapsible. I would love it if I could use the WP-ShowHide type as an ID for an anchor/hash link which then automatically opens that WP-ShowHide section when visited.

    I was able to accommodate this for myself using:

    
if(window.location.hash){ // They entered this page with a hash in the URL
	$('div[id^="'+window.location.hash.replace('#','')+'"].sh-link.sh-hide').find('a').first().click();
}

    I would love to see this officially supported in a plugin update.

    Thanks for the great plugin!

    • This topic was modified 7 years, 1 month ago by KZeni. Reason: Added example code
Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter KZeni

    (@kzeni)

    7 years, 1 month ago

    Also, having this run on hashchange could be helpful if items within the site’s navigation have hash links which are for content on the same page.

    So maybe include this in addition to the code snippet above.

    
$(window).on('hashchange', function() {
	$('div[id^="'+window.location.hash.replace('#','')+'"].sh-link.sh-hide').find('a').first().click();
});

    Thanks again.

    Thread Starter KZeni

    (@kzeni)

    7 years, 1 month ago

    The two code snippets above don’t scroll to the item as if it were an anchor (they just expand the section). Here’s the complete code I came up with for the full functionality:

    
var scrollOffset,$activeShowHide;
function showShowHideByHash(){
    scrollOffset = 40;
    $activeShowHide = $('div[id^="'+window.location.hash.replace('#','')+'"].sh-link.sh-hide');
    if($activeShowHide.length>0){ // Make sure the anchor exists on the page
        $activeShowHide.find('a').first().click(); // Click to expand the ShowHide section
        // Scroll to ShowHide section
        $('html,body').stop().animate({
            scrollTop:$activeShowHide.offset().top-scrollOffset
        },800);
    }
}
if(window.location.hash){ // They entered this page with a hash in the URL
    showShowHideByHash();
}
$(window).on('hashchange',function(){ // They're already on the page and clicked an anchor link going to a different section
    showShowHideByHash();
});
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Proposed Feature: Allow for hash links to go to open show-hide section on page’ is closed to new replies.