Unlock a world of possibilities! Login now and discover the exclusive benefits awaiting you.
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
hello there !
may be you can take a look at this content
hope it helps : https://www.w3schools.com/bootstrap/bootstrap_collapse.asp
A.
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
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
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;
}