<style>
details {
  width: 75%;
  min-height: 5px;
  max-width: 700px;
  padding: 45px 70px 45px 45px;
  margin: 0 auto;
  position: relative;
  font-size: 22px;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 15px;
  box-sizing: border-box;
  transition: all .3s;
}

details + details {
  margin-top: 20px;
}

details[open] {
  min-height: 50px;
  background-color: #f6f7f8;
  box-shadow: 2px 2px 20px rgba(0,0,0,.2);
}

details p {
  color: #96999d;
  font-weight: 300;
}

summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 500;
  cursor: pointer;
}

summary:focus {
  outline: none;
  
}

summary:focus::after {
  content: "";
  height: 100%;
  width: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: 0 0 0 5px green;
}

summary::-webkit-details-marker {
  display: none
}

.control-icon {
  fill: green;
  transition: .3s ease;
  pointer-events: none;
}

.control-icon-close {
  display: none;
}

details[open] .control-icon-close {
  display: initial;
  transition: .3s ease;
}

details[open] .control-icon-expand {
  display: none;
}


</style>

<div style="height: 0px; position: absolute; visibility: hidden; width: 0px;">
  <svg xmlns="http://www.w3.org/2000/svg">
    <symbol id="expand-more" viewbox="0 0 24 24">
      <path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"><path d="M0 0h24v24H0z" fill="none">
    </path></path></symbol>
    <symbol id="close" viewbox="0 0 24 24">
      <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"><path d="M0 0h24v24H0z" fill="none">
    </path></path></symbol>
  </svg>
</div>

<details open="">
  <summary>
    What products do you sell in your store?<svg class="control-icon control-icon-expand" height="24" role="presentation" width="24"><use xlink:href="#expand-more" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg><svg class="control-icon control-icon-close" height="24" role="presentation" width="24"><use xlink:href="#close" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg></summary>
  <p>The products we sell in our store are bed linen such as duvets, blankets, sheets and pillows.</p>
</details>

<details>

  <summary>
    Is there a return and refund policy in your store?
    <svg class="control-icon control-icon-expand" height="24" role="presentation" width="24"><use xlink:href="#expand-more" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg>
    <svg class="control-icon control-icon-close" height="24" role="presentation" width="24"><use xlink:href="#close" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg>
  </summary>
  <p>Of course you can, we won't stop you.</p>
</details>

<details>
  <summary>
    Do you have famous brand products?    
    <svg class="control-icon control-icon-expand" height="24" role="presentation" width="24"><use xlink:href="#expand-more" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg>
    <svg class="control-icon control-icon-close" height="24" role="presentation" width="24"><use xlink:href="#close" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg>
  </summary>
  <p>Only your imagination my friend. Go forth!</p>
</details>