CSS/JS Link to child in tree view

  <div id=headers>MENU
    <div id=H_1>H_1
      <div id=H_1_1>H_1_1

      </div>
      <div id=H_1_2>H_1_2
        <div id=H_2_1>H_2_1

        </div>
        <div id=H_2_2>H_2_2

        </div>
        <div id=H_2_3>H_2_3

        </div>

      </div>

    </div>
    <div id=H_2>H_2
      <div id=H_2_1>H_2_1

      </div>
      <div id=H_2_2>H_2_2

      </div>

    </div>
    <div id=H_3>H_3
      <div id=H_3_1>H_3_1

      </div>
      <div id=H_3_2>H_3_2
        <div id="H_3_2_1">H_3_2_1

        </div>
        <div id=H_3_2_2>H_3_2_2

        </div>

      </div>
      <div id=H_3_3>H_3_3
        <div id=H_3_3_1>H_3_3_1

        </div>
        <div id=H_3_3_2>H_3_3_2

        </div>
      </div>
    </div>

Select allOpen in new window

$("div", $("#headers")).on("click", function(e) {
  var expanded = $(this).children("div:first-child").is(":visible");
  console.log(expanded);
  $("div", this).hide();
  $(this).children("div").toggle(!expanded);

  console.log(this.id);
  e.stopPropagation()
});

var hash = $(location).attr('hash');
console.log("jq : " + hash);
console.log("js : " + window.location.hash);
console.log("jsl : " + window.location);

// hardcode, in jsfiddle it is not working
// delete, comment-out this on your web server
hash = "#H_3_2_1"
var h = $(hash)

console.log($(h).text());
if (h) {
  $(h).parent().parent().parent().parent().click();
  $(h).parent().parent().parent().click();
  $(h).parent().parent().click();
  $(h).parent().click();
  $(h).click();
}

Select allOpen in new window

#headers div {
  cursor: pointer;
  text-decoration: underline;
}

#headers div div,
#headers div div div,
#headers div div div div,
#headers div div div div div {
  display: none;
  cursor: pointer;
  text-decoration: underline;
  padding-left:20px;
}

Select allOpen in new window

$(function() {
  //all js code goes here
});

Select allOpen in new window

hash = "#H_3_2_1"

Select allOpen in new window

var hash = $(location).attr('hash');
var h = $(hash);

Select allOpen in new window

The internal links only take me to the destination if the destination is already open.
Any ideas how to fix that so they work even when closed? 

<div id=H_1_2>
        H_1_2<br>
        Paragraph 1.2<br>
        <a href=#H_3_2_1>Link to #H_3_2_1</a><br>
        <div id=H_1_2_1>
...etc...

Select allOpen in new window

thats why I suggested below

http://tospeirs.net/test/demos/tree_views/ee_hainkurt1.htm?H=H_3_2_1 
this is how we do normally... 

  $("a", $("#headers")).click(function () {
        var hash = this.hash;
        if (hash != "" || hash!= null)
            window.location.reload();
    });

Select allOpen in new window

Add it where in the jQuery block, exactly? 

