Bootstrap's hidden minimization method will show the collapse element

Question

Here is a simple example: Link

• click resize button making box div bigger
• press the button again, returning it to its normal size. However, you will see a collapse element that should not be displayed.

I assume this is related to this line:

 $("div.inbox").collapse("hide"); 

The purpose of this line: if users clicked on the a tag to show the merge element, when they squeeze the box div , the collapse element will be hidden.

It is strange that the problem only occurs when you first press the resize button. I have no idea why this is happening.

Answer 1

When you call the collapse plugin on an element, if it has not been initialized, the initialization process is initiated (see the file collapse.js ).

By default, the init process switches elements (shows it if it is hidden, and hides it if it is visible) - equivalent to .collapse('toggle') .

First you need to initialize the reset item by disabling the toggle-on-init parameter (see getbootstrap.com doc ):

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

See an example on the updated violin

Answer 2

It appears that crash () is triggered for the first time using "show" no matter what. A simple solution is to check if the .inbox is displayed, and if it does, to minimize the crash (“hide”). We can get the state of an element by checking if the class "in" -.collapse = element hidden, .collapse.in = element is shown

 $("button.resize").click(function(){ var isExpanded = !$("div.box").hasClass("expanded"); $("div.box").toggleClass("expanded", isExpanded); if ($("div.inbox").hasClass("in")) { $("div.inbox").collapse('hide'); } }); 

Answer 3

In my scenario, I want to switch after the initial hide. So I ended up using this:

 $thingToCollapse.collapse({ 'toggle': false }).collapse('hide'); 

Answer 4

Having tried many volumes, I ended up with:

From the source https://getbootstrap.com/docs/3.3/javascript/ .collapse hides the content .collapsing is applied during transitions .collapse.in shows the content

// hide

 if ($('#div').hasClass("in")) {$(#div).removeClass('in');} 

// Show

 $('#div').addClass('in'); 

It works for me!

Answer 5

$ ("DIV") collapse ("show"). $ ("DIV") collapse ("hide") ;.