CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
iori
iori

Reputation: 3506

How to make accordion not expand by default?

How to make accordion not expand as default ? Expand it when a user click on it.

Then, after it's expand, I want to switch the header from "Show" to "Hide".

Here is what I got so far.

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>

Upvotes: 0

Views: 1602

Answers (3)

Carol Skelly
Carol Skelly

Reputation: 362760

The collapse is hidden by default but your jquery is making it show when the screen is > 768px..

You can use this code to toggle the Hide/Show text..

$('#collapseOne').on('hidden', function () {

  $('.accordion-toggle').text('Show');

});

$('#collapseOne').on('shown', function () {

  $('.accordion-toggle').text('Hide');

})

http://bootply.com/J5cGefBKE7

Upvotes: 1

benomatis
benomatis

Reputation: 5643

To have the accordion collapsed by default, use the in class on it.

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

To change the text with which you can open / close it, simply add an event listener of shown and hidden and update the text according to which one is happening at the moment.

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

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

Here is your updated Fiddle: http://jsfiddle.net/z2tNg/49/

Upvotes: 1

Prem Anand
Prem Anand

Reputation: 1496

The collapse class will drop the Accordion by Default.

I have removed it here in this 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">
            <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>

Upvotes: 0

Related Questions