xxxxxxxxxx
1
<div class="mb-3">
2
3
</div>
4
<div class="row justify-content-center mb-3">
5
<div class="col-md-3">
6
<button type="button" class="btn btn-primary" id="expand-example-button">
7
Expand list which has active class in side
8
</button>
9
</div>
10
</div>
11
12
<div class="row">
13
<div class="treeview" id="expand-example">
14
<ul>
15
<li>One</li>
16
<li>Two</li>
17
<li>
18
<a>Three</a>
19
<ul >
20
<li>Second-one</li>
21
<li>Second-two</li>
22
<li>
23
<a>Second-three</a>
24
<ul>
25
<li>
26
<a>Third-one</a>
27
<ul >
28
<li>Fourth-one</li>
29
<li class="active">Fourth-two</li>
30
<li>Fourth-three</li>
31
</ul>
32
</li>
33
<li>Third-two</li>
34
<li>
35
<a>Third-three</a>
36
<ul>
37
<li >Fourth-one</li>
38
<li>Fourth-two</li>
39
<li>Fourth-three</li>
40
</ul>
41
</li>
42
</ul>
43
</li>
44
</ul>
45
</li>
46
</ul>
47
</div>
48
</div>
xxxxxxxxxx
1
.treeview ul.collapsing {
2
transition-duration: 0ms;
3
transition-delay: 0ms;
4
}
xxxxxxxxxx
1
const expandTreeview = document.getElementById('expand-example');
2
const expandButton = document.getElementById('expand-example-button');
3
const expandEl = document.querySelector('#level-expand-example-item')
4
const actives = document.querySelectorAll(".active")
5
const expandInstance = Treeview.getInstance(expandTreeview);
6
7
expandButton.addEventListener('click', () => {
8
actives.forEach((active, index) => {
9
const closest = active.closest('ul')
10
closest.setAttribute('id', `expandable-${index}`)
11
expandInstance.expand(`expandable-${index}`);
12
closest.removeAttribute('id')
13
})
14
});
15
16
Console errors: 0