Toggling two divs with the click of one link from another page

Question

I'm trying to create a page that compares two products side-by-side. So far, I have a single-post page for each individual product. On that single-post page is a set of links that allow the user to select a different product to compare it to.

On the comparison page, I was able to figure out how to toggle the first div that pulls the information from the original post, but how do I toggle the second div too?

Here's the code I have on the single-post page (I used Jquery show/hide in another page as a reference):

<ul class="linkList">
    <li><a href="product-comparison/#product1">Product 1</a></li>
    <li><a href="product-comparison/#product2">Product 2</a></li>
</ul>

Here's the code I have on the comparison page:

<ul class="linkList">
    <li><a href="#product1" class="panlink">Product 1</a></li>
    <li><a href="#product2" class="panlink">Product 2</a></li>
</ul>
<div id="product1" class="switch">Product 1</div>
<div id="product2" class="switch">Product 2</div>

My JS:

$(function() {
    var anc = window.location.href.split('#')[1];
    $('#' + anc + '.switch').show();

    $('a.panlink').click(function() {
        $('.switch').hide();
        $($(this).attr('href')).show();
    });
});

and my CSS:

.switch { display: none; }

I've searched high and low, and I can't seem to find an answer for this - only answers from toggling one div.

Let me know if you need clarification - thanks! :)

Answer 1

Here is one approach that may benefit you.

If you every want to compare any of your relative web pages into your current page, use jQuery's AJAX process within an .on('click', 'class-of-product', function() {}); approach to pull data onto your current page. You may need to also use the filter() method to reduce the amount of set elements you are pulling from your product pages.