Team:ETH Zurich/collapsible

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<html lang="en">
+
<html>
-
<head>
+
<script type="text/javascript">
-
  <meta charset="utf-8" />
+
(function($) {
-
  <title>jQuery UI Accordion - Default functionality</title>
+
    $.fn.extend({
-
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
+
        collapsiblePanel: function() {
-
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
+
            // Call the ConfigureCollapsiblePanel function for the selected element
-
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
+
            return $(this).each(ConfigureCollapsiblePanel);
-
  <link rel="stylesheet" href="/resources/demos/style.css" />
+
        }
-
  <script>
+
    });
-
  $(function() {
+
 
-
     $( "#accordion" ).accordion();
+
})(jQuery);
-
  });
+
 
-
  </script>
+
function ConfigureCollapsiblePanel() {
-
</head>
+
    $(this).addClass("ui-widget");
-
<body>
+
 
-
+
    // Wrap the contents of the container within a new div.
-
<div id="accordion">
+
    $(this).children().wrapAll("<div class='collapsibleContainerContent ui-widget-content'></div>");
-
  <h3>Section 1</h3>
+
 
-
  <div>
+
    // Create a new div as the first item within the container. Put the title of the panel in here.
-
    <p>
+
    $("<div class='collapsibleContainerTitle ui-widget-header'><div>" + $(this).attr("title") + "</div></div>").prependTo($(this));
-
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
+
 
-
     ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
+
    // Assign a call to CollapsibleContainerTitleOnClick for the click event of the new title div.
-
    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
+
     $(".collapsibleContainerTitle", this).click(CollapsibleContainerTitleOnClick);
-
     odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
+
}
-
     </p>
+
 
-
  </div>
+
function CollapsibleContainerTitleOnClick() {
-
  <h3>Section 2</h3>
+
    // The item clicked is the title div... get this parent (the overall container) and toggle the content within it.
-
  <div>
+
     $(".collapsibleContainerContent", $(this).parent()).slideToggle();
-
    <p>
+
}
-
     Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
+
     $(document).ready(function() {
-
    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
+
        $(".collapsibleContainer").collapsiblePanel();
-
    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
+
     });
-
    suscipit faucibus urna.
+
</script>
-
     </p>
+
<style type="text/css">
-
  </div>
+
.collapsibleContainer
-
  <h3>Section 3</h3>
+
{
-
  <div>
+
     border: solid 1px #9BB5C1;
-
    <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
+
.collapsibleContainerTitle
-
     lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
+
{
-
    </p>
+
     cursor:pointer;
-
    <ul>
+
}
-
      <li>List item one</li>
+
 
-
      <li>List item two</li>
+
.collapsibleContainerTitle div
-
      <li>List item three</li>
+
{
-
     </ul>
+
     padding-top:5px;
-
  </div>
+
     padding-left:10px;
-
  <h3>Section 4</h3>
+
     background-color:#9BB5C1;
-
  <div>
+
     color:#607882;
-
     <p>
+
}
-
    Cras dictum. Pellentesque habitant morbi tristique senectus et netus
+
 
-
    et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
+
.collapsibleContainerContent
-
    faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
+
{
-
    mauris vel est.
+
     padding: 10px;
-
    </p>
+
}
-
    <p>
+
</style>
-
    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
+
 
-
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+
<div class="collapsibleContainer" title="Example Collapsible Panel">
-
    inceptos himenaeos.
+
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.... (you get the idea!) </p>
-
    </p>
+
-
  </div>
+
</div>
</div>
-
+
 
-
+
-
</body>
+
</html>
</html>

Revision as of 15:08, 23 October 2013

Lorem ipsum dolor sit amet, consectetur adipiscing elit.... (you get the idea!)

Retrieved from "http://2013.igem.org/Team:ETH_Zurich/collapsible"