I have a function that I created in Codepen. It does what I want, where the div that you select gets a blue border and changes its text. But I would like to know if there is any way to make the JavaScript that actually makes this work more compact/efficient.
JavaScript
function toggle(el) {
const contentReference = document.querySelectorAll('.content');
for (div of contentReference) { div.className = 'content'; }
el.className = 'content selected';
const selectedContentReference = document.querySelectorAll('.selectedContent');
for (div of selectedContentReference) {
if (div.parentNode.className == 'content') {
div.className = 'selectedContent contentThatShouldBeHidden';
}
else if (div.parentNode.className == 'content selected') {
div.className = 'selectedContent';
}
}
const notselectedContentReference = document.querySelectorAll('.notselectedContent');
for (div of notselectedContentReference) {
if (div.parentNode.className == 'content') {
div.className = 'notselectedContent';
}
else if (div.parentNode.className == 'content selected') {
div.className = 'notselectedContent contentThatShouldBeHidden';
}
}
}
const selectedContentReference = document.querySelectorAll('.selectedContent');
for (div of selectedContentReference) {
if (div.parentNode.className == 'content') {
div.className = 'selectedContent contentThatShouldBeHidden';
}
else if (div.parentNode.className == 'content selected') {
div.className = 'selectedContent';
}
}
const notselectedContentReference = document.querySelectorAll('.notselectedContent');
for (div of notselectedContentReference) {
if (div.parentNode.className == 'content') {
div.className = 'notselectedContent';
}
else if (div.parentNode.className == 'content selected') {
div.className = 'notselectedContent contentThatShouldBeHidden';
}
}
```