From fb2d0bcb8edfa0e365736ca8ef69f61ff36907e1 Mon Sep 17 00:00:00 2001
From: Cahit <c.ugur@gsi.de>
Date: Fri, 12 Dec 2014 11:30:33 +0100
Subject: [PATCH] design table update

---
 designfiles.htm | 79 ++++++++++++++++++++++++++++++++++++++++++++++++-
 styleold.css    | 11 +++++--
 2 files changed, 86 insertions(+), 4 deletions(-)

diff --git a/designfiles.htm b/designfiles.htm
index 8cbdbbb..e075087 100644
--- a/designfiles.htm
+++ b/designfiles.htm
@@ -429,9 +429,86 @@ href="http://jspc29.x-matter.uni-frankfurt.de/bitfiles/">jspc29.x-matter.uni-fra
 
 
 
-
 <h4>DreamPlug Designs</h4>
 <ul> 
   <li> <a href="../bitfiles/dreamplug-system-04112013.tar.xz">DreamPlug: disk Image </a> </li> 
   <li> <a href="../bitfiles/dreamplug-system-04112013.tar.xz">DreamPlug: uboot Image </a>  </li> 
 </ul>
+
+
+
+
+(function($) {
+    $(document).ready(function () {
+        /*-------------------- EXPANDABLE PANELS ----------------------*/
+        var panelspeed = 500; //panel animate speed in milliseconds
+        var totalpanels = 3; //total number of collapsible panels
+        var defaultopenpanel = 0; //leave 0 for no panel open
+        var accordian = false; //set panels to behave like an accordian, with one panel only ever open at once     
+ 
+        var panelheight = new Array();
+        var currentpanel = defaultopenpanel;
+        var iconheight = parseInt($('.icon-close-open').css('height'));
+        var highlightopen = true;
+ 
+        //Initialise collapsible panels
+        function panelinit() {
+                for (var i=1; i<=totalpanels; i++) {
+                    panelheight[i] = parseInt($('#cp-'+i).find('.expandable-panel-content').css('height'));
+                    $('#cp-'+i).find('.expandable-panel-content').css('margin-top', -panelheight[i]);
+                    if (defaultopenpanel == i) {
+                        $('#cp-'+i).find('.icon-close-open').css('background-position', '0px -'+iconheight+'px');
+                        $('#cp-'+i).find('.expandable-panel-content').css('margin-top', 0);
+                    }
+                }
+        }
+ 
+        $('.expandable-panel-heading').click(function() {
+            var obj = $(this).next();
+            var objid = parseInt($(this).parent().attr('ID').substr(3,2));
+            currentpanel = objid;
+            if (accordian == true) {
+                resetpanels();
+            }
+ 
+            if (parseInt(obj.css('margin-top')) <= (panelheight[objid]*-1)) {
+                obj.clearQueue();
+                obj.stop();
+                obj.prev().find('.icon-close-open').css('background-position', '0px -'+iconheight+'px');
+                obj.animate({'margin-top':0}, panelspeed);
+                if (highlightopen == true) {
+                    $('#cp-'+currentpanel + ' .expandable-panel-heading').addClass('header-active');
+                }
+            } else {
+                obj.clearQueue();
+                obj.stop();
+                obj.prev().find('.icon-close-open').css('background-position', '0px 0px');
+                obj.animate({'margin-top':(panelheight[objid]*-1)}, panelspeed);
+                if (highlightopen == true) {
+                    $('#cp-'+currentpanel + ' .expandable-panel-heading').removeClass('header-active');
+                }
+            }
+        });
+ 
+        function resetpanels() {
+            for (var i=1; i<=totalpanels; i++) {
+                if (currentpanel != i) {
+                    $('#cp-'+i).find('.icon-close-open').css('background-position', '0px 0px');
+                    $('#cp-'+i).find('.expandable-panel-content').animate({'margin-top':-panelheight[i]}, panelspeed);
+                    if (highlightopen == true) {
+                        $('#cp-'+i + ' .expandable-panel-heading').removeClass('header-active');
+                    }
+                }
+            }
+        }
+        
+       //Uncomment these lines if the expandable panels are not a fixed width and need to resize
+       /* $( window ).resize(function() {
+          panelinit();
+        });*/
+ 
+        $(window).load(function() {
+            panelinit();
+        }); //END LOAD
+    }); //END READY
+})(jQuery);
diff --git a/styleold.css b/styleold.css
index 3679dc0..615baf2 100644
--- a/styleold.css
+++ b/styleold.css
@@ -302,9 +302,15 @@ table td, table th {
 /******************************
 * Expandable handling
 *****************************/
+ h2, p, ol, ul, li {
+    margin:0px;
+    padding:0px;
+    font-size:13px;
+    font-family:Arial, Helvetica, sans-serif;
+}
  
 #container {
-    width:500px;
+    width:300px;
     margin:auto;
     margin-top:100px;
 }
@@ -345,15 +351,14 @@ table td, table th {
 .expandable-panel-content p:first-child  {
     padding-top:10px;
 }
-
 .expandable-panel-content p:last-child {
     padding-bottom:15px;
 }
-
 .icon-close-open {
     width:20px;
     height:20px;
     position:absolute;
+    background-image:url(icon-close-open.png);
     right:15px;
 }
 .expandable-panel-content img {
-- 
2.43.0