没有js或jQuery的HTML手风琴

Question

我会在使用手风琴时需要帮助。我只想使用HTML创建手风琴。没有jQuery的JavaScript。我想知道如何使它工作。任何形式的帮助将不胜感激。

在下面的代码中，默认情况下，我只希望显示表头并单击复选框，我希望填充下面的行。任何关于如何使用HTML来完成的指针。

<table border="1"> 
     <tr> 
     <th><input name="checkbox" type="checkbox" id="selectall"/></th> 
     <th>Multiple Rows </th> 
     <th>Ratings</th> 
     </tr> 
     <tr> 
     <td align="center"><input type="checkbox" class="case" name="case" value="1"/></td> 
     <td>First Check </td> 
     <td>1</td> 
     </tr> 
     <tr> 
     <td align="center"><input type="checkbox" class="case" name="case" value="2"/></td> 
     <td>Second Check </td> 
     <td>2</td> 
     </tr> 
     <tr> 
</table> 

非常感谢

Answer 1

的方式，是可用在触摸屏上会滥用CSS来做到这一点的唯一方法。你会寻找一个“纯CSS手风琴菜单”

例子

codrops codecanyon designshack

他们的背后是使用一个隐藏输入按钮（无线电或复选框）和拨动想法基于其状态的样式。

一般来说 - 不要这样做。它整洁，但它几乎是一个黑客。