In Bootstrap, I want to set a height when it collapses. Normally I want to keep the collapsible area shown using .collapse.in class. So when it collapses it won't set height to zero.

Before collapse:

After collapse:

In Bootstrap, I want to set a height when it collapses. Normally I want to keep the collapsible area shown using .collapse.in class. So when it collapses it won't set height to zero.

Before collapse:

After collapse:

• javascript
• jquery
• css
• twitter-bootstrap-3

Share Improve this question Follow edited May 21, 2018 at 19:00 isapir 23.7k1616 gold badges125125 silver badges121121 bronze badges asked Dec 5, 2014 at 18:09 Golak Chandra SatiarGolak Chandra Satiar 15344 silver badges1414 bronze badges 3

• So you want the box to show nothing inside of it, ie, a flat horizontal line? Also please add your CSS so we can see what your doing. – JustGage Commented Dec 5, 2014 at 18:15
• It should get some height when it will collapse(small box). I think bootstrap collapse methods ".collapse('show')" can solve this issue. But I don't know how to do that. – Golak Chandra Satiar Commented Dec 5, 2014 at 18:30
• See this example: jsfiddle/Flocktome/R6EAW/10 I actually want to set a height rather that its height 0. – Golak Chandra Satiar Commented Dec 5, 2014 at 18:51

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

UPDATE:

http://jsfiddle/R6EAW/1158/

CSS:

#collapseOne{
    min-height:60px
}

JQ:

$('#accordion').on('hidden.bs.collapse', function () {
    $('#collapseOne').removeClass('collapse').css({        
        'overflow': 'hidden',
        'height': '60px'
    })
})

Since I need this on multiple elements, I took @dm4web's answer above and created a more generic function that iterates over the elements that have the .collapse class and a specified min-height and applies the logic to all of them.

HTML Example:

<!-- start fully shown, collapse down to 120px !-->
<div id="div1" class="collapse in" style="min-height: 120px;"> ... </div>

<!-- start collapsed at 6em !-->
<div id="div2" class="collapse in collapsed" style="min-height: 6em;"> ... </div>

Javascript code:

$(".collapse")
    .filter(function(ix,el){
        // return only the ones with min-height
        return $(el).css("min-height");
    })
    .each(function(ix, el){

        var  $el = $(el)
            // remember the original min-height
            ,minHeight = $el.css("min-height");

        $el.on("hidden.bs.collapse", function(){

            $el.removeClass("collapse")
                .css({
                     "overflow": "hidden"
                    ,"height": minHeight
                })
        });

        // collapse element on load if it has the class .collapsed 
        if ($el.hasClass("collapsed"))
            $el.collapse();
    });

Here is, without JS, the example was written on SCSS

.collapse{
    display:     block;
    visibility:  visible;
    overflow:    hidden;
    min-height:  60px; // whatever you want here
    height:      0; // if you want it to start collapsed, you need this, else remove this

    &.in{
      height: auto;
    }
  }