Team:Hong Kong HKUST/notebook

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<html>  
+
<html>
-
<meta charset="utf-8" />
+
<head>
-
  <title>jQuery UI Accordion - Default functionality</title>
+
    <script type="text/javascript" src="javascript/jquery.cookie.js"></script> <!--required only if using cookies-->
-
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
+
    <script type="text/javascript" src="javascript/jquery.accordion.js"></script>
-
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
+
    <script type="text/javascript">
-
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
+
        $(document).ready(function() {
-
  <link rel="stylesheet" href="/resources/demos/style.css" />
+
            $('.accordion').accordion({defaultOpen: 'some_id'}); //some_id section1 in demo
-
  <script>
+
        });
-
  $(function() {
+
    </script>
-
     $( "#accordion" ).accordion();
+
<style type="text/css">#left_nav {
-
  });
+
        width:250px;
-
  </script>
+
    }
 +
    #body {
 +
        width:90%;
 +
        float:left;
 +
        margin:10px;
 +
     }
 +
    .accordion {
 +
        margin: 0;
 +
        padding:10px;
 +
        height:20px;
 +
        border-top:#f0f0f0 1px solid;
 +
        background: #cccccc;
 +
        font-family: Arial, Helvetica, sans-serif;
 +
        text-decoration:none;
 +
        text-transform:uppercase;
 +
        color: #000;
 +
        font-size:1em;
 +
    }
 +
    .accordion-open {
 +
        background:#000;
 +
        color: #fff;
 +
    }
 +
    .accordion-open span {
 +
        display:block;
 +
        float:right;
 +
        padding:10px;
 +
    }
 +
    .accordion-open span {
 +
        background:url(../images/minus.png) center center no-repeat;
 +
    }
 +
    .accordion-close span {
 +
        display:block;
 +
        float:right;
 +
        background:url(../images/plus.png) center center no-repeat;
 +
        padding:10px;
 +
    }
 +
    div.container {
 +
        padding:0;
 +
        margin:0;
 +
    }
 +
    div.content {
 +
        background:#f0f0f0;
 +
        margin: 0;
 +
        padding:10px;
 +
        font-size:.9em;
 +
        line-height:1.5em;
 +
        font-family:"Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
 +
    }
 +
    div.content ul, div.content p {
 +
        padding:0;
 +
        margin:0;
 +
        padding:3px;
 +
    }
 +
    div.content ul li {
 +
        list-style-position:inside;
 +
        line-height:25px;
 +
    }
 +
    div.content ul li a {
 +
        color:#555555;
 +
    }
 +
    code {
 +
        overflow:auto;
 +
    }
 +
</style>
</head>
</head>
<body>
<body>
-
   
+
  <div class="accordion" id="section1">Heading<span></span></div>
-
<div id="accordion">
+
     <div class="container">
-
  <h3>Section 1</h3>
+
        <div class="content">
-
  <div>
+
            <div>Sample Content</div>
-
     <p>
+
            <p>Content here....</p>
-
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
+
        </div>
-
    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
+
    </div>
-
    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
+
    <div class="accordion" id="section2">Heading<span></span></div>
-
    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
+
    <div class="container">
-
    </p>
+
        <div class="content">
-
  </div>
+
            <div>Sample Content</div>
-
  <h3>Section 2</h3>
+
            <p>Content here....</p>
-
  <div>
+
        </div>
-
    <p>
+
    </div>
-
    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
+
    <div class="accordion" id="section3">Heading<span></span></div>
-
    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
+
     <div class="container">
-
    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
+
        <div class="content">
-
    suscipit faucibus urna.
+
            <div>Sample Content</div>
-
    </p>
+
            <p>Content here....</p>
-
  </div>
+
        </div>
-
  <h3>Section 3</h3>
+
     </div>
-
  <div>
+
</body>
-
    <p>
+
-
    Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
+
-
    Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
+
-
    ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
+
-
    lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
+
-
    </p>
+
-
    <ul>
+
-
      <li>List item one</li>
+
-
      <li>List item two</li>
+
-
      <li>List item three</li>
+
-
     </ul>
+
-
  </div>
+
-
  <h3>Section 4</h3>
+
-
  <div>
+
-
    <p>
+
-
    Cras dictum. Pellentesque habitant morbi tristique senectus et netus
+
-
    et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
+
-
    faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
+
-
    mauris vel est.
+
-
    </p>
+
-
    <p>
+
-
    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
+
-
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+
-
    inceptos himenaeos.
+
-
     </p>
+
-
  </div>
+
-
</div>
+
</html>
</html>

Revision as of 11:43, 15 August 2013

Heading
Sample Content

Content here....

Heading
Sample Content

Content here....

Heading
Sample Content

Content here....