how to add close minimize full screen button to bootstrap panel

Question

i want to add a close and minmize button to hide and close the body panel pannel and to full screen button to every bootsrap panel in the page using jquery

    <div class="panel panel-primary">


        <div class="panel-heading">

            <h3 class="panel-title"><i class="fa fa-bar-chart-o"></i>  Number Of Tickets Reported In The Billing Unit (Today)</h3>
        </div>
        <div class="panel-body">
            <div class="flot-chart">
                <div id="BillPhChart"></div>
            </div>
        </div>
    </div>
</div>

I am not sure of what you want. Could you please elaborate your question/body properly? — gustavodidomenico, Jun 12 '14 at 17:48
the problem that i want these option to aplly only on the specifc panel,because in my page there is multiple panel and when i hit toggle all pannel minimize — user3489866, Jun 12 '14 at 17:49

score 3 · Accepted Answer · edited May 23 '17 at 12:21

3

You will have to use jQuery to perform these tasks. Then the buttons should simply call the corresponding jQuery functions.

Here are some quick hints I just found :

Minimize / Maximize div's with jQuery

http://plugins.jquery.com/tag/fullscreen/

Here is an example for the button :

<a href="#" class="btn"><i class="icon-white icon-plus"></i></a>

The href being the jQuery function.

EDIT: To individually trigger the panels, give each one of them an unique id and create a JavaScript function that calls the jQuery using the id selector to identify it.

$( "#myID" )

You can find the id of the panel that triggered the event using this :

event.target.id

edited May 23 '17 at 12:21

Community

1
1

answered Jun 12 '14 at 17:46

ESD

675
2
12
35

i know that ,the problem that i want these option to aplly only on the specifc panel,because in my page there is multiple panel and when i hit toggle all pannel minimize – user3489866 Jun 12 '14 at 17:48
Mainly if you are already using jquery, why inline javascript code? – gustavodidomenico Jun 12 '14 at 17:48

how to add close minimize full screen button to bootstrap panel

1 Answers1