Jquery Show/hide In Another Page

I have 2 html page in Page 1 there is 2 links 'link1' & 'link2' in Page 2 there is also 2 links 'link1' & 'link2' as well as 2

&

Solution 1:

This should give you a general idea of how to do it. Please note I haven't tested this code so it might have some minor issues.

Page 1 HTML:

<ul class="linkList">
    <li><a href="page2.html#pan1">Link 1</a></li>
    <li><a href="page2.html#pan2">Link 2</a></li>
</ul>

Page 2 HTML:

<ul class="linkList">
    <li><a href="#pan1" class="panlink">Link 1</a></li>
    <li><a href="#pan2" class="panlink">2</a></li>
</ul>
<div id="pan1" class="switchgroup">div 1</div>
<div id="pan2" class="switchgroup">div 2</div>

Page 2 JS:

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

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

Page 2 CSS:

.switchgroup { display: none; }

Solution 2:

I don't think you can create function to be implemented on other pages, but in your case you can use parameters:

when you provide the second page's (redirect to the second page) add a query string parameter, or by form's parameters (Post/Get). and on JQuery's ready function add your hide/show code.

from where I understood your question, this should do the work.

Share