<div id=headers>MENU

    <div class=menu id=H_1><span class="header">H_1</span>
      <p>
        paragraph for header 1...
      </p>

      <div class=menu id=H_1_1>
        <span class="header">H_1_1</span>
        <p>
          paragraph for header 1 1...
        </p>
      </div>

      <div class=menu id=H_1_2><span class="header">H_1_2</span>
        <p>
          paragraph for header 1 1 2...
        </p>
        <div class=menu id=H_2_1><span class="header">H_2_1</span>
          <p>
            paragraph for header 2 1...
          </p>
        </div>
        <div class=menu id=H_2_2><span class="header">H_2_2</span>
          <p>
            paragraph for header 2 2...<br>
            link to <a href="?H=H_3_2_1">H_3_2_1</a>
          </p>
        </div>
        <div class=menu id=H_2_3><span class="header">H_2_3</span>
          <p>
            paragraph for header 2 3...
          </p>
        </div>
      </div>
    </div>

    <div class=menu id=H_2><span class="header">H_2</span>
      <p>
        paragraph for header 2...
      </p>

      <div class=menu id=H_2_1><span class="header">H_2_1</span>
        <p>
          paragraph for header 2 1...
        </p>
      </div>

      <div class=menu id=H_2_2><span class="header">H_2_2</span>
        <p>
          paragraph for header 2 2...
        </p>
      </div>
    </div>

    <div class=menu id=H_3><span class="header">H_3</span>
      <p>
        paragraph for header 3...
      </p>

      <div class=menu id=H_3_1><span class="header">H_3_1</span>
        <p>
          paragraph for header 3 1...
        </p>
      </div>

      <div class=menu id=H_3_2><span class="header">H_3_2</span>
        <p>
          paragraph for header 3 2...
        </p>
        <div class=menu id="H_3_2_1"><span class="header">H_3_2_1</span>
          <p>
            paragraph for header 3 2 1...
          </p>
        </div>
        <div class=menu id=H_3_2_2><span class="header">H_3_2_2</span>
          <p>
            paragraph for header 3 2 2...
          </p>
        </div>
      </div>

      <div class=menu id=H_3_3><span class="header">H_3_3</span>
        <p>
          paragraph for header 3 3...
        </p>
        <div class=menu id=H_3_3_1><span class="header">H_3_3_1</span>
          <p>
            paragraph for header 3 3 1...
          </p>
        </div>
        <div class=menu id=H_3_3_2><span class="header">H_3_3_2</span>
          <p>
            paragraph for header 3 3 2...
          </p>
        </div>
      </div>
    </div>

  </div>

Select allOpen in new window

$("#headers .header").on("click", function(e) {
  var expanded = $(this).parent().find(".menu").eq(0).is(":visible");
  console.log($(this).next(".menu"));
  console.log(expanded);
  $(this).nextAll(".menu").hide();
  $(this).nextAll(".menu").toggle(!expanded);

  console.log(this.id);
  e.stopPropagation()
});

var getUrlParameter = function getUrlParameter(sParam) {
  var sPageURL = window.location.search.substring(1),
    sURLVariables = sPageURL.split('&'),
    sParameterName,
    i;

  for (i = 0; i < sURLVariables.length; i++) {
    sParameterName = sURLVariables[i].split('=');

    if (sParameterName[0] === sParam) {
      return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
    }
  }
};

//show top levels
$("#headers").children(".menu").show();

var H = getUrlParameter("H");

// hardcode, in jsfiddle it is not working
// delete, comment-out this on your web server
H = "H_3_2_1"
var menu = $("#" + H)
console.log($(menu).text());

if (menu) expandAll(getMenuHeader(menu));

function expandAll(m) {
  m.find(".header").eq(0).click();
  var p = getParentMenu(m);
  if (p) expandAll(p);
}

function getParentMenu(m) {
  var pm = m.parent();
  if (pm.hasClass("menu")) return pm;
}

function getMenuHeader(m) {
  var h = m.find(".header").eq(0);
  return h;
}

Select allOpen in new window

#headers .header {
  cursor: pointer;
  text-decoration: underline;
}

#headers p {
  padding: 0px;
  margin: 0px;
}

#headers .menu {
  display: none;
  padding-left: 20px;
}

#headers {
  padding: 10px;
  border: 1px dotted gray;
  margin: 10px;
}

Select allOpen in new window

H = "H_3_2_1"

Select allOpen in new window

4. When I click on the "link to H_3_2_1" under H_2_2, it opens H_3_2_1 (good), but closes H_2_2 (not as per my original, but not necessarily a show-stopper - I might be willing to go with it).

1. clicking on menu items, just opens/closes or show/hides menu items

2. clicking on a link > refreshes the page, passes H in url. and when page opens, gets that value, and expands to that menu, all menu items are closed...

<p>Open menu <a href="javascript:openMenu('H_1_2_2')">H_1_2_2</a>...</p>

Select allOpen in new window

I've put that here

document.getElementById(H).scrollIntoView();

Select allOpen in new window