My collapsible accordion panel is functioning correctly. I have noticed that the first panel is not expanding upon click, while the second one is not working perfectly. The difference between the two panels is not significant. I have added schema markup to the first panel, but it seems to be interfering with the expand functionality. I am seeking assistance in making the panel expandable while retaining the schema markup.
.servive-info {
padding: 10px 20px;
background: #ebf6f5;
border: 1px solid #dae9f3;
border-radius: 7px;
margin-top: 25px;
overflow: auto;
color: #333333d9 !important;
}
.servive-info p {
font-family: "Lato", sans-serif;
font-size: 16px;
letter-spacing: 0.5px;
line-height: 1.5em;
color: #333;
font-weight: 400;
}
.faqtitle {
font-weight: 700;
font-size: 24px;
color: black;
padding: 15px 15px 0;
font-family: Sans-Serif;
border: none;
}
.accordion>input[type="checkbox"] {
position: absolute;
left: -100vw;
}
.accordion .content {
overflow-y: hidden;
height: 0;
}
.accordion>input[type="checkbox"]:checked~.content {
height: auto;
overflow: visible;
}
.accordion label {
display: block;
}
.accordion {
border-bottom: 2px solid #fff;
padding: 15px 0px 8px 0px;
overflow: hidden;
font-size: 15px;
letter-spacing: 0.5px;
line-height: 1.7;
}
.accordion>input[type="checkbox"]:checked~.content {
padding: 10px 15px 0px 15px;
border: 0px solid #e8e8e8;
border-top: 0;
border-top: 2px solid #004287;
margin-top: 10px;
}
.accordion .handle {
margin: 0;
font-size: 18px;
line-height: 1.5em;
border-left: 2px solid #c82333;
margin-right: 10px;
}
.accordion label {
color: #000;
cursor: pointer;
padding: 10px 15px;
}
.accordion label:hover,
.accordion label:focus {
background: none;
}
.accordion .handle label:before {
content: '';
width: 8px;
height: 8px;
border-style: solid;
border-width: 2px 2px 0 0;
border-color: #FBBC05;
display: inline;
margin-left: 10px;
vertical-align: middle;
text-align: center;
float: right;
transform: rotate(45deg);
margin-top: 6px;
}
.accordion>input[type="checkbox"]:checked~.handle label:before {
content: "";
transform: rotate(135deg);
}
.accordion:last-child {
margin-bottom: 1em;
}<div class="servive-info" itemscope="" itemtype="https://schema.org/FAQPage">
<div class="accordion">
<input type="checkbox" name="collapse1" id="handle1" checked="checked">
<div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
<h2 class="handle" itemprop="name">
<label for="handle1">1. What is your name?</label>
</h2>
<div itemscope="" itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
<div class="content" itemprop="text">
<p>My name is Adam.</p>
</div>
</div>
</div>
</div>
<div class="accordion">
<input type="checkbox" name="collapse2" id="handle2">
<div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
<h2 class="handle" itemprop="name">
<label for="handle2">2. What's your hobby?</label>
</h2>
<div class="content" itemscope="" itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
<p itemprop="text">Playing outdoor sports.</p>
</div>
</div>
</div>
</div>