CODEWITHSUNDEEP
jquerytwitter-bootstrapnav
Baddie
Baddie

Reputation: 345

How do I expand all parents of a bootstrap nav element?

I have a Bootstrap 4 nav in a sidebar that uses dynamic content from a db and displays like a tree. It works as expected when it comes to collapsing and expanding the various elements within the tree by clicking on the elements.

However. I want to be able to encode a tree element into a url so that when the url is visited and the page loads, the tree element is displayed as already expanded.

The first level of elements in the tree expand no problem using $(el).collapse("toggle") on document ready, but when its applied to any lower level, even though the element expands, its not visible because none of the parent elements are expanded at that point.

How can I also get all parent elements of the expanding element to also expand?

EDIT: A sample as requested

So, say if I want menu1-1-1-1 to be expanded when the page loads, that means menu1-1-1, menu1-1 and menu1 (the parents of #menu1-1-1-1 in the tree) all need to be expanded.

<nav>
  <ul>
    <li>
      <a href="#menu1" data-toggle="collapse" aria-expanded="false">Menu 1</a>
      <ul id="menu1" class="collapse">
        <li>
          <a href="#menu1-1" data-toggle="collapse" aria-expanded="false">Menu 1.1</a>
          <ul id="menu1-1" class="collapse">
            <li>
              <a href="#menu1-1-1" data-toggle="collapse" aria-expanded="false">Menu 1.1.1</a>
              <ul id="menu1-1-1" class="collapse">
                <li>
                  <a href="#menu1-1-1-1" data-toggle="collapse" aria-expanded="false">Menu 1.1.1.1</a>
                  <ul id="menu1-1-1-1" class="collapse">
                    <li>Item a</li>
                    <li>Item b</li>
                  </ul>
                </li>
                <li>Item c</li>
                <li>Item d</li>
              </ul>
            </li>
            <li>Item e</li>
            <li>Item f</li>
          </ul>
        </li>
        <li>
          <a href="#menu1-2" data-toggle="collapse" aria-expanded="false">Menu 1.2</a>
          <ul id="menu1-2" class="collapse">
            </li>Item g</li>
            </li>Item h</li>
          </ul>
        </li>
        <li>Item i</li>
        <li>Item j</li>
      </ul>
    </li>
    <li>
      <a href="#menu2" data-toggle="collapse" aria-expanded="false">Menu 2</a>
      <ul id="menu2" class="collapse">
        <li>
          <a href="#menu2-1" data-toggle="collapse" aria-expanded="false">Menu 2.1</a>
          <ul id="menu2-1" class="collapse">
            <li>Item k</li>
            <li>Item l</li>
          </ul>
        </li>
        <li>Item m</li>
        <li>Item n</li>
      </ul>
    </li>
  </ul>
</nav>

Upvotes: 0

Views: 860

Answers (1)

gsimo83
gsimo83

Reputation: 109

Hi if i correctly understand what you want it's something like this:

$('#idtree .collapse').collapse('show');

Could you provide us the html and css or a little example?

Upvotes: 1

Related Questions