Toggle visibility - hide / reset when a button is pressed

Question

How it works

I currently have a list with Isotope that shows all message categories. When a category is clicked, all messages in that category are displayed. This is working correctly. Please see the page if this is difficult to understand .

<ul id="filters-undercat" class="luft underkategori">
     <li class="smoothtrans"><a href="#" data-filter="*" class="selected smoothtrans">Alle</a></li>
     <li class="smoothtrans"><a href='#' data-filter='.familiepakker' class="smoothtrans">Familiepakker</a></li>
     <li class="smoothtrans"><a href='#' data-filter='.markfyrverkeri' class="smoothtrans">Markfyrverkeri</a></li>
</ul>

Show text in each category

I also want the text representing each category to be shown. This means that when a category is clicked, another div containing the text is displayed. This works partially. I did it usingonclick="toggle_visibility

Js

function toggle_visibility(id) {
   var e = document.getElementById(id);
     if(e.style.display == 'none')
        e.style.display = 'block';
     else
        e.style.display = 'none';         
}

HTML

<ul id="filters-undercat" class="luft underkategori">
         <li class="smoothtrans"><a href="#" data-filter="*" class="selected smoothtrans">Alle</a></li>
         <li class="smoothtrans"><a href='#' data-filter='.familiepakker' class="smoothtrans" onclick="toggle_visibility('familiepakker')">Familiepakker</a></li>
         <li class="smoothtrans"><a href='#' data-filter='.markfyrverkeri' class="smoothtrans" onclick="toggle_visibility('markfyrverkeri')">Markfyrverkeri</a></li>
</ul>

The text to be displayed in each category:

<div id="pakketekstholder">
        <div id="familiepakker" style="display:none;">Tekst om familie</div>
        <div id="markfyrverkeri" style="display:none;">Tekst om mark</div>
</div>

Problem

The problem is that the second category is pressed, it also displays the text of the first category. Etc.

, ,

, , reset , div.

?

Answer 1

, "category". :

function toggle_visibility(id) {
   var all = document.getElementsByClassName('category');
   for(var i = 0; i < all.length; i++)
      all[i].style.display = (all[i].id == id && all[i].style.display == 'none')
         ? 'block' : 'none';
}

Fiddle

Answer 2

data-* , div.

data-filter='.familiepakker' class="familiepakker", .

$(function() {
  $('#filters-undercat li a').on('click', function(e) {
    e.preventDefault();
    $('#pakketekstholder > div').not($(this).data('filter')).hide(); //Hide All divs
    $($(this).data('filter')).toggle(); //Toggle to indent container
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="filters-undercat" class="luft underkategori">
  <li class="smoothtrans"><a href="#" data-filter="*" class="selected smoothtrans">Alle</a>
  </li>
  <li class="smoothtrans"><a href='#' data-filter='.familiepakker' class="smoothtrans">Familiepakker</a>
  </li>
  <li class="smoothtrans"><a href='#' data-filter='.markfyrverkeri' class="smoothtrans">Markfyrverkeri</a>
  </li>
</ul>

<div id="pakketekstholder">
  <div class="familiepakker" style="display:none;">Tekst om familie</div>
  <div class="markfyrverkeri" style="display:none;">Tekst om mark</div>
</div>