Panel collapse(expand) from another page

Question

I have a page with a left hand menu that collapses/displays content when the user clicks on a link. This works perfectly using an href, data-target, data-collapse-group, and data-toggle as found in my example: http://jsfiddle.net/ns_19/rff70hfL/

Working Code Link example:

    <li style="font-size: small">
        <a href="#collapse2" data-target="#collapse2" 
        data-collapse- group="myDivs" data-toggle="collapse">
        Anti-Corruption Laws</a>
    </li>

JavaScript to expand/collapse panel

$("[data-collapse-group='myDivs']").click(function () {
    var $this = $(this);
    $("[data-collapse-group='myDivs']:not([data-target='" + $this.data   ("target") + "'])").each(function () {
        $($(this).data("target")).removeClass("in").addClass('collapse');
    });
});

I now need to add a content map that would link directly to each panel on a page. As shown here (Content Map - http://jsfiddle.net/ns_19/fsL7pntf/ ). I can access the page only with the default panel expanded but I cannot directly access any of the other panels currently collapsed.

I have tried extending the href to include the form name and searched for any existing submitted questions on multiple sites. Regardless of the link I select, only the first or default section of the page is displayed.

I believe the issue is the JavaScript on the called page is not receiving the value to act upon it. Does anyone have an idea how I get the #Collapse to be caught, and processed, by JavaScript on the page I'm trying to access?

Note, these pages originally are set up with a master and content but were placed together due to jsfiddle restraints.

Answer 1

I finally figured it out through trial and error. However if someone wants to offer suggestions to improve I would appreciate it.

There are several modifications to be made in both files:

1. Change the href on the ContentMap to: (note sending the # never was sent if I use #collapse2). Do this for all links.

    <a title="Insider Trading" href="../Forms/Assets.aspx?section=collapse2">Insider Trading</a> 

2. In the code-behind of my master page I added the following two code blocks. This simply checks the query string if a specific section has been passed and if it has, sets the value of a hidden field on the master page.

    protected void Page_PreRender(object sender, System.EventArgs e) { NavToSection(); } protected void NavToSection() { List<string> keys = new List<string>(Request.QueryString.AllKeys); if(keys.Contains("section")) { this.HiddenMaster.Value = Request.QueryString["section"]; } } 

3. On the master page I added the hidden field and the following two JavaScript functions. The $(document).ready(checkCollapse); function simply calls the checkCollapse(jQuery) when the document "is ready"

    <input type="hidden" id="HiddenMaster" name="HiddenMaster" value="default" runat="server" /> function checkCollapse(jQuery) { var oValToCheck = document.getElementById('HiddenMaster').value; //get the value of the hidden field in the master "HiddenMaster" if (oValToCheck != 'default') { //If the HiddenMaster's value is not equal to 'default' then continue. var oCollapse = document.getElementById(oValToCheck); // Search the DOM for the object I am looking for to expand. var isTargetExpanded = $(oCollapse).hasClass('in'); // Check if section already is already expanded. Not really needed here anymore $(oCollapse).removeClass('collapse').addClass("in"); // expand selected target by changing the css classes assigned to it var $this = $(this); // get reference to this page. JQuery reference $this.data("target", "#" + oValToCheck); // assign the target //cycle through all "myDivs" and remove 'in' or add 'collapse' to any div where target is not equal to passed value $("[data-collapse-group='myDivs']:not([data-target='" + $this.data("target") + "'])").each(function () { $($(this).data("target")).removeClass("in").addClass('collapse'); }); } } $(document).ready(checkCollapse); // Execute the checkCollapse function once the document 'isready'