javascript - 如何让 Accordion 默认不展开？

Question

如何让 Accordion 默认不展开？当用户点击它时展开它。

然后，展开后，我想将标题从“显示”切换为“隐藏”。

这是我到目前为止得到的结果。

FIDDLE

HTML

<div class="accordion" id="accordion1">
    <div class="accordion-group">
        <div class="accordion-heading">

            <a class="accordion-toggle" data-toggle="collapse" href="#collapseOne">
                Show
            </a>
        </div>
        <div id="collapseOne" class="accordion-body collapse">
            <div class="accordion-inner">
                    In software, a stack overflow occurs when the stack pointer exceeds the stack bound. The call stack may consist of a limited amount of address space, often determined at the start of the program. The size of the call stack depends on many factors, including the programming language, machine architecture, multi-threading, and amount of available memory. When a program attempts to use more space than is available on the call stack (that is, when it attempts to access memory beyond the call stack's bounds, which is essentially a buffer overflow), the stack is said to overflow, typically resulting in a program crash.
                </div>
            </div>
        </div>
    </div>

JS

    <script type="text/javascript">

            $(function(){
    $(window).resize(function() {    // Optional: if you want to detect when the window is resized;
        processBodies($(window).width());
    });
    function processBodies(width) {
        if(width > 768) {
            $('.accordion-body').collapse('show');
        }
        else {
            $('.accordion-body').collapse('hide');
        }
    }
    processBodies($(window).width());
});




    </script>

Answer 1

要默认折叠 Accordion ，请在其上使用 in 类。

<div id="collapseOne" class="accordion-body collapse in">
    <!-- ... here it is .............................^^ -->
</div>

要更改可以打开/关闭它的文本，只需添加 shown 和 hidden 的事件监听器，并根据发生的事件更新文本此刻。

$(document).ready(function(){    
    $('#collapseOne').on('shown', function () {
       $("#showHide").text("Hide");
    });

    $('#collapseOne').on('hidden', function () {
       $("#showHide").text("Show");
    });
});

这是您更新的 Fiddle:http://jsfiddle.net/z2tNg/49/