CSS checked toggle 顯示隱藏

<!--html範例- [table] 顯示隱藏 class="expandable" tr內容-->

<input type="checkbox" id="expand-toggle" />

<table>
  <thead>
    <tr><th>Column #1</th><th>Column #2</th><th>Column #3</th></tr>
  </thead>
  <tbody>
    <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
    <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
    <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
    <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
    <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
  </tbody>
</table>

<label for="expand-toggle" id="expand-btn">Toggle hidden rows</label>

/*css範例-  [table] 顯示隱藏 class="expandable" */

/* Hide the toggle checkbox */
#expand-toggle {
  display: none;
}

/* Hide expandable content by default */
.expandable {
  visibility: collapse;
  background: #ddd;
}

/* Style the button */
#expand-btn {
  display: inline-block;
  margin-top: 12px;
  padding: 5px 11px;
  background-color: #ff7;
  border: 1px solid;
  border-radius: 3px;
}

/* Show hidden content when the checkbox is checked */
#expand-toggle:checked ~ * .expandable {
  visibility: visible;
}

/* Style the button when the checkbox is checked */
#expand-toggle:checked ~ #expand-btn {
  background-color: #ccc;
}

<!--html範例 - [input:checked gallery example]選取效果-->

<div class="gallery-item">
    <label for="gallery-item1" class="gallery-label"><img src="images/1s.jpg" class="gallery-preview" /></label>
    <input type="radio" name="gallery-list" class="gallery-selector" value="1.jpg" id="gallery-item1" />
    <img src="images/1.jpg" class="gallery-fullsize" />
</div>
<div class="gallery-item">
    <label for="gallery-item2" class="gallery-label"><img src="images/2s.jpg" class="gallery-preview" /></label>
    <input type="radio" name="gallery-list" class="gallery-selector" value="2.jpg" id="gallery-item2" />
    <img src="images/2.jpg" class="gallery-fullsize" />
</div>
<div class="gallery-item">
    <label for="gallery-item3" class="gallery-label"><img src="images/3s.jpg" class="gallery-preview" /></label>
    <input type="radio" name="gallery-list" class="gallery-selector" value="3.jpg" id="gallery-item3" />
    <img src="images/3.jpg" class="gallery-fullsize" />
</div>
<div class="gallery-item">
    <label for="gallery-item4" class="gallery-label"><img src="images/4s.jpg" class="gallery-preview" /></label>
    <input type="radio" name="gallery-list" class="gallery-selector" value="4.jpg" id="gallery-item4" />
    <img src="images/4.jpg" class="gallery-fullsize" />
</div>

/* html範例-  [input:checked gallery example] */

#gallery-container {
	position: relative;
	width: 500px;
	height: auto;
	padding-top: 350px;
	padding-bottom: 15px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	border: 1px #aaaaaa solid;
}

img.gallery-fullsize {
	position: absolute;
	top: 15px;
	left: 50px;
	display: none;
}

div.gallery-item {
	display: inline-block;
}

input.gallery-selector {
	display: none;
}

label.gallery-label {
	cursor: pointer;
}

input.gallery-selector:checked ~ img.gallery-fullsize {
	display: block;
}