Team:Toulouse/template/Accordion

From 2014.igem.org

(Difference between revisions)
 
(12 intermediate revisions not shown)
Line 33: Line 33:
border-bottom:3px solid #BDCBBD;
border-bottom:3px solid #BDCBBD;
-
   font-family:'Open Sans'
+
   font-family:'Open Sans';
   color: green;
   color: green;
   font-weight:600;
   font-weight:600;
Line 42: Line 42:
}
}
 +
.technology2{ /*header of 2nd demo title 2*/
 +
cursor: hand;
 +
cursor: pointer;
 +
border-bottom:3px solid #BDCBBD;
 +
  font-family:'Open Sans';
 +
  color:#5a6060;
 +
  font-weight:600;
 +
  font-size:18px;
 +
  margin:0 0 30px 0;
 +
  border:none;
 +
}
.openlanguage{ /*class added to contents of 2nd demo when they are open*/
.openlanguage{ /*class added to contents of 2nd demo when they are open*/
-
color: #225323;
+
color: green;
 +
}
 +
 
 +
.openlanguage2{ /*class added to contents of 2nd demo when they are open*/
 +
color:#5a6060;
}
}
.closedlanguage{ /*class added to contents of 2nd demo when they are closed*/
.closedlanguage{ /*class added to contents of 2nd demo when they are closed*/
-
color: #4E754F;
+
color: #225e22;
}
}
 +
 +
.closedlanguage2{ /*class added to contents of 2nd demo when they are closed*/
 +
color:#5a6060;
 +
}
 +
</style>
</style>
Line 67: Line 87:
persiststate: false, //persist state of opened contents within browser session?
persiststate: false, //persist state of opened contents within browser session?
toggleclass: ["closedlanguage", "openlanguage"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
toggleclass: ["closedlanguage", "openlanguage"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
 +
togglehtml: ["suffix", " <small><small>[Expand]</small></small>", " <small><small>[Collapse]</small></small>"], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
 +
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
 +
oninit:function(expandedindices){ //custom code to run when headers have initalized
 +
//do nothing
 +
},
 +
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
 +
//do nothing
 +
}
 +
})
 +
 +
 +
 +
 +
 +
//Initialize 2nd demo:
 +
ddaccordion.init({
 +
headerclass: "technology2", //Shared CSS class name of headers group
 +
contentclass: "thelanguage2", //Shared CSS class name of contents group
 +
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
 +
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
 +
collapseprev: false, //Collapse previous content (so only one open at any time)? true/false
 +
defaultexpanded: [], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
 +
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
 +
animatedefault: false, //Should contents open by default be animated into view?
 +
persiststate: false, //persist state of opened contents within browser session?
 +
toggleclass: ["closedlanguage2", "openlanguage2"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["suffix", " <small><small>[Expand]</small></small>", " <small><small>[Collapse]</small></small>"], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
togglehtml: ["suffix", " <small><small>[Expand]</small></small>", " <small><small>[Collapse]</small></small>"], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"

Latest revision as of 14:26, 17 October 2014