design table update

diff --git a/designfiles.htm b/designfiles.htm
index f2621564a3c52ef8165501626a32f1239e557f0a..f893d506041232205dcac8179fa598a826354abf 100644 (file)
--- a/designfiles.htm
+++ b/designfiles.htm
@@ -397,18 +397,35 @@ href="http://jspc29.x-matter.uni-frankfurt.de/bitfiles/">jspc29.x-matter.uni-fra
 
 
 
-<div class="expandable expanded" id="itc-expander">
-  <div class="header"><span class="indicator"></span> Trigger Channels</div>
-            
-  <div class="content">
-    <table>
-      <tr>
-       <th> blah</th>
-       <th> blah</th>
-       <th> blah</th>
-      </tr>
-    </table>
+<div id="container">
+    <div class="expandable-panel" id="cp-1">
+        <div class="expandable-panel-heading">
+            <h2>Content heading 1<span class="icon-close-open"></span></h2>
+         </div>
+        <div class="expandable-panel-content">
+            <p>Panel HTML...</p>
+        </div>
+    </div>
+ 
+    <div class="expandable-panel" id="cp-2">
+        <div class="expandable-panel-heading">
+            <h2>Content heading 2<span class="icon-close-open"></span></h2>
+         </div>
+        <div class="expandable-panel-content">
+            <p>Panel HTML...</p>
+ 
+        </div>
+  </div>
+ 
+  <div class="expandable-panel" id="cp-3">
+     <div class="expandable-panel-heading">
+         <h2>Content heading 3<span class="icon-close-open"></span></h2>
+     </div>
+     <div class="expandable-panel-content">
+         <p>Panel HTML...</p>
+     </div>
   </div>
+ 
 </div>
 
 

diff --git a/styleold.css b/styleold.css
index a0b05a595d03404f37db1eac561a78f9965826ce..baa20f8afb02a3a62ccf0f6a55333bf9fea0709d 100644 (file)
--- a/styleold.css
+++ b/styleold.css
@@ -302,31 +302,69 @@ table td, table th {
 /******************************
 * Expandable handling
 *****************************/
-
-   .expandable {
-      margin: 1em 0 1em 0;
-   }
-
-   .expandable .header {
-      border-bottom: 1px solid #dddddd;
-      font-size: 120%;
-      font-weight: bold;
-      color: #6B7B95;
-   }
-
-   .expandable .header .indicator {
-      display: block;
-      width: 15px;
-      float: left;
-   }
-
-   .expandable .content {
-      margin-left: 15px;
-      background: #ffffff;
-      overflow: hidden;
-      padding: 5px;
-   }
-
-   .expanded .content {
-      border-bottom: 1px solid #dddddd;
-   }
\ No newline at end of file
+h2, p, ol, ul, li {
+    margin:0px;
+    padding:0px;
+    font-size:13px;
+    font-family:Arial, Helvetica, sans-serif;
+}
+ 
+#container {
+    width:300px;
+    margin:auto;
+    margin-top:100px;
+}
+ 
+/* --------- COLLAPSIBLE PANELS ----------*/
+ 
+.expandable-panel {
+    width:100%;
+    position:relative;
+    min-height:50px;
+    overflow:auto;
+    margin-bottom: 20px;
+    border:1px solid #999;
+}
+.expandable-panel-heading {
+    width:100%;
+    cursor:pointer;
+    min-height:50px;
+    clear:both;
+    background-color:#E5E5E5;
+    position:relative;
+}
+.expandable-panel-heading:hover {
+    color:#666;
+}
+.expandable-panel-heading h2 {
+    padding:14px 10px 9px 15px;
+    font-size:18px;
+    line-height:20px;
+}
+.expandable-panel-content {
+    padding:0 15px 0 15px;
+    margin-top:-999px;
+}
+.expandable-panel-content p {
+    padding:4px 0 6px 0;
+}
+.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 {
+    float:right;
+    padding-left:12px;
+}
+.header-active {
+    background-color:#D0D7F3;
+}
\ No newline at end of file