Team:Freiburg/Project/toolkit

From 2013.igem.org

(Difference between revisions)
Line 10: Line 10:
############################################################################## -->
############################################################################## -->
-
<script language="javascript">
+
<script type="text/javascript">
-
function toggle(divId) {
+
if (document.getElementsByClassName == undefined) {
-
     var divArray = document.getElementsByTagName("div");
+
  // only needed for old browsers like IE8 and earlier
-
     for(i = 0; i < divArray.length; i++){
+
  // http://www.snipplr.com/view/45280/getelementsbyclassname/
-
        if(divArray[i].id == divId){
+
  document.getElementsByClassName = function(className, node) {
-
            if(divArray[i].style.display != 'none'){
+
     if(!node) node = document.getElementsByTagName("body")[0];
-
                divArray[i].style.display = 'none';
+
    var a = [];
-
            }else{
+
    var re = new RegExp('\\b' + className + '\\b');
-
                divArray[i].style.display = '';
+
    var els = node.getElementsByTagName("*");
-
            }
+
     for(var i=0,j=els.length; i<j; i++)
-
        }
+
      if(re.test(els[i].className))a.push(els[i]);
-
    }
+
    return a;
 +
  }
 +
}
 +
 +
function toggle(theClass, display) {
 +
  var elems = document.getElementsByClassName(theClass);
 +
  var state = document.getElementById("state");
 +
  for (var i=0; i<elems.length; i++)
 +
    elems[i].style.display = display;
 +
  if (display == "block")
 +
    state.innerHTML = "All Descriptions Shown";
 +
  else state.innerHTML = "Classed Descriptions Hidden";
 +
}
 +
 +
document.getElementById("cbox").onclick = function() {
 +
  if (this.checked) toggle("descr", "block");
 +
  else toggle("descr", "none");
}
}
</script>
</script>
Line 83: Line 99:
<form>
<form>
-
<input type="checkbox" onClick="toggle('descr');"> See Descriptions
+
  <fieldset>
 +
    <label for="cbox" id="state">All Descriptions Shown</label>
 +
    <input id="cbox" type="checkbox" checked="checked" />
 +
  </fieldset>
</form>
</form>
-
+
<ul>
-
<div id="descr" style="display:none">Hello This is #1</div>
+
  <li class="descr">Hello This is #1 (can be toggled)</li>
-
 
+
  <li class="descr">Hello This is #2 (can be toggled)</li>
-
<div id="non-descript">Hello This is not one of them</div>
+
  <li class="descr">Hello This is #3 (can be toggled)</li>
-
 
+
  <li>Hello This is #4 (cannot be toggled)</li>
-
</div>
+
</ul>

Revision as of 21:55, 17 September 2013


  • Hello This is #1 (can be toggled)
  • Hello This is #2 (can be toggled)
  • Hello This is #3 (can be toggled)
  • Hello This is #4 (cannot be toggled)

Retrieved from "http://2013.igem.org/Team:Freiburg/Project/toolkit"