Html Question posted in
Some basic documentation can be found here.

How to start page with html list expanded?

I have the following code which produces a collapsible list:

<html>
<head>
<style>
.collapsibleList li > input + * {
 display: none;
}
.collapsibleList li > input:checked + * {
 display: block;
}
.collapsibleList li > input {
 display: none;
}
.collapsibleList label {
 cursor: pointer;
}
</style>
</head>
<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>
</html>

I would like to start the page with this list expanded. But I can’t figure out how..

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    Just add checked attribute in your input as below

    .collapsibleList li > input + * {
 display: none;
}
.collapsibleList li > input:checked + * {
 display: block;
}
.collapsibleList li > input {
 display: none;
}
.collapsibleList label {
 cursor: pointer;
}
    <body>
<ul class="collapsibleList">
  <li>
    <label for="mylist-node9">
        <b>TypeOne</b>
    </label>
    <input type="checkbox" checked id="mylist-node9" />
    <ul style="list-style-type:disc">
      <li> 
        tst
      </li>
    </ul>
  </li>
</ul>
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search