My accordion collapsible panel is working perfectly. As you can see, the first panel is not working, whereas the second one isn’t working perfectly. The difference between these two is not something major. I have added schema markup in the first panel, but after that, it’s not expanding over click. I want the panel to be expandable along with the schema markup and need help with that.
<style>
.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;
}
</style> <div class="servive-info" itemscope="" itemtype="https://schema.org/FAQPage">
<div class="accordion" >
<input type="checkbox" name="collapse" 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 class="content" itemscope="" itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
<p itemprop="text">My name is Adam.</p>
</div>
</div>
</div>
<div class="accordion">
<input type="checkbox" name="collapse2" id="handle2">
<h2 class="handle">
<label for="handle2">2. What's your hobby?</label>
</h2>
<div class="content">
<p>Playing outdoor sports.</p>.
</div>
</div>
</div>
2
Answers
Adding that schema map broke the accordian because it put the
div.contentin a different scope than what the CSS selector that is supposed to be targeting it.Specifically, the following two CSS selectors/definitions.
It is looking for a
div.contentthat is a sibling to the input checkbox, and it is in the second accordion… but in the first accordion it isn’t because it’s in a scope of a different div element. Changing those two CSS selectors to the followingFixes your issue. Notice the added
div>in front of.content. Updates the selector to grab thediv.contentin the updated HTML structure.When styling the handle class in css, you used .accordion .handle, which says (an element with the handle class that exists in the accordion class), but there is a div between these two elements (.accordion ), which prevents styling the handle class.
debuged code: