I’m doing a small project where I’m searching for words in collapsed elements. If found, some collapsed elements are opening to display the word.
The next thing I would like to achieve is to keep only the li that contain it and hide the others.
I’m not sure how to proceed further to achieve this. What I’ve tried, hides exactly the element found which in fact, I want to keep. I might need a loop but I’m not sure how to write it.
Everything happens here:
JavaScript
x
19
19
1
function showWordsFound() {2
const word = document.getElementById("searchedWord").value.replace(/[.*+?^${}()|[]\]/g, '\$&');3
const r = new RegExp("(" + word + ")", "ig");4
$(".reports-list-item__title--compendium").each(function(i) {5
if ($(this).text().match(r)) {6
let matches = $(this).text().match(r);7
console.log(matches);8
console.log(typeof matches);9
$.each(matches, function () {10
occurrences.push(i);11
});12
// hide element not matching the word found13
// $(this).parent().hide();14
$(this).closest(".timeline-compendium__content").collapse("show");15
$(this).closest(".timeline-type .timeline-type__content").collapse("show");16
} 17
});18
}19
Can someone help me clarify this?
JavaScript
1
61
61
1
var i = 0;2
3
$(document).on("click", "#findWord", function(e) {4
let occurrences = [];5
6
//reset i7
i = 0;8
9
const x = document.getElementById("searchedWord").value.replace(/[.*+?^${}()|[]\]/g, '\$&');10
let error = document.querySelector("#message");11
12
if (x == "") {13
error.style.display = "block";14
error.style.color = "red";15
} else {16
error.style.display = "none";17
showWordsFound();18
}19
20
let clickClear = document.querySelector("#clear");21
22
clickClear.addEventListener("click", clear);23
24
function clear() {25
// get the search term from the input26
let clickInput = document.querySelector("#searchedWord");27
clickInput.value = "";28
var spans = $(".reports-list-item__title--compendium > mark");29
spans.each(function() {30
spans.contents().unwrap();31
});32
occurrences.splice(0, occurrences.length);33
// reset our labels34
$(".timeline-compendium__content").collapse("hide");35
$(".timeline-type .timeline-type__content").collapse("hide");36
}37
38
function showWordsFound() {39
// create a regex from our term40
const word = document.getElementById("searchedWord").value;41
const r = new RegExp("(" + word + ")", "ig");42
$(".reports-list-item__title--compendium").each(function(i) {43
if ($(this).text().match(r)) {44
// get all the matches45
var matches = $(this).text().match(r);46
$.each(matches, function() {47
// push the index of this section onto the array48
occurrences.push(i);49
50
// // Trying to hide elements that don't contain Summary51
$(this).closest('li').hide();52
53
// console.log(occurrences);54
});55
$(this).closest(".timeline-compendium__content").collapse("show");56
$(this).closest(".timeline-type .timeline-type__content").collapse("show");57
}58
});59
}60
61
});JavaScript
1
87
87
1
.found {2
background-color: yellow;3
}4
5
#labels {6
margin-left: 15px;7
font-size: 16px;8
}9
10
.timeline-compendium {11
margin-left: 2rem;12
}13
14
.timeline-type__header {15
width: 400px;16
height: 50px;17
background-color: rgb(46, 177, 100);18
display: flex;19
align-items: center;20
justify-content: center;21
color: white;22
border: 1px solid white;23
}24
25
.timeline-type__header:hover {26
color: white;27
background-color: rgb(35, 119, 70);28
}29
30
#tab-content {31
border: 1px solid red;32
}33
34
input[type=text] {35
width: 80%;36
padding: 12px 20px;37
margin: 8px 0;38
box-sizing: border-box;39
}40
41
input#findWord {42
background-color: rgb(248, 211, 3);43
border: none;44
color: black;45
padding: 15px 32px;46
text-align: center;47
text-decoration: none;48
display: inline-block;49
font-size: 16px;50
}51
52
#clear {53
width: 25px;54
height: 25px;55
position: absolute;56
top: 20px;57
right: 150px;58
line-height: 25px;59
font-size: 14px;60
padding-left: 8px;61
font-weight: bold;62
cursor: pointer;63
color: #fff;64
background-color: red;65
border: none;66
border-radius: 50%;67
}68
69
#message {70
display: none;71
font-size: 1em;72
}73
74
#btnNext {75
margin-left: 0.5rem;76
}77
78
mark {79
background-color: yellow !important;80
}81
82
.stickyBar {83
position: sticky;84
top: 0;85
z-index: 1;86
background-color: white;87
}JavaScript
1
219
219
1
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />2
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>3
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>4
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>5
<div class="container">6
<div class="row stickyBar">7
<div class="col-sm-12 mb-2">8
<div id="searchForm" class="d-flex flex-column">9
<label for="searchedWord">10
<ul>11
<li>Search for 'summary' (done)</li>12
<li>open collapsed items that contain it (done)</li>13
<li>hide other elements that don't have the word from input field (ex: No link, some content with link, second cool) </li>14
</ul>15
</label>16
<div class="col-sm-12 p-0 d-flex ">17
<input type="text" id="searchedWord" placeholder="Search..." aria-labelledby="searchedWord" value="summary" class="form-control form-control-lg" />18
<button type="submit" id="findWord" class="btn btn-primary">Search</button>19
<div id="clear" role="button">X</div>20
</div>21
</div>22
</div>23
<div class="col-sm-6 mb-2">24
<div id="labels">25
<small role="alert" id="message" aria-hidden="true">Please enter a word to start searching</small>26
</div>27
</div>28
</div>29
<div class="row">30
<div class="col">31
<section class="timeline-compendium">32
<a class="btn timeline-compendium__header" data-toggle="collapse" href="#introduction" role="button" aria-expanded="true" aria-controls="introduction">33
<div class="row align-items-center">34
<div class="col-auto">1<sup>st</sup> collapsible item</div>35
<div class="col"><span></span></div>36
<div class="col-auto">37
<em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true" data-original-title="Collapse/expand"></em>38
<span class="sr-only">Collapse/expand this item</span>39
</div>40
</div>41
</a>42
<div class="timeline-compendium__content collapse" id="introduction">43
<div class="timeline-type">44
<a data-toggle="collapse" href="#foreword" role="button" aria-expanded="false" aria-controls="foreword">45
<div class="row no-gutters align-items-center">46
<div class="col">47
<div class="timeline-type__header timeline-type__header--title">48
<div class="row align-items-center">49
<div class="col-auto timeline-type__chapter">1</div>50
<div class="col timeline-type__title">First nested collapsible</div>51
<div class="col-auto">52
<em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>53
<span class="sr-only">Collapse/expand this item</span>54
</div>55
</div>56
</div>57
</div>58
</div>59
</a>60
<div class="timeline-type__content collapse" id="foreword">61
<ul class="reports-list">62
<li>63
<a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">64
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">First cool</div>65
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>66
</a>67
</li>68
</ul>69
</div>70
</div>71
</div>72
</section>73
74
<!-- section 2 -->75
<section class="timeline-compendium">76
<a class="btn timeline-compendium__header collapsed" data-toggle="collapse" href="#titleA" role="button" aria-expanded="false" aria-controls="titleA">77
<div class="row align-items-center">78
<div class="col-auto">2<sup>nd</sup></div>79
<div class="col"><span>collapsible item</span></div>80
<div class="col-auto">81
<em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true" data-original-title="Collapse/expand"></em>82
<span class="sr-only">Collapse/expand this item</span>83
</div>84
</div>85
</a>86
<div class="timeline-compendium__content collapse" id="titleA">87
<div class="timeline-type">88
<a class="accordion" data-toggle="collapse" href="#summary" role="button" aria-expanded="false" aria-controls="summary" class="collapsed">89
<div class="row no-gutters align-items-center">90
<div class="col">91
<div class="timeline-type__header timeline-type__header--title">92
<div class="row align-items-center">93
<div class="col-auto timeline-type__chapter">2</div>94
<div class="col timeline-type__title">Second nested collapsible</div>95
<div class="col-auto">96
<em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>97
<span class="sr-only">Collapse/expand this item</span>98
</div>99
</div>100
</div>101
</div>102
</div>103
</a>104
<div class="timeline-type__content collapse" id="summary">105
<ul class="reports-list">106
<li>107
<a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">108
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">Second cool</div>109
</a>110
</li>111
<li>112
<a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">113
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">114
Summary115
</div>116
</a>117
</li>118
</ul>119
</div>120
</div>121
</div>122
</section>123
124
<!-- section 3 -->125
<section class="timeline-compendium">126
<a class="btn timeline-compendium__header collapsed" data-toggle="collapse" href="#titleB" role="button" aria-expanded="false" aria-controls="titleB">127
<div class="row align-items-center">128
<div class="col-auto">3<sup>rd</sup></div>129
<div class="col"><span>collapsible item</span>130
</div>131
<div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em><span class="sr-only">Collapse/expand this item</span></div>132
</div>133
</a>134
135
<div class="timeline-compendium__content collapse" id="titleB">136
<div class="timeline-type">137
<a data-toggle="collapse" href="#chapterB0" role="button" aria-expanded="false" aria-controls="chapterB0" class="collapsed">138
<div class="row no-gutters align-items-center">139
<div class="col">140
<div class="timeline-type__header timeline-type__header--title">141
<div class="row align-items-center">142
<div class="col-auto timeline-type__chapter">3</div>143
<div class="col timeline-type__title">Third nested collapsible</div>144
<div class="col-auto">145
<em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>146
<span class="sr-only">Collapse/expand this item</span>147
</div>148
</div>149
</div>150
</div>151
</div>152
</a>153
<div class="timeline-type__content collapse" id="chapterB0">154
<ul class="reports-list">155
<li>156
<a class="reports-list-item reports-list-item--compendium">157
<div class="col-auto reports-list-item__title reports-list-item__title--nolink">No link</div>158
</a>159
</li>160
<li>161
<a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">162
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">163
Some content with link cool summary164
</div>165
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>166
</a>167
</li>168
<li>169
<a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">170
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">171
Some content with link172
</div>173
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>174
</a>175
</li>176
</ul>177
</div>178
</div>179
<div class="timeline-type">180
<a data-toggle="collapse" href="#chapterB2" role="button" aria-expanded="false" aria-controls="chapterB2" class="collapsed">181
<div class="row no-gutters align-items-center">182
<div class="col">183
<div class="timeline-type__header timeline-type__header--title">184
<div class="row align-items-center">185
<div class="col-auto timeline-type__chapter">4</div>186
<div class="col timeline-type__title">Fourth nested collapsible187
</div>188
<div class="col-auto">189
<em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>190
<span class="sr-only">Collapse/expand this item</span>191
</div>192
</div>193
</div>194
</div>195
</div>196
</a>197
<div class="timeline-type__content collapse" id="chapterB2">198
<ul class="reports-list">199
<li>200
<a class="reports-list-item reports-list-item--compendium">201
<div class="col reports-list-item__title reports-list-item__title--nolink">No link</div>202
</a>203
</li>204
<li>205
<a href="#" class="reports-list-item reports-list-item--compendium">206
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">207
Some content with link208
</div>209
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>210
</a>211
</li>212
</ul>213
</div>214
</div>215
</div>216
</section>217
</div>218
</div>219
</div>Advertisement
Answer
You can get the current item and make all the items to hide first and then display the matched list item like,
JavaScript
1
63
63
1
var i = 0;2
3
$(document).on("click", "#findWord", function(e) {4
let occurrences = [];5
6
//reset i7
i = 0;8
9
const x = document.getElementById("searchedWord").value.replace(/[.*+?^${}()|[]\]/g, '\$&');10
let error = document.querySelector("#message");11
12
if (x == "") {13
error.style.display = "block";14
error.style.color = "red";15
} else {16
error.style.display = "none";17
showWordsFound();18
}19
20
let clickClear = document.querySelector("#clear");21
22
clickClear.addEventListener("click", clear);23
24
function clear() {25
// get the search term from the input26
let clickInput = document.querySelector("#searchedWord");27
clickInput.value = "";28
var spans = $(".reports-list-item__title--compendium > mark");29
spans.each(function() {30
spans.contents().unwrap();31
});32
occurrences.splice(0, occurrences.length);33
// reset our labels34
$(".timeline-compendium__content").collapse("hide");35
$(".timeline-type .timeline-type__content").collapse("hide");36
}37
38
function showWordsFound() {39
// create a regex from our term40
const word = document.getElementById("searchedWord").value;41
const r = new RegExp("(" + word + ")", "ig");42
$(".reports-list-item__title--compendium").each(function(i, el) {43
el.parentNode.parentNode.style.display = "none"44
if ($(this).text().match(r)) {45
// get all the matches46
var matches = $(this).text().match(r);47
$.each(matches, function() {48
// push the index of this section onto the array49
occurrences.push(i);50
51
// // Trying to hide elements that don't contain Summary52
$(this).closest('li').hide();53
54
el.parentNode.parentNode.style.display = "list-item"55
56
});57
$(this).closest(".timeline-compendium__content").collapse("show");58
$(this).closest(".timeline-type .timeline-type__content").collapse("show");59
}60
});61
}62
63
});JavaScript
1
87
87
1
.found {2
background-color: yellow;3
}4
5
#labels {6
margin-left: 15px;7
font-size: 16px;8
}9
10
.timeline-compendium {11
margin-left: 2rem;12
}13
14
.timeline-type__header {15
width: 400px;16
height: 50px;17
background-color: rgb(46, 177, 100);18
display: flex;19
align-items: center;20
justify-content: center;21
color: white;22
border: 1px solid white;23
}24
25
.timeline-type__header:hover {26
color: white;27
background-color: rgb(35, 119, 70);28
}29
30
#tab-content {31
border: 1px solid red;32
}33
34
input[type=text] {35
width: 80%;36
padding: 12px 20px;37
margin: 8px 0;38
box-sizing: border-box;39
}40
41
input#findWord {42
background-color: rgb(248, 211, 3);43
border: none;44
color: black;45
padding: 15px 32px;46
text-align: center;47
text-decoration: none;48
display: inline-block;49
font-size: 16px;50
}51
52
#clear {53
width: 25px;54
height: 25px;55
position: absolute;56
top: 20px;57
right: 150px;58
line-height: 25px;59
font-size: 14px;60
padding-left: 8px;61
font-weight: bold;62
cursor: pointer;63
color: #fff;64
background-color: red;65
border: none;66
border-radius: 50%;67
}68
69
#message {70
display: none;71
font-size: 1em;72
}73
74
#btnNext {75
margin-left: 0.5rem;76
}77
78
mark {79
background-color: yellow !important;80
}81
82
.stickyBar {83
position: sticky;84
top: 0;85
z-index: 1;86
background-color: white;87
}JavaScript
1
219
219
1
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />2
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>3
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>4
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>5
<div class="container">6
<div class="row stickyBar">7
<div class="col-sm-12 mb-2">8
<div id="searchForm" class="d-flex flex-column">9
<label for="searchedWord">10
<ul>11
<li>Search for 'summary' (done)</li>12
<li>open collapsed items that contain it (done)</li>13
<li>hide other elements that don't have the word from input field (ex: No link, some content with link, second cool) </li>14
</ul>15
</label>16
<div class="col-sm-12 p-0 d-flex ">17
<input type="text" id="searchedWord" placeholder="Search..." aria-labelledby="searchedWord" value="summary" class="form-control form-control-lg" />18
<button type="submit" id="findWord" class="btn btn-primary">Search</button>19
<div id="clear" role="button">X</div>20
</div>21
</div>22
</div>23
<div class="col-sm-6 mb-2">24
<div id="labels">25
<small role="alert" id="message" aria-hidden="true">Please enter a word to start searching</small>26
</div>27
</div>28
</div>29
<div class="row">30
<div class="col">31
<section class="timeline-compendium">32
<a class="btn timeline-compendium__header" data-toggle="collapse" href="#introduction" role="button" aria-expanded="true" aria-controls="introduction">33
<div class="row align-items-center">34
<div class="col-auto">1<sup>st</sup> collapsible item</div>35
<div class="col"><span></span></div>36
<div class="col-auto">37
<em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true" data-original-title="Collapse/expand"></em>38
<span class="sr-only">Collapse/expand this item</span>39
</div>40
</div>41
</a>42
<div class="timeline-compendium__content collapse" id="introduction">43
<div class="timeline-type">44
<a data-toggle="collapse" href="#foreword" role="button" aria-expanded="false" aria-controls="foreword">45
<div class="row no-gutters align-items-center">46
<div class="col">47
<div class="timeline-type__header timeline-type__header--title">48
<div class="row align-items-center">49
<div class="col-auto timeline-type__chapter">1</div>50
<div class="col timeline-type__title">First nested collapsible</div>51
<div class="col-auto">52
<em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>53
<span class="sr-only">Collapse/expand this item</span>54
</div>55
</div>56
</div>57
</div>58
</div>59
</a>60
<div class="timeline-type__content collapse" id="foreword">61
<ul class="reports-list">62
<li>63
<a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">64
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">First cool</div>65
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>66
</a>67
</li>68
</ul>69
</div>70
</div>71
</div>72
</section>73
74
<!-- section 2 -->75
<section class="timeline-compendium">76
<a class="btn timeline-compendium__header collapsed" data-toggle="collapse" href="#titleA" role="button" aria-expanded="false" aria-controls="titleA">77
<div class="row align-items-center">78
<div class="col-auto">2<sup>nd</sup></div>79
<div class="col"><span>collapsible item</span></div>80
<div class="col-auto">81
<em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true" data-original-title="Collapse/expand"></em>82
<span class="sr-only">Collapse/expand this item</span>83
</div>84
</div>85
</a>86
<div class="timeline-compendium__content collapse" id="titleA">87
<div class="timeline-type">88
<a class="accordion" data-toggle="collapse" href="#summary" role="button" aria-expanded="false" aria-controls="summary" class="collapsed">89
<div class="row no-gutters align-items-center">90
<div class="col">91
<div class="timeline-type__header timeline-type__header--title">92
<div class="row align-items-center">93
<div class="col-auto timeline-type__chapter">2</div>94
<div class="col timeline-type__title">Second nested collapsible</div>95
<div class="col-auto">96
<em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>97
<span class="sr-only">Collapse/expand this item</span>98
</div>99
</div>100
</div>101
</div>102
</div>103
</a>104
<div class="timeline-type__content collapse" id="summary">105
<ul class="reports-list">106
<li>107
<a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">108
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">Second cool</div>109
</a>110
</li>111
<li>112
<a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">113
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">114
Summary115
</div>116
</a>117
</li>118
</ul>119
</div>120
</div>121
</div>122
</section>123
124
<!-- section 3 -->125
<section class="timeline-compendium">126
<a class="btn timeline-compendium__header collapsed" data-toggle="collapse" href="#titleB" role="button" aria-expanded="false" aria-controls="titleB">127
<div class="row align-items-center">128
<div class="col-auto">3<sup>rd</sup></div>129
<div class="col"><span>collapsible item</span>130
</div>131
<div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em><span class="sr-only">Collapse/expand this item</span></div>132
</div>133
</a>134
135
<div class="timeline-compendium__content collapse" id="titleB">136
<div class="timeline-type">137
<a data-toggle="collapse" href="#chapterB0" role="button" aria-expanded="false" aria-controls="chapterB0" class="collapsed">138
<div class="row no-gutters align-items-center">139
<div class="col">140
<div class="timeline-type__header timeline-type__header--title">141
<div class="row align-items-center">142
<div class="col-auto timeline-type__chapter">3</div>143
<div class="col timeline-type__title">Third nested collapsible</div>144
<div class="col-auto">145
<em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>146
<span class="sr-only">Collapse/expand this item</span>147
</div>148
</div>149
</div>150
</div>151
</div>152
</a>153
<div class="timeline-type__content collapse" id="chapterB0">154
<ul class="reports-list">155
<li>156
<a class="reports-list-item reports-list-item--compendium">157
<div class="col-auto reports-list-item__title reports-list-item__title--nolink">No link</div>158
</a>159
</li>160
<li>161
<a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">162
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">163
Some content with link cool summary164
</div>165
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>166
</a>167
</li>168
<li>169
<a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">170
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">171
Some content with link172
</div>173
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>174
</a>175
</li>176
</ul>177
</div>178
</div>179
<div class="timeline-type">180
<a data-toggle="collapse" href="#chapterB2" role="button" aria-expanded="false" aria-controls="chapterB2" class="collapsed">181
<div class="row no-gutters align-items-center">182
<div class="col">183
<div class="timeline-type__header timeline-type__header--title">184
<div class="row align-items-center">185
<div class="col-auto timeline-type__chapter">4</div>186
<div class="col timeline-type__title">Fourth nested collapsible187
</div>188
<div class="col-auto">189
<em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>190
<span class="sr-only">Collapse/expand this item</span>191
</div>192
</div>193
</div>194
</div>195
</div>196
</a>197
<div class="timeline-type__content collapse" id="chapterB2">198
<ul class="reports-list">199
<li>200
<a class="reports-list-item reports-list-item--compendium">201
<div class="col reports-list-item__title reports-list-item__title--nolink">No link</div>202
</a>203
</li>204
<li>205
<a href="#" class="reports-list-item reports-list-item--compendium">206
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">207
Some content with link208
</div>209
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>210
</a>211
</li>212
</ul>213
</div>214
</div>215
</div>216
</section>217
</div>218
</div>219
</div>This line el.parentNode.parentNode will select the respective <li> ... </li> element.