Auto Collapse/accordion on phones with CSS or JS

问题

I read this answer, but navbar option doesn't seem to fit my problem.

I use Twitter bootstrap 2.3.1
I have a Frequently Asked Questions part in my website. It has too many question and answers.

So I need this:
In phones: Only title will be shown, text is collapsed. Text is visible after clicking an icon.
In tablet/desktop: Title and full text will be visible.

I have such code snippet:

<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>

This code gives collapsed output. Of course it is possible to collapse via $(".collapse").collapse() But I need a CSS solution.

Another option is to duplicate this code and put one of them inside <div class="hidden-phone"> without collapse and other one inside <div class="visible-phone"> with collapsed. But it doesn't seem a good solution.

I would be happy also if you can recommend another Twitter bootstrap option if there exists.

(It would be better also if user can see an arrow etc. to understand that the title can be collapsed/uncollapsed)

来源：https://stackoverflow.com/questions/15648067/auto-collapse-accordion-on-phones-with-css-or-js

标签

javascript

css

html5

twitter-bootstrap

collapse