使用CSS或JS在手机上自动折叠/手风琴

Question

我看了this answer，但导航栏选项似乎不适合我的问题。

我使用Twitter bootstrap 2.3.1
我的网站上有一个常见问题部分。它有太多的问题和答案。

所以我需要这个：
在手机中：只会显示标题，文字会折叠。单击图标后可以看到文本 在平板电脑/桌面：标题和全文将会显示。

我有这样的代码段：

<div class="accordion" id="accordion2">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" 
                       data-parent="#accordion2" href="#faq">
                Frequently Asked Questions
            </a>
        </div>
        <div id="faq" class="accordion-body collapse">
            <div class="accordion-inner">
                <h4>What is what ?</h4>
            <ul>
                   <li>Question 1: Do this do that
                   <li>Question 2: Do this do that
                   <li>Question 2: Do this do that
            </ul>

            </div>
        </div>
    </div>
</div>

此代码提供折叠输出。当然可以通过$(".collapse").collapse()崩溃但我需要一个CSS解决方案。

另一种选择是复制此代码并将其中一个放入<div class="hidden-phone">而不会崩溃，而其他一个放在<div class="visible-phone">内并折叠。但它似乎不是一个好的解决方案。

如果你能推荐另一个Twitter bootstrap选项，我也很高兴。

（如果用户可以看到箭头等以了解标题可以折叠/未折叠，那也会更好）