Collapse Box

[Safranil]

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 :smile:) ?

[almasaeed2010]

I agree with you. Thank you for the suggestion!

[diegoscor]

this is just what i'm looking for! but i couldn't make it work.. any ideas? I copied your code and add both of them entries into the app.js like you said.. thank you

[Safranil]

You need to add data-widget="collapse-header" to your .box-header element.

[diegoscor]

This is the code of the box

<div class="box box-default collapsed-box">
       <div class="box-header with-border" data-widget="collapse-header">
              <h3 class="box-title">Datos Avanzados</h3>
              <div class="box-tools pull-right">
                   <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i></button>
               </div><!-- /.box-tools -->
        </div><!-- /.box-header -->
<div class="box-body">

That's my code, and I had already included data-widget="collapse-header" to the .box-header

I'm sorry for the way the code is displayed.. but i'm new on commenting on forums..

[ovninosa]

When this functionality will be implemented? Thanks

[nullpointer8086]

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));
      });

[gimler]

@almasaeed2010 why you close this one? would you accept a PR?

[mtozlu]

+1 for implementing this into core. Why is it closed without any comment? We can create PR if you want.

[prine]

Would also appreciate if this would be in the next release :)

[lenamtl]

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