"Panel - fullscreen toggle"
Bootstrap 3.3.0 Snippet by lukepzak

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-md-8">
<h2>Fullscreen toggle</h2>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
<ul class="list-inline panel-actions">
<li><a href="#" id="panel-fullscreen" role="button" title="Toggle fullscreen"><i class="glyphicon glyphicon-resize-full"></i></a></li>
</ul>
</div>
<div class="panel-body">
<h3>Panel body</h3>
<p>Click the resize icon in the top right to make this fullscreen.</p>
<p>Click the icon again to return to the normal size.</p>
</div>
</div>
</div>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.panel-actions {
margin-top: -20px;
margin-bottom: 0;
text-align: right;
}
.panel-actions a {
color:#333;
}
.panel-fullscreen {
display: block;
z-index: 9999;
position: fixed;
width: 100%;
height: 100%;
top: 0;
right: 0;
left: 0;
bottom: 0;
overflow: auto;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(document).ready(function () {
//Toggle fullscreen
$("#panel-fullscreen").click(function (e) {
e.preventDefault();
var $this = $(this);
if ($this.children('i').hasClass('glyphicon-resize-full'))
{
$this.children('i').removeClass('glyphicon-resize-full');
$this.children('i').addClass('glyphicon-resize-small');
}
else if ($this.children('i').hasClass('glyphicon-resize-small'))
{
$this.children('i').removeClass('glyphicon-resize-small');
$this.children('i').addClass('glyphicon-resize-full');
}
$(this).closest('.panel').toggleClass('panel-fullscreen');
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Dashboard 2
Bootstrap V4 Side Toggle and Fixed Top Menu (Responsive)
animated sinin and signup panel. animated login and registeration page, popup,
Register form, html bootstrap4 registration form card panel

Questions / Comments:

Why this one works only for one card in layout?

How may i do to this one work at all cards in bootstrap layout?

pedroygor89 () - 6 years ago - Reply 0

Hello,

I've used this code, it's working fine. In my web page I've set the height of panel-body to 260px. How to resize the panel-body height when displayed in fullscreen.

Thanks,

imtiyaz

mimtiyaz () - 6 years ago - Reply 0

This is some great code but found it tricky to adjust with limited knowledge of jQuery.
But found solution with a little more flexibility, If you already using bootstrap 3 you may be familiar with collapse, try this:
Also it does not break html rules of multiple ids of the same name which should be unique.

CSS:
.fullscreen { display: block; z-index: 9999; position: fixed; width: 100%; height: 100%; top: 0; right: 0; left: 0; bottom: 0; overflow: auto; }

HTML:
<div id="users-list">

</div>

JS:
$('[data-toggle="expand"]').click(function() {
$(this).closest($(this).attr('data-target')).toggleClass('fullscreen');
});

Anonymous () - 8 years ago - Reply 0

grrr, attach this text to any element you like :- data-toggle="expand" data-target="#users-list"

Anonymous () - 8 years ago - Reply 0

deleted some code, put this between the div tags.

Anonymous () - 8 years ago - Reply 0

this is brilliant

Jimmy Ilenloa () - 8 years ago - Reply 0