"Panel - fullscreen toggle"
Bootstrap 3.3.0 Snippet by lukepzak

<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>
.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; }
$(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'); }); });

Questions / Comments:

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 (0) - 11 months ago - Reply 0


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

Anonymous (0) - 11 months ago - Reply 0


deleted some code, put this between the div tags.

Anonymous (0) - 11 months ago - Reply 0


this is brilliant

Jimmy Ilenloa (0) - 11 months ago - Reply 0


Related: See More