FAQ Schema & Drop down list HTML & CSS #Blogger

 Demo:Click here!

<!-- FAQ Schema & Drop down list inside head section css -->

    

    <style>summary {

    font-size: 19px;

    font-weight: 600;

    background-color: #F1F1F1;

    color: #333;

    isolation: isolate;

    padding: 1rem;

    margin-bottom: 1rem;

    box-shadow: -8px -4px 8px 0px #ffffff, 8px 4px 12px 0px #d1d9e6;

    border-radius: 0.25rem;

    text-align: left;

    cursor: pointer;

    position: relative;

}

details &gt; summary::after { position: absolute; content: &quot;+&quot;; right: 20px; } details[open] &gt; summary::after { position: absolute; content: &quot;-&quot;; right: 20px; } details &gt; summary::-webkit-details-marker { display: none; } details[open] summary ~ * { animation: sweep .5s ease-in-out; isolation: isolate; margin-bottom: 1rem; background-color: #EEEEEE; padding: 1rem; } @keyframes sweep { 0% {opacity: 0; margin-top: -10px} 100% {opacity: 1; margin-top: 0px} }

</style>

    

    

    

    

      <!-- FAQ Schema & Drop down list inside post html.  -->

<details>

  <summary>Your heading here </summary>

  <div>

    <p>Your content here</p>

  </div>

</details>