How to create an accordion menu in HTML without jQuery

Question

How can I make an accordion in plain HTML?

- <table border="1">
       <tr>
         <th><input name="checkbox" type="checkbox" id="selectall"/></th>
         <th>Multipal Row </th>
         <th>Rating</th>
       </tr>
       <tr>
         <td align="center"><input type="checkbox" class="case" name="case" value="1"/></td>
         <td>First Chek </td>
         <td>1</td>
       </tr>
       <tr>
         <td align="center"><input type="checkbox" class="case" name="case" value="13"/></td>
         <td>Thirty Chek </td>
         <td>13</td>
       </tr>   </table>

Answer 1

You could always use the plain HTML5 details element. Here's a minimal example with just HTML:

<details>
  <summary>This is the title of the details tag</summary>
  <p>Here's a paragraph inside a details element</p>
  Here's some text after the paragraph
</details>

Here's another example with CSS:

details {
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: .75em .75em 0;
}

summary {
    font-weight: bold;
    margin: -.75em -.75em 0;
    padding: .75em;
    background-color: steelblue;
    color: white;
}

details[open] {
    padding: .75em;
}

details[open] summary {
    border-bottom: 1px solid #aaa;
    margin-bottom: .75em;
}

<details>
    <summary>Details</summary>
    Something that's hidden by default.
</details>