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:

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

Page 2 HTML:

<ulclass="linkList"><li><ahref="#pan1"class="panlink">Link 1</a></li><li><ahref="#pan2"class="panlink">2</a></li></ul><divid="pan1"class="switchgroup">div 1</div><divid="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