Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Collapse Box

See original GitHub issue

Hi,

I changed the app.js to allow the user to collapse a box when he clicks on .box-header :

Add the function (around line 580) :

collapseHeader: function (element) {
      var _this = this;
      //Find the box parent
      var box = element.parents(".box").first();
      //Find the body and the footer
      var box_content = box.find("> .box-body, > .box-footer");
      if (!box.hasClass("collapsed-box")) {
        //Convert minus into plus
        box.children(".box-header").children(".box-tools").children(_this.selectors.collapse).children(":first")
                .removeClass(_this.icons.collapse)
                .addClass(_this.icons.open);
        //Hide the content
        box_content.slideUp(300, function () {
          box.addClass("collapsed-box");
        });
      } else {
        //Convert plus into minus
        box.children(".box-header").children(".box-tools").children(_this.selectors.collapse).children(":first")
                .removeClass(_this.icons.open)
                .addClass(_this.icons.collapse);
        //Show the content
        box_content.slideDown(300, function () {
          box.removeClass("collapsed-box");
        });
      }
    },

And the config (around line 90) :

collapseHeader: '[data-widget="collapse-header"]'

And finaly use data-widget="collapse-header" on the box-header :

<div class="box">
            <div class="box-header" data-widget="collapse-header">
                <h3 class="box-title">Your Title</h3>
                <div class="box-tools pull-right">
                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                </div>
            </div><!-- /.box-header -->
            <div class="box-body">
            </div><!-- /.box-body -->
        </div><!-- /.box -->

Can you add this functionality in the template (I think it needs to be rewrite 😄) ?

Issue Analytics

State:
Created 8 years ago
Comments:10 (1 by maintainers)

Top GitHub Comments

1reaction

nullpointer8086commented, Apr 19, 2017

You need to modify the app.js further with the following around line 568… below

//Listen for collapseHeader event triggers
$(_box).on('click', _this.selectors.collapseHeader, function (e) {
      	e.preventDefault();
      	_this.collapseHeader($(this));
      });

0reactions

lenamtlcommented, Mar 13, 2018

Can anyone provide a working JS copy with this feature, as around line x mentioned is not enough clear …

Top Results From Across the Web

Collapse - Bootstrap

Toggle the visibility of content across your project with a few classes and our JavaScript plugins.

Collapsible Box - Amazon.com

Amazon Basics Collapsible Fabric Storage Cubes Organizer with Handles, 10.5"x10. · SHIMOYAMA Small Storage Crate, 12L Collapsible Open Storage Bin, 2 Pack, ...

Bootstrap Collapse - W3Schools

The .collapse class indicates a collapsible element (a <div> in our example); this is the content that will be shown or hidden with...

Collapsing Box - Etsy

Check out our collapsing box selection for the very best in unique or custom, handmade pieces from our shops.

collapse box - Glossary - Usability First

A collapse box is a box used in a window's title bar in MacOS that causes the window to shrink or expand, leaving...