I have a div/button under each blog post-text to toggle the display of the tags/categories it is filled under. My understanding of JS is very limited. These two pieces of js is what I have but both gives the same result: clicking any of the toggle-buttons on any blog post only displays the first blog posts' tags. (this is on Tumblr btw)
//------ first option
var toggleTags = document.querySelectorAll(".toggle-tags");
for (var i = 0; i < toggleTags.length; i++) {
toggleTags[i].addEventListener("click", showTags);
}
function showTags(e) {
for (var i = 0; i < toggleTags.length; i++) {
var activateTags = document.querySelector(".tags");
activateTags.classList.toggle("tags-active");
}
}
//------ or this one
const tagButtons = document.querySelectorAll(".toggle-tags");
for (const button of tagButtons) {
button.addEventListener("click", function () {
const activateTags = document.querySelector(".tags");
activateTags.classList.toggle("tags-active");
});
}
Given my lack of knowledge, I couldn't find an answer on here that I could apply myself, so I'm coming up short and I've absolutely no idea how to fix this myself. .tags is set to display:none; and .tags-active set to display:block!important;
This is the structure of each blog post in case that's of any use:
<article class="post">
<div class="post-content text">
post body
</div>
<div class="info">
<div class="info-content">
<div class="right">
<div class="toggle-tags">toggle tags</div>
</div>
</div>
<div class="tags">
<a href="#">text</a>
<a href="#">quotes</a>
</div>
</div>
</article>
The issue in your code is that const activateTags = document.querySelector(".tags"); will select the first element with the class .tags. So you are toggling the class only on that one. You need to iterate through them accordingly as you do with your buttons. Check the snippet.
const tagButtons = document.querySelectorAll(".toggle-tags");
const activateTags = document.querySelectorAll(".tags");
tagButtons.forEach((button, index) => {
button.addEventListener("click", () => {
activateTags[index].classList.toggle("tags-active");
});
});.tags{
display:none
}
.tags-active{
display:block!important;
} <article class="post">
<div class="post-content text">
post 1
</div>
<div class="info">
<div class="info-content">
<div class="right">
<div class="toggle-tags">toggle tags</div>
</div>
</div>
<div class="tags">
<a href="#">text</a>
<a href="#">quotes</a>
</div>
</div>
</article>
<article class="post">
<div class="post-content text">
post 2
</div>
<div class="info">
<div class="info-content">
<div class="right">
<div class="toggle-tags">toggle tags</div>
</div>
</div>
<div class="tags">
<a href="#">text</a>
<a href="#">quotes</a>
</div>
</div>
</article>
<article class="post">
<div class="post-content text">
post 3
</div>
<div class="info">
<div class="info-content">
<div class="right">
<div class="toggle-tags">toggle tags</div>
</div>
</div>
<div class="tags">
<a href="#">text</a>
<a href="#">quotes</a>
</div>
</div>
</article>I select all the activetags using querySelectorAll and choose the appropriate one to the clicked button using index.