HTML collapse/expand tree not working as expected

Question

I want to collapse category tree with multi hierarchy. I tried so many answers from stack, but it's not working. Can anyone please help me?

I tried this code : https://stackoverflow.com/a/30945775/7727479

Actual Result :

First display Test 1 and Test 3
Then, click on Test 1 => On click Test 2 and Test 8 should be display
Then, click on Test 2 => On click Test 4 and Test 7 should be display
and so on.

UPDATE :

enter image description here

Snippet :

$(document).ready(function() {
  var getChild = $('ul.categories').children('li');
  getChild.each(function(i, v) {
    if ($(v).data('parentcategory') == "0") {
      $(v).addClass('active-collapse');
    }
  });
  $('div.categories-list li').click(function() {
    var main_category = $(this).data('parentcategory');
    $('ul.sub', $(this).parent()).eq(0).toggle();
  });
});

div.categories-list {
  width: 30%;
  margin-bottom: 20px;
  float: left;
}

ul.categories,
ul.sub {
  border-top: 1px solid #c3cfd9;
  margin: 0;
  padding: 0;
}

ul.categories li {
  margin: 0;
  padding: 0;
  list-style: none;
}

ul.categories li a {
  display: block;
  max-width: 100%;
  padding: 10px 5px 10px 10px;
  font-size: 13px;
  background: #FCFCFC;
  color: #3f729b;
  border: 1px solid #c3cfd9;
  border-top: 0px !important;
  text-decoration: none;
  font-weight: 700;
  cursor: pointer;
  transition: all 150ms ease-out;
  -webkit-transition: all 150ms ease-out;
}

ul.categories li a:hover {
  text-indent: 5px;
}

ul.sub {
  display: none;
}

