The hide method of Bootstrap collapse will show the collapse element

Question

Here is a simple example: Link - click the resize button, making the `box div` bigger - click the button again, making it back to normal size. However, you will see the collapse element which should not be displayed. I guess it's due to this line: ``` $("div.inbox").collapse("hide"); ``` The purpose of this line is: if users clicked the `a` tag to show the collapse element, when they shrink the `box div`, the collapse element will be hidden. The weird thing is the problem only happens at the first time of clicking `resize` button. I have no idea about why it happens.

Accepted Answer

When you call the collapse plugin on an element, if it has not been initialized, the init process is triggered (see collapse.js source).

By default, the init process toggles the elements (showing it if it is hidden, and hiding it if it is visible) - equivalent to `.collapse('toggle')`.

You'd need to initialize the collapsible element first, disabling the toggle-on-init parameter (see getbootstrap.com doc):

```
$("div.inbox").collapse({toggle: false});
```

See example on your updated fiddle

The hide method of Bootstrap collapse will show the collapse element

Solution

Problem