Qlik Sense Mashup: How to adjust the filter page view(from expanded to collapsed)

[rahulgoyal1287]

Hi Community Members,

I have just started working on Mashups (multipage) & stuck in some basic functionality.

As a step, i developed 6 containers in a row which has length of 2 points each... & i dropped the filter panes into them..

it works however it shows them in expanded view and i want to collapse them..

i have used the following scripts to develop them -

HTML

<section class="content-section-Filter">

<div class="container">

<div class="row">

<div class="col-sm-2 qvplaceholder_F qvobject" id="FILTER1">

<span aria-hidden="true">×</span>

</div>

<div class="col-sm-2 qvplaceholder_F qvobject" id="FILTER2">

</div>

<div class="col-sm-2 qvplaceholder_F qvobject" id="FILTER3">

</div>

<div class="col-sm-2 qvplaceholder_F qvobject" id="FILTER4">

</div>

<div class="col-sm-2 qvplaceholder_F qvobject" id="FILTER5">

</div>

<div class="col-sm-2 qvplaceholder_F qvobject" id="FILTER6">

</div>

</div>

</div>

</section>

CSS

div.qvobject, div.qvplaceholder_F {

padding: 30px 10px 10px 10px;

height: 50px;

}

Please suggest the way forward & if there is any content available on Internet through which i can learn.. please share it with me. That will be a great help

Best Regards,

Rahul

[s_achraphe]

‌hello there !

may be you can take a look at this content

hope it helps : https://www.w3schools.com/bootstrap/bootstrap_collapse.asp

A.

[rahulgoyal1287]

Thank you Achraphe for the details. It is certainly helpful..

I am going through that. In the meanwhile, if you know the solution of above scenario.. please share it with me as a quick fix.

Best Regards,

Rahul

[s_achraphe]

Hello Rahul,

You're welcome

May be you can upload an image of what exactly you want to do

Just to be sure that I understood well and help you

[balabhaskarqlik]

Use below script, tweak your script pertains object, this is for Filter pane.

Here is my HTML:

<div class="panel panel-default">

       <div class="panel-heading">

            <button class="panel-fullscreen"><span class="glyphicon glyphicon-resize-full color=#404040"></span><span                class="glyphicon glyphicon-resize-small color=#404040"></span></button>

            <button class="panel-collapse"></button>

            <h3 class="panel-title"><i class="fa fa-bar-chart-o fa-fw"></i>Trend</h3>

       </div>

            <div id="QV1-9" class="qvobject"></div>

  </div>

Here is part of my JS:

$('.panel-collapse').on('click', function() {

  $(this).closest('.panel').find('.panel-body').toggle();

  $(this).toggleClass('is-collapsed');

  });

  $('.panel-fullscreen').on('click', function() {

  var panel = $(this).closest('.panel');

  panel.toggleClass('is-fullscreen');

  $(this).toggleClass('is-fullscreen');

  qlik.resize(panel.find('.qvobject').attr('id'));

  });

Here is my CSS:

.panel-collapse {

  border: 1px solid #999;

    width: 20px;

    height: 20px;

    float: right;

  font-size: 20px;

    line-height: 18px;

}

.panel-collapse::before {

  content: '-';

}

.panel-collapse.is-collapsed::before {

  content: '+';

}

.panel-fullscreen {

  border: 1px solid #999;

    width: 20px;

    height: 20px;

    float: right;

  font-size: 20px;

    line-height: 18px;

  margin-left: 10px;

  font-size: 14px;

    line-height: 20px;

}

.panel-fullscreen:not(.is-fullscreen) .glyphicon-resize-small {

  display: none;

}

.panel-fullscreen.is-fullscreen  .glyphicon-resize-full {

  display: none;

}

.panel.is-fullscreen {

  position: fixed;

    top: 106px;

    background: #fff;

    z-index: 3;

    right: 0;

    left: 165px;

    bottom: 0;

}