I just have one thing about the label element, where I’m not certain. <label> is commonly used to attach visual/text information to a form control. so far, so good.
Expand|Select|Wrap|Line Numbers
- <!-- just to make it visible -->
- <input type="checkbox" value="yes" id="mysql">
- <label for="mysql">save MySQL</label>
Expand|Select|Wrap|Line Numbers
- <label for="desc1" class="trigger">show content</label>
- <div id="desc1" class="hide">bla bla blubb …</div>
- /* CSS */
- .hide {
- display: none;
- }
- // JavaScript
- function toggle()
- {
- // for the general idea …
- var vis = document.getElementById(this.for).style.display;
- if ("none" == vis) {
- vis = "block";
- this.textContent = "hide content";
- } else {
- vis = "none";
- this.textContent = "show content";
- }
- }
- // after some prototyping …
- document.getElementsByClassName("trigger").addEventForEach("click", toggle, false);