[SOLVED] How to start page with html list expanded?

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>