Accordion Collapsible Panel is Not Exanding After Adding Schema Markup

Question

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.

.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>

Answer 1

Adding that schema map broke the accordian because it put the div.content in a different scope than what the CSS selector that is supposed to be targeting it.

Specifically, the following two CSS selectors/definitions.

.accordion>input[type="checkbox"]:checked~.content {
    height: auto;
    overflow: visible;
}

.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;
}

It is looking for a div.content that 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 following

.accordion>input[type="checkbox"]:checked~div>.content {
    height: auto;
    overflow: visible;
}

.accordion>input[type="checkbox"]:checked~div>.content {
    padding: 10px 15px 0px 15px;
    border: 0px solid #e8e8e8;
    border-top: 0;
    border-top: 2px solid #004287;
    margin-top: 10px;
}

Fixes your issue. Notice the added div> in front of .content. Updates the selector to grab the div.content in the updated HTML structure.

UPDATE With your updated HTML structure that you've changed to after this answer, just move that .content class designation one div up.

.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~div>.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~div>.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~div>.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="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 class="content" itemscope="" itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
                    <div 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">
                    <div itemprop="text">
                        <p>Playing outdoor sports.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 2

<div class="accordion">
  <input type="checkbox" name="collapse" id="handle1" checked="checked">
  <div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question"> // *** just remove this div **** <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> // **** end of div ****
</div>

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:

/* Accordion Collapsible Panel Starts */

.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;
}


/* Accordian Collapsible Panel Ends */

<div class="servive-info" itemscope="" itemtype="https://schema.org/FAQPage">
  <div class="accordion">
    <input type="checkbox" name="collapse" id="handle1">
    <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 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>