沒有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

他們的背後是使用一個隱藏輸入按鈕（無線電或複選框）和撥動想法基於其狀態的樣式。

一般來說 - 不要這樣做。它整潔，但它幾乎是一個黑客。