Bootstrap 3 nested ULs collapse system (without JS/jQuery)

Question

I'm building something like a "treeview" on bootstrap3. But I'm struggling with the collapse system. There is no problem when I expand the parent. But when I try to expand a child, it expands it, but also collapse the parent. And so on...

Here is the html

<div class="panel-collapse" role="tabpanel">
  <div class="panel-body">
    <ul class="treeview">
      <li data-toggle="collapse" class="collapse1" href=".collapse1-1">Item 1
        <ul class="collapse collapse1-1">
          <li data-toggle="collapse" href=".collapse1-1-1">Item 1-1
            <ul class="collapse collapse1-1-1">
              <li>Item 1-1-1
                <ul>
                  <li>Item 1-1-1-1</li>
                  <li>Item 1-1-1-2</li>
                  <li>Item 1-1-1-3</li>
                </ul>
              </li>
            </ul>
          </li>
          <li>Item 1-2</li>
          <li>Item 1-3</li>
        </ul>
      </li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

And here is a jsFiddle: https://jsfiddle.net/yL71kopn/

Can anyone help me on this? I would wish a purely bootstrap solution rather than a custom JS here. Unlees it's completely impossible.

Cheers! :)

Maybe see http://stackoverflow.com/questions/12323066/twitter-bootstrap-stop-propagation-on-dropdown-open — Chris Lear, Jul 07 '16 at 14:57
That question doesn't solve my issue, since I specifically said I did want to avoid custom JS and would prefer a pure bootstrap solution. But our friend @makshh already solved my problem with just an html element :) Thanks anyway! — jbarradas, Jul 08 '16 at 09:21

score 4 · Accepted Answer · answered Jul 07 '16 at 15:08

Use links inside li tags, because when you click to open Item 1-1 you are also clicking on Item 1 li.

<div class="panel-collapse" role="tabpanel">
  <div class="panel-body">
    <ul class="treeview">
      <li>
        <a data-toggle="collapse" class="collapse1" href=".collapse1-1">Item 1</a>
        <ul class="collapse collapse1-1">
          <li>
            <a data-toggle="collapse" href=".collapse1-1-1">Item 1-1</a>
            <ul class="collapse collapse1-1-1">
              <li>Item 1-1-1
                <ul>
                  <li>Item 1-1-1-1</li>
                  <li>Item 1-1-1-2</li>
                  <li>Item 1-1-1-3</li>
                </ul>
              </li>
            </ul>
          </li>
          <li>Item 1-2</li>
          <li>Item 1-3</li>
        </ul>
      </li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

Bootstrap 3 nested ULs collapse system (without JS/jQuery)

1 Answers1

JSFIDDLE