Toggle elements with same classnames independently with pure js (tags on blog posts)

I have this jquery that I want to find a pure JS solution for – when pressing a button, it toggles the tags on blog each posts independently:

 $('.tags').hide();
    $('.toggle-tags').click(function(event) {
        $(this).closest('.info').find('.tags').slideToggle(400)
    });

Ideally I want to achieve what I’ve got from the following js I use for a nav-menu. I’m aware that I’ll need to use querySelectorAll() instead, but also loop it through the elements, right?

var tagswrap = document.getElementById("tags");
var height = tagswrap.clientHeight;
tagswrap.style.height = 0;

function toggleClass(tagswrap, height) {
    tagswrap.style.height = height + "px";
    var tagswrap = document.getElementById("tags");
    var className = "active";
    if (!tagswrap || !className) {
        return;
    }
    var classString = tagswrap.className,
        nameIndex = classString.indexOf(className);
    if (nameIndex == -1) {
        classString += " " + className;
    } else {
        classString = classString.substr(0, nameIndex) + classString.substr(nameIndex + className.length);
        tagswrap.style.height = 0;
    }
    tagswrap.className = classString;
}
var buttonTags = document.getElementById("toggle-tags");
buttonTags.onclick = function () {
    toggleClass(tagswrap, height);
};

the structure of each blog post:

<article>
.. blog text here ..
  
<div class="info">
  <div class="info-content">
    <div class="right">
      <div class="toggle-tags">show tags</div>
    </div>
    
  </div>
  
  <div class="tags">
    <a href="#">text</a>
    <a href="#">quote</a>
    <a href="#">testing</a>
  </div>
  
</div>
  
</article>

I’m still too new to js know how to implement this. Any pointers or suggestions would be great.