Requested
Seen
8 instances
I’ve a desk, the place knowledge is hidden or proven based mostly on whether or not the checkbox is checked or unchecked. right here is the fiddle : https://jsfiddle.internet/2xw3tsrh/2/
I’m attempting to convey the checkbox inside ‘td’ , proper infront of “Click on me” textual content. I can’t use ‘data-label’ or, use an id for every row to traverse and use one thing “enter#row1:checked”. I dont wish to conceal the checkbox and tie the label textual content to the checkbox. Is there a option to obtain it ?
Thanks upfront.
Code :
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/xhtml">
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Desk</title>
<!-- add icon hyperlink -->
<hyperlink rel="icon" href="https://stackoverflow.com/questions/73801536/./MAblueIcon.png" kind="picture/x-icon">
<meta title="viewport" content material="width=device-width, initial-scale=1.0">
</head>
<head>
<model>
@charset "UTF-8";
/* #row1,#row2 {
show: none;
} */
.tab-label {
/* show: flex;
justify-content: space-between;
padding: 1em; */
background: #b9ce44;
font-weight: daring;
/* cursor: pointer; */
/* Icon */
}
/* .tab-label:hover {
background: #1a252f;
} */
/* .tab-label::after {
content material: "❯";
width: 1em;
peak: 1em;
text-align: heart;
transition: all 0.35s;
} */
.tab-content {
overflow: hidden;
max-height: 0;
padding: 0 1em;
coloration: #2c3e50;
background: white;
transition: all 0.35s;
}
/* enter:checked ~ .tab-label {
background: #1a252f;
} */
/* enter:checked ~ .tab-label::after {
remodel: rotate(90deg);
} */
enter:checked ~ .tab-content {
max-height: 100vh;
padding: 1em;
}
</model>
</head>
<physique model="margin: 0;padding: 0;min-width: 100%;width: 100%;
max-width: 100%; min-height: 100%; peak: 100%;max-height: 100%; background: rgb(231, 207, 192);
min-height: 100vh;">
<div id="page-wrap" model="margin: 50px;background: cornflowerblue;">
<h1 model="margin: 0;line-height: 3;text-align: heart;font: 30px/1.4 Georgia, Serif;">Desk</h1>
<desk function="presentation" model="width: 100%;border-collapse: collapse;">
<thead>
<tr>
<th rowspan="2" colspan="1"
model="background: #333;coloration: white;font-weight: daring;padding: 6px;border: 1px stable #ccc;text-align: heart;">
Header</th>
<th rowspan="1" colspan="4"
model="background: #333;coloration: white;font-weight: daring;padding: 6px;border: 1px stable #ccc;text-align: heart;">
Header</th>
<th rowspan="1" colspan="4"
model="background: #333;coloration: white;font-weight: daring;padding: 6px;border: 1px stable #ccc;text-align: heart;">
Header</th>
<th rowspan="1" colspan="2"
model="background: #333;coloration: white;font-weight: daring;padding: 6px;border: 1px stable #ccc;text-align: heart;">
Header</th>
</tr>
<tr>
<th rowspan="2"
model="background: #333;coloration: white;font-weight: daring;padding: 6px;border: 1px stable #ccc;text-align: heart;">
Header</th>
<th rowspan="2"
model="background: #333;coloration: white;font-weight: daring;padding: 6px;border: 1px stable #ccc;text-align: heart;">
Header</th>
<th rowspan="2"
model="background: #333;coloration: white;font-weight: daring;padding: 6px;border: 1px stable #ccc;text-align: heart;">
Header</th>
<th rowspan="2"
model="background: #333;coloration: white;font-weight: daring;padding: 6px;border: 1px stable #ccc;text-align: heart;">
Header</th>
<th rowspan="2"
model="background: #333;coloration: white;font-weight: daring;padding: 6px;border: 1px stable #ccc;text-align: heart;">
Header</th>
<th rowspan="2"
model="background: #333;coloration: white;font-weight: daring;padding: 6px;border: 1px stable #ccc;text-align: heart;">
Header</th>
<th rowspan="2"
model="background: #333;coloration: white;font-weight: daring;padding: 6px;border: 1px stable #ccc;text-align: heart;">
Header</th>
<th rowspan="2"
model="background: #333;coloration: white;font-weight: daring;padding: 6px;border: 1px stable #ccc;text-align: heart;">
Header</th>
<th rowspan="2"
model="background: #333;coloration: white;font-weight: daring;padding: 6px;border: 1px stable #ccc;text-align: heart;">
Header</th>
<th rowspan="2"
model="background: #333;coloration: white;font-weight: daring;padding: 6px;border: 1px stable #ccc;text-align: heart;">
Header</th>
</tr>
</thead>
<tbody>
<!-- Ist Row -->
<tr>
<td model="padding: 6px;border: 1px stable #ccc;text-align: heart;">
<label class="tab-label" for="row1"> (Deliver checkbox right here) Click on Me</label>
</td>
<td model="padding: 6px;border: 1px stable #ccc;text-align: heart;">N/A</td>
<td model="padding: 6px;border: 1px stable #ccc;text-align: heart;">N/A</td>
<td model="padding: 6px;border: 1px stable #ccc;text-align: heart;">N/A</td>
<td model="padding: 6px;border: 1px stable #ccc;text-align: heart;">N/A</td>
<td model="padding: 6px;border: 1px stable #ccc;text-align: heart;">N/A</td>
<td model="padding: 6px;border: 1px stable #ccc;text-align: heart;">N/A</td>
<td model="padding: 6px;border: 1px stable #ccc;text-align: heart;">N/A</td>
<td model="padding: 6px;border: 1px stable #ccc;text-align: heart;">N/A</td>
<td model="padding: 6px;border: 1px stable #ccc;text-align: heart;">N/A</td>
<td model="padding: 6px;border: 1px stable #ccc;text-align: heart;">N/A</td>
</tr>
<!-- Ist accordion -->
<tr>
<td colspan="11" model="border: stable 1px white;text-align: heart;padding: 0;">
<enter id="row1" kind="checkbox">
<div class="tab-content">
<desk function="presentation"
model="border-collapse: collapse;margin: 10px auto;background-color: aqua;">
<thead>
<tr>
<th rowspan="2" colspan="1"
model="background: #333;coloration: white;font-weight: daring;padding: 6px;border: 1px stable #ccc;text-align: heart;">
Header</th>
<th rowspan="1" colspan="4"
model="background: #333;coloration: white;font-weight: daring;padding: 6px;border: 1px stable #ccc;text-align: heart;">
Header</th>
<!-- <th rowspan="1" colspan="4"
model="background: #333;coloration: white;font-weight: daring;padding: 6px;border: 1px stable #ccc;text-align: heart;">
Header</th> -->
<th rowspan="1" colspan="2"
model="background: #333;coloration: white;font-weight: daring;padding: 6px;border: 1px stable #ccc;text-align: heart;">
Header</th>
</tr>
<tr>
<th rowspan="2"
model="background: #333;coloration: white;font-weight: daring;padding: 6px;border: 1px stable #ccc;text-align: heart;">
Header</th>
<th rowspan="2"
model="background: #333;coloration: white;font-weight: daring;padding: 6px;border: 1px stable #ccc;text-align: heart;">
Header</th>
<th rowspan="2"
model="background: #333;coloration: white;font-weight: daring;padding: 6px;border: 1px stable #ccc;text-align: heart;">
Header</th>
<th rowspan="2"
model="background: #333;coloration: white;font-weight: daring;padding: 6px;border: 1px stable #ccc;text-align: heart;">
Header</th>
<!-- <th rowspan="2"
model="background: #333;coloration: white;font-weight: daring;padding: 6px;border: 1px stable #ccc;text-align: heart;">
Header</th>
<th rowspan="2"
model="background: #333;coloration: white;font-weight: daring;padding: 6px;border: 1px stable #ccc;text-align: heart;">
Header</th>
<th rowspan="2"
model="background: #333;coloration: white;font-weight: daring;padding: 6px;border: 1px stable #ccc;text-align: heart;">
Header</th>
<th rowspan="2"
model="background: #333;coloration: white;font-weight: daring;padding: 6px;border: 1px stable #ccc;text-align: heart;">
Header</th> -->
<th rowspan="2"
model="background: #333;coloration: white;font-weight: daring;padding: 6px;border: 1px stable #ccc;text-align: heart;">
Header</th>
<th rowspan="2"
model="background: #333;coloration: white;font-weight: daring;padding: 6px;border: 1px stable #ccc;text-align: heart;">
Header</th>
</tr>
</thead>
<tr>
<td model="padding: 6px;border: 1px stable #ccc;text-align: heart;">N/A
</td>
<td model="padding: 6px;border: 1px stable #ccc;text-align: heart;">N/A
</td>
<td model="padding: 6px;border: 1px stable #ccc;text-align: heart;">N/A
</td>
<td model="padding: 6px;border: 1px stable #ccc;text-align: heart;">N/A
</td>
<td model="padding: 6px;border: 1px stable #ccc;text-align: heart;">N/A
</td>
<td model="padding: 6px;border: 1px stable #ccc;text-align: heart;">N/A
</td>
<td model="padding: 6px;border: 1px stable #ccc;text-align: heart;">N/A
</td>
<!-- <td model="padding: 6px;border: 1px stable #ccc;text-align: heart;">Athens</td>
<td model="padding: 6px;border: 1px stable #ccc;text-align: heart;">N/A</td>
<td model="padding: 6px;border: 1px stable #ccc;text-align: heart;">Edlund, Ben
(July 1996).</td>
<td model="padding: 6px;border: 1px stable #ccc;text-align: heart;">N/A</td> -->
</tr>
</desk>
</div>
</td>
</tr>
<!-- 2nd Row -->
<tr>
<td model="padding: 6px;border: 1px stable #ccc;text-align: heart;">
<label class="tab-label" for="row2">Click on Me</label>
</td>
<td model="padding: 6px;border: 1px stable #ccc;text-align: heart;">N/A</td>
<td model="padding: 6px;border: 1px stable #ccc;text-align: heart;">N/A</td>
<td model="padding: 6px;border: 1px stable #ccc;text-align: heart;">N/A</td>
<td model="padding: 6px;border: 1px stable #ccc;text-align: heart;">N/A</td>
<td model="padding: 6px;border: 1px stable #ccc;text-align: heart;">N/A</td>
<td model="padding: 6px;border: 1px stable #ccc;text-align: heart;">N/A</td>
<td model="padding: 6px;border: 1px stable #ccc;text-align: heart;">N/A</td>
<td model="padding: 6px;border: 1px stable #ccc;text-align: heart;">N/A</td>
<td model="padding: 6px;border: 1px stable #ccc;text-align: heart;">N/A</td>
<td model="padding: 6px;border: 1px stable #ccc;text-align: heart;">N/A</td>
</tr>
<!-- 2nd accordion -->
<tr>
<td colspan="11" model="border: stable 1px white;text-align: heart;padding: 0;">
<enter id="row2" kind="checkbox">
<div class="tab-content">
<desk function="presentation"
model="border-collapse: collapse;margin: 10px auto;background-color: aqua;">
<thead>
<tr>
<th rowspan="2" colspan="1"
model="background: #333;coloration: white;font-weight: daring;padding: 6px;border: 1px stable #ccc;text-align: heart;">
Header</th>
<th rowspan="1" colspan="4"
model="background: #333;coloration: white;font-weight: daring;padding: 6px;border: 1px stable #ccc;text-align: heart;">
Header</th>
<!-- <th rowspan="1" colspan="4"
model="background: #333;coloration: white;font-weight: daring;padding: 6px;border: 1px stable #ccc;text-align: heart;">
Header</th> -->
<th rowspan="1" colspan="2"
model="background: #333;coloration: white;font-weight: daring;padding: 6px;border: 1px stable #ccc;text-align: heart;">
Header</th>
</tr>
<tr>
<th rowspan="2"
model="background: #333;coloration: white;font-weight: daring;padding: 6px;border: 1px stable #ccc;text-align: heart;">
Header</th>
<th rowspan="2"
model="background: #333;coloration: white;font-weight: daring;padding: 6px;border: 1px stable #ccc;text-align: heart;">
Header</th>
<th rowspan="2"
model="background: #333;coloration: white;font-weight: daring;padding: 6px;border: 1px stable #ccc;text-align: heart;">
Header</th>
<th rowspan="2"
model="background: #333;coloration: white;font-weight: daring;padding: 6px;border: 1px stable #ccc;text-align: heart;">
Header</th>
<th rowspan="2"
model="background: #333;coloration: white;font-weight: daring;padding: 6px;border: 1px stable #ccc;text-align: heart;">
Header</th>
<th rowspan="2"
model="background: #333;coloration: white;font-weight: daring;padding: 6px;border: 1px stable #ccc;text-align: heart;">
Header</th>
</tr>
</thead>
<tr>
<td model="padding: 6px;border: 1px stable #ccc;text-align: heart;">N/A
</td>
<td model="padding: 6px;border: 1px stable #ccc;text-align: heart;">N/A
</td>
<td model="padding: 6px;border: 1px stable #ccc;text-align: heart;">N/A
</td>
<td model="padding: 6px;border: 1px stable #ccc;text-align: heart;">N/A
</td>
<td model="padding: 6px;border: 1px stable #ccc;text-align: heart;">N/A
</td>
<td model="padding: 6px;border: 1px stable #ccc;text-align: heart;">N/A
</td>
<td model="padding: 6px;border: 1px stable #ccc;text-align: heart;">N/A
</td>
</tr>
</desk>
</div>
</td>
</tr>
</tbody>
</desk>
</div>
</physique>
</html>
lang-html