.activeUi {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="categories-list">
  <ul class="categories">
    <li class="child active-collapse" data-parentcategory="0" data-id="1">
      <a class="li-child-text" style="padding-left:1%">Test 1</a>
      <ul class="sub" data-parentcategory="0" data-id="1">
        <li class="child deactive-collapse" data-parentcategory="1" data-id="2">
          <a class="li-child-text" style="padding-left:5%">Test 2</a>
          <ul class="sub" data-parentcategory="1" data-id="2">
            <li class="child deactive-collapse" data-parentcategory="2" data-id="4"><a class="li-child-text" style="padding-left:10%">Test 4</a></li>
            <li class="single deactive-collapse" data-parentcategory="4" data-id="5"><a class="li-single-text" style="padding-left:20%">Test 5</a></li>
            <li class="single deactive-collapse" data-parentcategory="4" data-id="6"><a class="li-single-text" style="padding-left:20%">Test 6</a></li>
          </ul>
        </li>
        <li class="single deactive-collapse" data-parentcategory="2" data-id="7"><a class="li-single-text" style="padding-left:10%">Test 7</a></li>
      </ul>
      <ul class="sub" data-parentcategory="0" data-id="1">
        <li class="child deactive-collapse" data-parentcategory="1" data-id="8"><a class="li-child-text" style="padding-left:5%">Test 8</a></li>
        <li class="single deactive-collapse" data-parentcategory="8" data-id="9"><a class="li-single-text" style="padding-left:40%">Test 9</a></li>
      </ul>
    </li>
    <li class="single active-collapse" data-parentcategory="0" data-id="3"><a class="li-single-text" style="padding-left:1%">Test 3</a></li>
  </ul>
</div>

angel.bonev · Accepted Answer

I think the main problem was in you html structure, if you want to create a level, you need to create li in that level with anchor in the li element.

For example to add TEST 2.2 in TEST 1.0 you need to find next ul.sub after the anchor that is for TEST 1.0 and add another li with anchor , and if you want to create another submenu in TEST2.2 you need to create ul with class sub and and another li

<li class="single deactive-collapse">
    <a class="li-single-text" style="padding-left:5%">Test 2.2 LAST</a>
    <ul class="sub" >
        <li class="child deactive-collapse">
            <a class="li-child-text" style="padding-left:10%">Test 3.2 LAST</a>
        </li>
    </ul>
</li>

And here is the snippet

var addById = function (parent, id, name) {
    $('div.categories-list li').each(function (i, e) {
        if (parent === $(e).data("id")) {
            if (!$(e).find("ul.sub").length) {
                $(e).append('<ul class="sub"></ul>');
            }
            element = '<li class="child deactive-collapse" data-parentcategory="' + parent + '" data-id="' + id + '"><a class="li-child-text" style="padding-left:5%">' + name + '</a></li>';
            $(e).find("ul.sub").append($(element));
            return true;
        }
    });
};
addById(1, 123, 'dynamically');
addById(15, 124, 'dynamically');

$(document).ready(function () {              
    $('div.categories-list li > a').click(function () {
        var main_category = $(this).data('parentcategory');
        $('ul.sub', $(this).parent()).eq(0).toggle();
        return false;
    });
});

div.categories-list {
    width: 30%;
    margin-bottom: 20px;
    float: left;
}

ul.categories,
ul.sub {
    border-top: 1px solid #c3cfd9;
    margin: 0;
    padding: 0;
}

ul.categories li {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.categories li a {
    display: block;
    max-width: 100%;
    padding: 10px 5px 10px 10px;
    font-size: 13px;
    background: #FCFCFC;
    color: #3f729b;
    border: 1px solid #c3cfd9;
    border-top: 0px !important;
    text-decoration: none;
    font-weight: 700;
    cursor: pointer;
    transition: all 150ms ease-out;
    -webkit-transition: all 150ms ease-out;
}

ul.categories li a:hover {
    text-indent: 5px;
}

ul.sub {
    display: none;
}

.activeUi {
    display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="categories-list">
    <ul class="categories">
        <li class="child active-collapse" data-parentcategory="0" data-id="1">
            <a class="li-child-text" style="padding-left:1%">Test 1.0</a>
            <ul class="sub">
                <li class="child deactive-collapse" data-parentcategory="1" data-id="2">
                    <a class="li-child-text" style="padding-left:5%">Test 2.0</a>
                    <ul class="sub">
                        <li class="child deactive-collapse" data-parentcategory="2" data-id="4">
                            <a class="li-child-text" style="padding-left:10%">Test 3.0 LAST</a>
                        </li>
                        <li class="single deactive-collapse" data-parentcategory="2" data-id="5">
                            <a class="li-single-text" style="padding-left:10%">Test 3.0 LAST</a>
                        </li>
                        <li class="single deactive-collapse" data-parentcategory="2" data-id="6">
                            <a class="li-single-text" style="padding-left:10%">Test 3.0 LAST</a>
                        </li>
                    </ul>
                </li>

                <li class="single deactive-collapse" data-parentcategory="1" data-id="7">
                    <a class="li-single-text" style="padding-left:5%">Test 2.1 LAST</a>
                </li>
                <li class="child deactive-collapse" data-parentcategory="1" data-id="8">
                    <a class="li-child-text" style="padding-left:5%">Test 8</a>
                    <ul class="sub" data-parentcategory="8" data-id="9">
                        <li class="single deactive-collapse" data-parentcategory="8" data-id="9">
                            <a class="li-single-text" style="padding-left:40%">Test 9</a>
                        </li>
                    </ul>
                </li>
                <li class="single deactive-collapse" data-parentcategory="1" data-id="10">
                    <a class="li-single-text" style="padding-left:5%">Test 2.2 LAST</a>
                    <ul class="sub">
                        <li class="child deactive-collapse" data-parentcategory="10" data-id="11">
                            <a class="li-child-text" style="padding-left:10%">Test 3.2 LAST</a>
                        </li>
                    </ul>
                </li>
                <!-- PUT EXAMPLE CODE HERE -->
            </ul>
        </li>
        <li class="child active-collapse" data-parentcategory="0" data-id="12">
            <a class="li-child-text" style="padding-left:1%">Test 1.1</a>
            <ul class="sub">
                <li class="child deactive-collapse" data-parentcategory="12" data-id="13"><a class="li-child-text" style="padding-left:5%">Test 2.1 LAST</a></li>
                <li class="single deactive-collapse" data-parentcategory="12" data-id="14"><a class="li-single-text" style="padding-left:5%">Test 2.1 LAST</a></li>
            </ul>
        </li>
        <li class="single active-collapse" data-parentcategory="0" data-id="15"><a class="li-single-text" style="padding-left:1%">Test 1.2 LAST</a></li>
    </ul>
</div>

Rahul · Answer

Yes, you have some issues with the structure of ul li. Please have a look at my demo. You can add your classes and attributes to your will. It won't hamper.

document.querySelector('.categories').addEventListener('click', (e) => {
  const el = e.target;
  const sibling = el.nextSibling.nextSibling;

  if (el && el.className == 'toggle' && sibling) {
    sibling.classList.toggle('show');
  }
});

div.categories-list {
  width: 50%;
  margin-bottom: 20px;
  float: left;
}

ul.categories,
ul.sub {
  border-top: 1px solid #c3cfd9;
  margin: 0;
  padding: 0;
}

ul.categories li {
  margin: 0;
  padding: 0;
  list-style: none;
}

ul.categories li a {
  display: block;
  max-width: 100%;
  padding: 10px 5px 10px 10px;
  font-size: 13px;
  background: #FCFCFC;
  color: #3f729b;
  border: 1px solid #c3cfd9;
  border-top: 0px !important;
  text-decoration: none;
  font-weight: 700;
  cursor: pointer;
  transition: all 150ms ease-out;
  -webkit-transition: all 150ms ease-out;
}

ul.categories li a:hover {
  text-indent: 5px;
}

ul.sub {
  display: none;
}

.activeUi {
  display: block;
}
ul ul {
  display: none;
}

.show {
  display: block;
}

<div class="categories-list">
    <ul class="categories">
        <li >
            <a href="javascript:;" class="toggle">Test 1</a>
            <ul>
                <li>
                    <a href="javascript:;" class="toggle">Test 2</a>
                    <ul>
                        <li>
                            <a href="javascript:;" class="toggle">Test 4</a>
                            <ul>
                                <li>
                                    <a href="javascript:;" class="toggle">Test 5</a>
                                </li>
                                <li>
                                    <a href="javascript:;" class="toggle">Test 6</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:;" class="toggle">Test 7</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:;" class="toggle">Test 8</a>
                    <ul>
                        <li>
                            <a href="javascript:;" class="toggle">Test 9</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <a href="javascript:;" class="toggle">Test 3</a>
        </li>
    </ul>
</div>

HTML collapse/expand tree not working as expected

Tags:

javascript

jquery

collapse

Ankita Patel

2 Answers

angel.bonev

Rahul

Recent Activity

Donate For Us

HTML collapse/expand tree not working as expected

Tags:

javascript

jquery

collapse

Ankita Patel

2 Answers

angel.bonev

Rahul

Related questions

Recent Activity

Donate For Us