Collapse Collapse - JQuery Collapse All

Question

I am writing a personal feed reader application using Bootstrap on the frontend, and wanted to add a Minimize / Maximize button.

This is my first JavaScript / JQuery code, so I don't know how to debug it other than printing variables in the Firefox Developer Console.

My page structure consists of panels. The user can expand or collapse the panel by clicking on the panel title. And a button to collapse or expand all panels.

My solution works most of the time, but I noticed one strange behavior. This is how I reproduce the problem:

• Open the page for the first time
• Expand one panel by clicking its title.
• Now the Collapse All button minimizes the open panel and expands the rest. It’s as if he is “switching” all the panels, rather than closing them.
• After this odd behavior, everything is fine, I can not reproduce the problem without refreshing the page. At each step, the variable open_panel_count looks fine.

Here are the methods I use:

 $(function() { open_panel_count = 0; function update_toggle_button() { $('#toggle-btn').text((open_panel_count ? "Collapse" : "Expand") + " All") } update_toggle_button(); // Run once on page load to text #toggle-btn $('#toggle-btn').click(function() { $('.panel-collapse').collapse(open_panel_count ? 'hide' : 'show'); }); $('.panel-collapse').on('shown.bs.collapse', function () { open_panel_count++; update_toggle_button(); }); $('.panel-collapse').on('hidden.bs.collapse', function () { open_panel_count--; update_toggle_button(); }); }); 

Can someone tell me what I am doing wrong?

You can see the whole template at: https://github.com/utdemir/furby/blob/master/template.erb And get access to the demo version: http://p.cogunluklazararsiz.org/furby/

Answer 1

According to the Twitter Bootstrap documentation, you can “activate your content as a folding element” by doing:

 $('.panel-collapse').collapse({ toggle: false }); 

Adding this should solve your problem. Let him go.

 $(function() { $('.panel-collapse').collapse({ toggle: false }); ... 

http://getbootstrap.com/javascript/#collapse

I don’t know why JS twitter isn’t collecting your data-target="#entry419294611" data-toggle="collapse" . Hard debug without violin.

Answer 2

 $('.panel-collapse').collapse('hide'); 

Bootstrap / jQuery Collapse

Answer 3

Try to change

  $('#toggle-btn').click(function() { $('.panel-collapse').collapse(open_panel_count ? 'hide' : 'show'); }); 

For

  $('#toggle-btn').click(function() { var state = open_panel_count ? 'hide' : 'show'; $('.panel-collapse').collapse(state); });