title: visibility hidden in li
body: <p>I have this piece of html code :</p>
  
  <pre><code>&lt;ul class="tabs"&gt;
    &lt;li class="tab"&gt; &lt;a href="#" @click="show('infos')"&gt; Infos &lt;/a&gt; &lt;/li&gt;
    &lt;li class="tab"&gt; &lt;a href="#" @click="show('modules')"&gt; Modules &lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;ul class="content-tabs"&gt;
    &lt;li class="tab infos"&gt;
      @include('layouts.forms.trainingsForm')
    &lt;/li&gt;
    &lt;li class="tab modules"&gt;
      modules
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>when I click on one of the links it should display the content of <li> in the last  by assigning the class "active" to the appropriate <li> . Here is the css part for the li : </p>
  
  <pre><code>ul.content-tabs {
   border: solid 1px #ececec;
   margin: 7px 0px; 
  }
  
  ul.content-tabs li.tab {
    list-style: none;
    padding: 10px 15px;
    visibility: hidden;
  }
  
  ul.content-tabs li.active {
    visibility: visibile !important;
  }
  </code></pre>
  
  <p>the problem now is that even if the li has the class "active" it won't show up because the "visibility: hidden;" applied to ul.content-tabs li.tab ( after some debugging in the developer tool) .</p>