My initial intention was to develop accordion tabs using radio buttons. The idea was that the first tab would be checked by default, and clicking on another tab would automatically close the one currently open, creating a smooth transition between tabs. However, despite my efforts, I encountered an issue with my code. While I am able to select the radio buttons, the corresponding text does not appear as intended.
I am aware that using IDs could potentially resolve this issue, but unfortunately, due to restrictions within my system, I am unable to implement IDs in my code. Additionally, both PHP and JavaScript functionalities are disabled on my webpage. Given these constraints, I am left wondering if there is any alternative workaround to make the code work without relying on IDs.
.acc_outer {
height: auto;
width: 550px;
position: relative;
display: inline-block;
background-color: #f6f6f6;
padding: 10px;
border-radius: 5px;
border: 1px solid #8da8a5;
}
.acc_label {
cursor: pointer;
display: block;
text-align: left;
padding: 10px 15px;
font-weight: 700;
border-radius: 5px;
margin-bottom: 3px;
background-color: #909f9d;
color: #f6f6f6;
font-size: 20px;
text-shadow: 0px 0px 1px #595959;
}
.acc_label:hover {
background-color: #a1b1ae;
}
.acc_input:checked+.acc_label {
background-color: #a1b1ae;
}
/*.acc_input {
display: none;
}*/
.acc_txt {
color: #595959;
text-align: justify;
height: 0;
overflow: hidden;
position: relative;
opacity: 0;
padding: 5px 10px;
}
.acc_outer .acc_input:checked~.acc_txt {
height: auto;
opacity: 1;
}<center>
<div class="acc_outer">
<div class="acc_div">
<label class="acc_label">
<input class = "acc_input" type = "radio" name = "input" checked = "checked">
Label1</label>
<div class="acc_txt">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</div>
</div>
<div class="">
<label class="acc_label">
<input class = "acc_input" type = "radio" name = "input">
Label2</label>
<div class="acc_txt">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</div>
</div>
</div>
</center>