css - 如何在响应式 UI 中将选项卡结构转换为手风琴

Question

我正在尝试为基于 php 的网站设计响应式 ui，现在网站中有一个选项卡结构，它通过在单击不同选项卡时通过 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>