make all infobox panels collapsible

css/style.css

@@ -0,0 +1,7 @@
+.clickable{
+    cursor: pointer;   
+}
+
+.panel-heading span {
+	font-size: 15px;
+}

include/disk.php

@@ -1,6 +1,7 @@
   <div class="panel panel-default">
   <!-- Standard-Panel-Inhalt -->
-     <div class="panel-heading">Disk Use</div>
+     <div class="panel-heading">Disk Use<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span></div>
+     <div class="panel-body">
      <!-- Tabelle -->
      <div class="table-responsive">
          <table id="diskuse" class="table diskuse table-condensed table-striped table-hover">
@@ -58,3 +59,4 @@ try{
          </table>
      </div>
      </div>
+  </div>

include/lh_ajax.php

@@ -3,7 +3,8 @@ $totalLH = count($lastHeard);
 ?>
   <div class="panel panel-default">
   <!-- Standard-Panel-Inhalt -->
-  <div class="panel-heading">Last Heard List of today's <?php echo $totalLH; ?> callsigns.</div>
+  <div class="panel-heading">Last Heard List of today's <?php echo $totalLH; ?> callsigns.<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span></div>
+  <div class="panel-body">
   <!-- Tabelle -->
   <div class="table-responsive">
   <table id="lastHeard" class="table lastHeard table-condensed table-striped table-hover">
@@ -29,6 +30,7 @@ $totalLH = count($lastHeard);
         </thead>
     </table>
   </div>
+  </div>
 </div>
 <script>
 $(document).ready(function(){

include/localtx_ajax.php

@@ -3,7 +3,8 @@ $totalLH = count($lastHeard);
 ?>
   <div class="panel panel-default">
   <!-- Standard-Panel-Inhalt -->
-  <div class="panel-heading">Today's local transmissions</div>
+  <div class="panel-heading">Today's local transmissions<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span></div>
+  <div class="panel-body">
   <!-- Tabelle -->
   <div class="table-responsive">
   <table id="localTx" class="table localTx table-condensed table-striped table-hover">
@@ -35,6 +36,7 @@ $totalLH = count($lastHeard);
         </thead>
     </table>
   </div>
+  </div>
 </div>
 <script>
 $(document).ready(function(){

include/modes.php

@@ -1,6 +1,7 @@
   <div class="panel panel-default">
   <!-- Standard-Panel-Inhalt -->
-  <div class="panel-heading">Enabled Modes</div>
+  <div class="panel-heading">Enabled Modes<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span></div>
+  <div class="panel-body">
   <!-- Tabelle -->
   <div class="table-responsive">
   <table class="table">
@@ -16,4 +17,5 @@
     </tr>
   </table>
   </div>
+  </div>
 </div>

include/repeaterinfo.php

@@ -1,6 +1,7 @@
   <div class="panel panel-default">
   <!-- Standard-Panel-Inhalt -->
-  <div class="panel-heading">Repeater Info</div>
+  <div class="panel-heading">Repeater Info<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span></div>
+  <div class="panel-body">
   <!-- Tabelle -->
   <div class="table-responsive">
   <table class="table repeaterinfo">
@@ -115,4 +116,5 @@
     </tr>
   </table>
   </div>
+  </div>
 </div>

include/sysinfo_ajax.php

@@ -1,12 +1,14 @@
  <div class="panel panel-default">
   <!-- Standard-Panel-Inhalt -->
-  <div class="panel-heading">System Info</div>
+  <div class="panel-heading">System Info<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span></div>
+  <div class="panel-body">
   <!-- Tabelle -->
    <div class="table-responsive">
       <table id="sysinfo" class="table sysinfo table-condensed">
       </table>
    </div>
    </div>
+ </div>
 <script>
 function loadXMLDocSysinfo() {
    var xmlhttp;

include/txinfo.php

@@ -1,6 +1,7 @@
   <div class="panel panel-default">
   <!-- Standard-Panel-Inhalt -->
-  <div class="panel-heading">Currently TXing</div>
+  <div class="panel-heading">Currently TXing<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span></div>
+  <div class="panel-body">
   <!-- Tabelle -->
   <div class="table-responsive">
   <table id="currtx" class="table curTx table-condensed table-striped table-hover">
@@ -32,6 +33,7 @@
   </table>
   </div>
 </div>
+</div>
 <script>
 function doXMLHTTPRequest(scriptname, elem) {
    var xmlhttp;

include/ysfgatewayinfo.php

@@ -2,7 +2,8 @@
 ?>
   <div class="panel panel-default">
   <!-- Standard-Panel-Inhalt -->
-  <div class="panel-heading">YSFGateway-Infos</div>
+  <div class="panel-heading">YSFGateway-Infos<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span></div>
+  <div class="panel-body">
   <!-- Tabelle -->
   <table class="table">
     <tr>
@@ -17,10 +18,12 @@
     ?>
     </tr>
   </table>
+</div>
 </div>
   <div class="panel panel-default">
   <!-- Standard-Panel-Inhalt -->
-  <div class="panel-heading">YSFReflectors reported active</div>
+  <div class="panel-heading">YSFReflectors reported active<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span></div>
+  <div class="panel-body">
   <!-- Tabelle -->
   <div class="table-responsive">
   <table id="ysfGateways" class="table ysfGateways table-condensed table-striped table-hover">
@@ -56,6 +59,7 @@
   </table>
   </div>
 </div>
+</div>
 
 <script>
 $(document).ready(function(){

index.php

@@ -21,6 +21,8 @@ include "version.php";
   <head>
     <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=0.6,maximum-scale=1, user-scalable=yes">
+    <!-- Default-CSS -->
+    <link rel="stylesheet" href="css/style.css">
     <!-- CSS for tooltip display -->
     <link rel="stylesheet" href="css/tooltip.css">
     <!-- CSS for monospaced fonts in tables -->
@@ -157,6 +159,20 @@ if (!isset($_GET['stoprefresh'])) {
     instructions how to enable JavaScript in your web browser</a>.
    </noscript>
   </body>
+  <script>
+  		$(document).on('click', '.panel-heading span.clickable', function(e){
+    var $this = $(this);
+	if(!$this.hasClass('panel-collapsed')) {
+		$this.parents('.panel').find('.panel-body').slideUp();
+		$this.addClass('panel-collapsed');
+		$this.find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
+	} else {
+		$this.parents('.panel').find('.panel-body').slideDown();
+		$this.removeClass('panel-collapsed');
+		$this.find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
+	}
+})
+  </script>
 </html>
 <?php
    showLapTime("End of Page");

version.php

@@ -1,3 +1,3 @@
 <?php
-define("VERSION", "20170228-1");
+define("VERSION", "20170302-1");
 ?>