I have used ":focus" pseudo element to expand and collapse a table row. here is the fiddle : https://jsfiddle.net/tcu4jw1n/1/
My question:
Is there a way to retain focus, i.e. keep the hidden table content open, when I do a "search i.e. ctrl+F / cmd+F" using keyboard. The hidden table collapsing on click is fine for me. I cannot use javascript and looking for a CSS only solution.
Thanks in advance.
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" lang="en" xml:lang="en">
<head>
<title></title>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@-ms-viewport {
width: device-width;
}
/* Smartwatch and small phones*/
@media only screen and (max-width: 329px) {
.logoMA {
/* display: none; */
width: 20px;
height: 20px;
}
.headerText {
width: 150px;
}
h1 {
font-size: 7px;
}
#page-wrap {
margin: 0%;
}
}
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 330px) and (max-device-width : 480px) {
.logoMA {
/* display: none; */
width: 30px;
height: 30px;
}
.headerText {
width: 205px;
}
h1 {
font-size: 10px;
}
#page-wrap {
margin: 0%;
}
}
/* bigger screen Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 480px) and (max-device-width : 600px) {
.logoMA {
/* display: none; */
width: 35px;
height: 35px;
}
.headerText {
width: 215px;
}
h1 {
font-size: 11px;
}
#page-wrap {
margin: 0%;
}
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1023px) {
.logoMA {
/* display: none; */
width: 60px;
height: 60px;
}
.headerText {
width: 500px;
}
h1 {
font-size: 13px;
}
#page-wrap {
margin: 0 50px 50px 50px;
}
}
/* Laptop and desktop ----------- */
@media only screen and (min-device-width: 1024px) {
.logoMA {
/* display: none; */
width: 80px;
height: 80px;
}
.headerText {
width: 510px;
}
h1 {
font-size: 28px;
}
#page-wrap {
margin: 0 50px 50px 50px;
}
}
</style>
</head>
<head>
<style>
html,
body {
}
.tab-label {
display: flex;
justify-content: space-between;
padding: 1em;
font-weight: bold;
cursor: pointer;
}
.tab-label:hover {
/* background: #1a252f; */
}
.tab-content {
overflow: hidden;
max-height: 0;
padding: 0 1em;
color: #2c3e50;
/* background: #408874; */
transition: all 1s 0.35s;
/* pointer-events: none; */
}
tr:focus .tab-label {
/* background: #1a252f; */
}
tr:focus .expandIcon {
transform: rotate(-90deg);
/* pointer-events: none; */
}
tr:focus+tr .tab-content {
max-height: 100%;
/* overflow-y: scroll; */
height: auto;
padding: 1em;
border: solid;
transition: all 0.35s;
/* pointer-events: none; */
}
/* style for still rows */
.still-label {
display: flex;
justify-content: space-between;
padding: 1em;
/* background: #2c3e50; */
/* background: #cee0f1; */
font-weight: bold;
text-align: center;
color: rgb(15, 15, 15);
}
</style>
</head>
<body style="margin: 0;padding: 0;min-width: 100%;width: 100%;
max-width: 100%; min-height: 100%; height: 100%;max-height: 100%;min-height: 100vh;">
<div id="page-wrap">
<table align="left" style="width: 100%;padding-top: 50px;">
<tbody>
<tr>
<td>
<div class="appheadingcenter" style="text-align:center;">
<div style="display: inline-block;">
<img src=""
alt="PLz_Enable_Image" class="logoMA"
style="float: left;max-width: 100px;max-height: 100px;border-radius: 10%;">
<div class="headerText"
style="float: left;padding-left: 1em;color: #00356C;margin-bottom: 30px;">
<h1>
<b>My Table </b>
</h1>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<table style="width: 100%;border-collapse: collapse;">
<thead>
<tr>
<th rowspan="2" colspan="1"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="1" colspan="4"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="1" colspan="4"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="1" colspan="2"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
</tr>
<tr>
<th rowspan="2"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="2"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="2"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="2"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="2"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Headern</th>
<th rowspan="2"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="2"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="2"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="2"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="2"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
</tr>
</thead>
<tbody>
<!-- Row 1 -->
<tr tabindex="0">
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">
<label class="tab-label">Item 1 <span class="expandIcon"
style="padding-left: 10px;font-size: 20px;margin: auto 0;">〉</span></label>
<!-- <span class="expandIcon">➝</span> -->
</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">25th Sept, 2022</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">1
</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">0
</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">
20</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">24th Sept, 2022</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">0
</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">1
</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">
25</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">
15</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">
25</td>
</tr>
<!-- Ist accordion -->
<tr tabindex="0">
<td colspan="11" style="border: solid 1px white;text-align: center;padding: 0;">
<div class="tab-content">
<!-- <table style="border-collapse: collapse;margin: 10px auto;background-color: aqua;"> -->
<table style="border-collapse: collapse;margin: 10px auto;">
<thead>
<tr>
<th rowspan="2" colspan="1"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="1" colspan="4"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="1" colspan="2"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
</tr>
<tr>
<th rowspan="2"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Headern</th>
<th rowspan="2"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="2"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="2"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="2"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="2"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
</tr>
</thead>
<tr>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">xstream-1.4.17.jar, netty-codec-http-4.0.27.Final.jar, struts-core-1.3.8.jar, tomcat-embed-core-8.5.11.jar, google-oauth-client-1.27.0.jar, xmlbeans-2.6.0.jar, json-smart-2.3.jar, kafka-clients-2.0.0.jar, mysql-connector-java-5.1.46.jar, dom4j-1.6.1.jar, hazelcast-3.6.7.jar, hazelcast-spring-3.6.7.jar, spring-messaging-4.3.7.RELEASE.jar, springfox-swagger-ui-2.7.0.jar, spring-data-commons-1.12.8.RELEASE.jar, commons-beanutils-1.9.3.jar, quartz-2.2.3.jar, spring-boot-1.4.5.RELEASE.jar, c3p0-0.9.1.1.jar, lucene-queryparser-5.5.2.jar, spring-beans-4.3.30.RELEASE.jar, spring-beans-4.3.7.RELEASE.jar, netty-handler-4.0.27.Final.jar</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">xstream-1.4.17.jar, netty-codec-http-4.0.27.Final.jar, struts-core-1.3.8.jar, tomcat-embed-core-8.5.11.jar, google-oauth-client-1.27.0.jar, xmlbeans-2.6.0.jar, json-smart-2.3.jar, kafka-clients-2.0.0.jar, mysql-connector-java-5.1.46.jar, dom4j-1.6.1.jar, hazelcast-3.6.7.jar, hazelcast-spring-3.6.7.jar, spring-messaging-4.3.7.RELEASE.jar, springfox-swagger-ui-2.7.0.jar, spring-data-commons-1.12.8.RELEASE.jar, commons-beanutils-1.9.3.jar, quartz-2.2.3.jar, spring-boot-1.4.5.RELEASE.jar, c3p0-0.9.1.1.jar, lucene-queryparser-5.5.2.jar, spring-beans-4.3.30.RELEASE.jar, spring-beans-4.3.7.RELEASE.jar, netty-handler-4.0.27.Final.jar, </td>
</tr>
<tr>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
</tr>
<tr>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
</tr>
<tr>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
</tr>
<tr>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
</tr>
<tr>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
</tr>
<tr>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
</tr>
<tr>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
</tr>
</table>
</div>
</td>
</tr>
<!-- Row 10 -->
<tr tabindex="0">
<!-- <td style="padding: 6px;border: 1px solid #ccc;text-align: center;background-color: purple;"> -->
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">
<label class="still-label"> Item 2</label>
</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">26th Sept, 2022</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">10</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">15</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">25</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">22th Sept, 2022</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">0</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">1</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">25</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">25</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">35</td>
</tr>
</tbody>
</table>
</div>
</body>
<!-- partial -->
</html>