文、前端小編
剛接觸CSS的你，對於Javascript還尚未有深刻的認識，要怎麼做出下面如圖所示的手風琴效果呢？
這個使用範圍相當廣又簡單方便的效果：手風琴效果，一般網站可以用在選單、產品分類，或是新聞公告…等等，就看網站開發者要怎麼運用。現在就跟著我們一步一步來完成吧！
要達成不用JS來完成這個效果，我們要使用label可以點選控制input[type=radio]這項特性，並且要注意label要對應到相對的input[type=radio]的id。
設定簡單的CSS，基本的CSS reset，body的背景有點顏色，這樣看得比較清楚。
接下來稍微將label做的比較像按鈕的樣子。
然後在每一個input[type=radio]後面新增一塊div，class命名為content，並且設定CSS。
再來，我們要使用這次重要的偽元素【:checked】與選擇器【+】。【:checked】的功能為判定目前checkbox或radio是否有被選取，而【+】的功能是選擇緊鄰在後的下一個元素。
下面範例的意思就是: 被選取的input[type=radio]的下一個 .content 背景變成橘色。
如果理解了上面偽元素與選擇器的功能，那我們就可以回來繼續做我們的手風琴！把 .content 元素的CSS再加點東西: 高度為0(height)、超出範圍要隱藏(overflow)，另外加點轉場(transition)讓點選按鈕的動作不會那麼卡；再來讓被選取的radio後面 .content 的高度為100px。
最後再將input[type=radio]隱藏起來就大功告成了！
這個簡單的效果提供給大家，在還沒有踏入Javascript的大門之前，就先使用吧，相信這些對於CSS初學者的你一定會有幫助的！