javascript - CSS または JS を使用した電話での自動折りたたみ/アコーディオン

Question

私はこの回答を読みましたが、 navbar オプションは私の問題に合わないようです。

私は Twitter ブートストラップ 2.3.1 を使用
しています。私の Web サイトにはよくある質問の部分があります。質問と回答が多すぎます。

だから私はこれが必要です:
電話では: タイトルのみが表示され、テキストは折りたたまれます. アイコンをクリックすると、テキストが表示されます。
タブレット/デスクトップ: タイトルと全文が表示されます。

私はそのようなコードスニペットを持っています:

<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 ソリューションが必要です。

もう 1 つのオプションは、このコードを複製し、そのうち<div class="hidden-phone">の 1 つを折りたたみなしで内部に配置し、もう 1 つを折りたたんだ状態で内部に配置すること<div class="visible-phone">です。しかし、それは良い解決策ではないようです。

また、他に Twitter のブートストラップ オプションがあればお勧めいただければ幸いです。

（タイトルの折り畳み・非折り畳みができることを矢印などでわかるようにしていただけるとなお良いです）