0





21

Advertisement

I have this piece of html code :

<ul class="tabs">
  <li class="tab"> <a href="#" @click="show('infos')"> Infos </a> </li>
  <li class="tab"> <a href="#" @click="show('modules')"> Modules </a>
</li>

<ul class="content-tabs">
  <li class="tab infos">
    @include('layouts.forms.trainingsForm')
  </li>
  <li class="tab modules">
    modules
  </li>
</ul>

when I click on one of the links it should display the content of

  • in the last by assigning the class "active" to the appropriate
  • . Here is the css part for the li :

    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;
    }
    

    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) .

  • Question author Arakibi | Source

    Advertisement


    0


    It seems that ul.content-tabs li.tab is more detailed than ul.content-tabs li so try setting:

    ul.content-tabs li.tab.active { visibility: visibile !important; }

    Answer author Tomage