Next/Previous Child Pages

[rickwhittington]

I have about 10 child pages that are under a parent. I’d like to create a “next page” and “previous page” link to go from one of the child pages to another.

My google fu is coming up short on making that happen.

Any chance you can point me in the right direction if this is possible?

[rickwhittington]

Okay, it’s NOT pretty. But here’s my solution using an Advanced Menu that I hide using CSS and some jQuery.

The advanced menu has an ID of hs_menu_wrapper_portfolio_menu. It auto adds “active” and “active-branch” classes to the li that the URL matches the current page URL.

Here are my previous/next page links:

<section class="portfolio-nav">
    <a class="portfolio-previous">Previous Project</a>
    <a class="portfolio-next">Next Project</a>
</section>

And my JS:

<script>
    $prevPortfolioItem = $('#hs_menu_wrapper_portfolio_menu li.active-branch').prev().find('a').attr('href');
    $nextPortfolioItem = $('#hs_menu_wrapper_portfolio_menu li.active-branch').next().find('a').attr('href');
    jQuery('.portfolio-nav .portfolio-previous').attr('href', $prevPortfolioItem);
    jQuery('.portfolio-nav .portfolio-next').attr('href', $nextPortfolioItem);
    if(typeof $nextPortfolioItem == 'undefined') { 
        $('.portfolio-nav .portfolio-next').addClass('inactive');
    }
    if(typeof $prevPortfolioItem == 'undefined') { 
        $('.portfolio-nav .portfolio-previous').addClass('inactive');
    }
</script>

To explain the logic, I’m making a variable ($prevPortfolioItem) which targets the li before li.active-branch and a variable ($nextPortfolioItem) which targets the li after. Also in that variable, I’m grabbing the href attribute of the child anchor link.

Then, I’m applying that href value to the two .portfolio-nav links. If the href is undefined, them I’m adding ‘.inactive’ to it so that I can hide it via CSS.

–

That’s what I was able to get work. Is there a better way?

[rickwhittington]

Currently, I’m playing with the idea of using an advanced menu to handle some of this. I’d like to target the current page link with jQuery, then take the href from the prev() and next() and apply them to the two links I’ve put together.

I’ll follow up if I can get this to work. Currently battling with how Hubspot links COS pages w/ “//domain.com/page-name” rather than “https:// or http://” which is what jQuery is seeing from the window.location query.