htmlcsshtml-lists

How to start page with html list expanded?


I have the following code which produces a collapsible list:

.collapsibleList li > input + * {
 display: none;
}
.collapsibleList li > input:checked + * {
 display: block;
}
.collapsibleList li > input {
 display: none;
}
.collapsibleList label {
 cursor: pointer;
}

I would like to start the page with this list expanded. What I tried to do is:

<body>
<ul class="collapsibleList">
  <li>
    <label for="mylist-node9">
        <b>TypeOne</b>
    </label>
    <input type="checkbox" id="mylist-node9" />
    <ul style="list-style-type:disc">
      <li> 
        tst
      </li>
    </ul>
  </li>
</ul>
</body>

But the above shows the list collapsed. How can I make it start expanded?


Solution

  • simply add a add a checked attribute

    .collapsibleList li > input[type="checkbox"] ,
    .collapsibleList li > input[type="checkbox"]:not(:checked) + * {
      display : none;
      }
    .collapsibleList label {
      cursor : pointer;
      }
    <ul class="collapsibleList">
      <li>
        <label for="mylist-node9">
            <b>TypeOne</b>
        </label>
        <input type="checkbox" id="mylist-node9" checked /> <!-- add checked attribute -->
        <ul style="list-style-type:disc">
          <li>
            tst
          </li>
        </ul>
      </li>
    </ul>

    Also (css3)

    ul 
      {
      list-style : disc;
      }
    .collapsibleList label 
      {
      font-weight : bold;
      cursor      : pointer;
      
      & input[type="checkbox"] ,  
      &:has( input[type="checkbox"]:not(:checked) ) + * 
        {
        display : none; 
        } 
      }
    <ul class="collapsibleList">
      <li>
        <label>
          TypeOne 
          <input type="checkbox" checked /> 
        </label>
        <ul>
          <li>
            tst
          </li>
        </ul>
      </li>
    </ul>