Team:ETH Zurich/collapsible
From 2013.igem.org
(Difference between revisions)
(29 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
- | <html | + | <html> |
- | < | + | <script type="text/javascript"> |
- | + | (function($) { | |
- | + | $.fn.extend({ | |
- | + | collapsiblePanel: function() { | |
- | + | // Call the ConfigureCollapsiblePanel function for the selected element | |
- | + | return $(this).each(ConfigureCollapsiblePanel); | |
- | + | } | |
- | + | }); | |
- | + | ||
- | $( | + | })(jQuery); |
- | + | ||
- | + | function ConfigureCollapsiblePanel() { | |
- | < | + | $(this).addClass("ui-widget"); |
- | < | + | |
- | + | // Wrap the contents of the container within a new div. | |
- | <div | + | $(this).children().wrapAll("<div class='collapsibleContainerContent ui-widget-content'></div>"); |
- | + | ||
- | + | // Create a new div as the first item within the container. Put the title of the panel in here. | |
- | + | $("<div class='collapsibleContainerTitle ui-widget-header'><div>" + $(this).attr("title") + "</div></div>").prependTo($(this)); | |
- | + | ||
- | + | // Assign a call to CollapsibleContainerTitleOnClick for the click event of the new title div. | |
- | + | $(".collapsibleContainerTitle", this).click(CollapsibleContainerTitleOnClick); | |
- | + | } | |
- | + | function CollapsibleContainerTitleOnClick() { | |
- | + | // The item clicked is the title div... get this parent (the overall container) and toggle the content within it. | |
- | + | $(".collapsibleContainerContent", $(this).parent()).slideToggle(); | |
- | + | ||
- | + | strBefore = "collapse"; | |
- | + | str = "expand"; | |
- | + | if ($(this).children('.collapsibleContainerTitle div').html().indexOf("expand") >= 0) | |
- | + | { | |
- | + | str = [strBefore, strBefore = str][0]; | |
- | + | } | |
- | + | $(this).children('.collapsibleContainerTitle div').html($(this).children('.collapsibleContainerTitle div').html().replace(strBefore, str)); | |
- | + | } | |
- | + | $(document).ready(function() { | |
- | + | $(".collapsibleContainer").collapsiblePanel(); | |
- | + | }); | |
- | + | ||
- | + | </script> | |
- | + | ||
- | + | <style type="text/css"> | |
- | + | .collapsibleContainer | |
- | + | { | |
- | + | border:none; | |
- | + | ||
- | + | } | |
- | + | ||
- | + | .collapsibleContainerTitle | |
- | + | { | |
- | + | cursor:pointer; | |
- | + | } | |
- | + | ||
- | + | .collapsibleContainerTitle div | |
- | + | { | |
- | + | padding-top:5px; | |
- | + | padding-left:10px; | |
- | + | color:Blue; | |
- | + | font-size:13px; | |
- | + | } | |
- | + | ||
- | + | .collapsibleContainerContent | |
- | </ | + | { |
- | + | padding: 10px; | |
- | + | display:none; | |
- | + | } | |
+ | </style> | ||
</html> | </html> |
Latest revision as of 15:10, 25 October 2013