How to bind list item to div element javascript
I am trying to create vertical tabs, but the list items need to be connected to divs separately. All divs are hidden with display: none; and when someone clicks on tab2 for example, the second div should be turned to display: block. In other words, className "selected" will be added to this particular div. The following error occurred in console.log. Cannot read null property "classList" in HTMLUListElement.). Anyone who knows how to write JavaScript, which is why the list items are linked to a div.
Just plain JavaScript, please.
document.getElementById("verticalUl").addEventListener("click", function(e) {
var e = e || window.event,
elements = document.getElementById("verticalUl").children,
content = document.querySelectorAll(".support-box");
if(e.target && e.target.nodeName == "LI") {
var attribute = e.target.getAttribute("id");
for(var i = 0; i < elements.length; i++) {
elements[i].classList.remove("active-support");
}
for (var i = 0; i < content.length; i++) {
content[i].classList.remove("selected");
};
document.querySelector("." + attribute + "-box").classList.add("selected");
e.target.classList.add("active-support");
}
});
.group {
display: none;
}
.selected {
display: block;
}
.vertical-navbar {
float: left;
width: 20%;
}
.vertical-navbar li {
list-style-type: none;
border: 1px solid red;
margin: 5px;
}
.support-box {
width: 60%;
float: right;
height: 300px;
border: 1px solid red;
}
<ul class="vertical-navbar" id="verticalUl">
<li id="tab1" class="support-tabs-label active-support">Hot Topics</li>
<li id="tab2" class="support-tabs-label">Account</li>
<li id="tab3" class="support-tabs-label">Product</li>
<li id="tab4" class="support-tabs-label">Order and Shipping</li>
</ul>
<div class="content-support1 support-box tab1-box group selected">
Hot Topics
</div>
<div class="content-support2 support-box tab2-box group">
Account
</div>
<div class="content-support3 support-box tab3-box group">
Product
</div>
<div class="content-support4 support-box tab4-box group">
Order and Shipping
</div>
Assuming that all elements support-box
have tabx-box
where tabx
matches the selected element li
, you can simply use:
document.querySelector("." + attribute + "-box").classList.add("selected");
Decision
document.getElementById("verticalUl").addEventListener("click", function(e) {
var e = e || window.event,
elements = document.getElementById("verticalUl").children,
content = document.querySelectorAll(".support-box");
for (var i = 0; i < content.length; i++) {
content[i].classList.remove("selected");
}
if (e.target && e.target.nodeName == "LI") {
var attribute = e.target.getAttribute("id");
for (var i = 0; i < elements.length; i++) {
elements[i].classList.remove("active-support");
}
e.target.classList.add("active-support");
document.querySelector("." + attribute + "-box").classList.add("selected");
}
});
source to share