css - レスポンシブ UI でタブ構造をアコーディオンに変換する方法

Question

PHP ベースの Web サイトのレスポンシブ UI を設計しようとしていますが、Web サイトにタブ構造があり、さまざまなタブをクリックしながら URL を介して PHP 変数を渡すことで、データを単一のデータ コンテナーにロードします。しかし今、タブベースの構造を低解像度デバイスのアコーディオンに変換する必要があります。可能な方法はありますか？

私のタブ構造のサンプルコードは、

<div id="ddTabs">
<ul id="glowingTabs">
   <li>tab1</li>
   <li>tab2</li>
   <li>tab3</li>
   <li>tab4</li>
</ul>
</div>
<div id="dataContainer">
   Data changes here...
</div>