gOMNLJw

gomnljw.markdown

gOMNLJw

A Pen by Sebastián on CodePen.

License.

index.html

<div style="visibility: hidden; position: absolute; width: 0px; height: 0px;">
  <svg xmlns="http://www.w3.org/2000/svg">
    <symbol viewBox="0 0 24 24" id="expand-more">
      <path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/><path d="M0 0h24v24H0z" fill="none"/>
    </symbol>
    <symbol viewBox="0 0 24 24" id="close">
      <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"/>
    </symbol>
  </svg>
</div>

<details>
  <summary>
    Does this product have what I need?
    <svg class="control-icon control-icon-expand" width="24" height="24" role="presentation"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#expand-more" /></svg>
    <svg class="control-icon control-icon-close" width="24" height="24" role="presentation"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close" /></svg>
  </summary>
  <p>Totally. Totally does.</p>
</details>

<details>

  <summary>
    Can I use it all the time?
    <svg class="control-icon control-icon-expand" width="24" height="24" role="presentation"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#expand-more" /></svg>
    <svg class="control-icon control-icon-close" width="24" height="24" role="presentation"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close" /></svg>
  </summary>
  <p>Of course you can, we won't stop you.</p>
</details>

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

style.css

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;700&display=swap');

summary {
  font-family: 'Raleway', sans-serif;
  font-size: 18px;
  display: flex;
  justify-content: space-between;
  align-items: left;
  font-weight: 700;
  cursor: pointer;
}

summary:focus {
  outline: none;
  #font-weight: 900;
}

summary:focus::after {
  content: "";
  height: 100%;
  width: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

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

details {
  font-family: 'Raleway', sans-serif;
  width: 100%;
  min-height: 5px;
  max-width: 700px;
  padding: 45px 70px 45px 45px;
  margin: 0 auto;
  position: relative;
  font-size: 16px;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 10px;
  box-sizing: border-box;
  transition: all .3s;
}

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

details[open] {
  min-height: 50px;
  #background-color: #f6f5f8;
  border-style: solid;
  border-width: medium;
}

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

details p [open]{
  color: #000000;
  font-weight: 900;
}

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

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

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

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