.wrapper
  .main-title Shopping Help
  each val, key in ['Your Account', 'Payment & Pricing', 'Returns & Refunds', 'Shipping & Pickup', 'Viewing & Changing Orders']
    input(type='radio', id=`radio${val}`, name='accordion', checked=key===0)
    label(class='item', for=`radio${val}`)
      .title= val
      .content Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis aliquid harum velit sed similique exercitationem, quasi in, nulla quos accusamus nemo vel dolores. Est id sint dolore, deserunt dolorum accusantium.
      

@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&display=swap');

* {
  box-sizing: border-box;
}
html {
  font-size: calc(100vw / 1600 * 100);
  @media (max-width: 768px) {
    font-size: calc(100vw / 768 * 100);
  }
}
body {
  min-height: 100vh;
  padding: 0.5rem;
  font-size: 0.2rem;
  background-color: #bdd6d3;
}
.main-title {
  margin-bottom: 0.5rem;
  text-align: center;
  font-family: 'Abril Fatface', cursive;
  font-size: 0.32rem;
  color: #2e8074;
  display: flex;
  justify-content: center;
  align-items: center;
  // deco lines
  &:before, &:after {
    content: '';
    display: block;
    margin: 0 0.2rem;
    flex: 1;
    border-bottom: 1px solid #2e8074;
  }
}
.wrapper {
  width: 7rem;
  margin: auto;
  font-family: 'Source Sans Pro', sans-serif;
  @media (max-width: 768px) {
    width: auto;
    padding: 0 0.3rem;
  }
}
input[type='radio'] {
  display: none;
  &:checked + .item {
    .title {
      color: #fff;
      border-color: #2e8074;
      background-color: #2e8074;
      &:after {
        transform: rotate(180deg);
      }
    }
    .content {
      // for animation! can use padding or margin here
      margin-top: 0.3rem;
      margin-bottom: 0.3rem;
      // show content
      height: auto;
      opacity: 1;
      visibility: visible;
      transition: all 0.3s, opacity 0.7s; // fade-in slow
    }
  }
}
.item {
  display: block;
  margin-bottom: 0.1rem;
}
.title {
  padding: 0.1rem 0.3rem;
  border-radius: 0.3rem;
  color: #2e8074;
  border: 1px solid;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
  // aligned arrow
  display: flex;
  justify-content: space-between;
  align-items: center;
  // arrow icon
  &:after {
    content: '\25bc';
    display: inline-block;
    font-size: 12px;
  }
}
.content {
  width: 95%;
  margin: 0 auto;
  padding: 0 0.3rem;
  line-height: 1.6;
  color: #2e8074;
  border: 1px solid;
  border-width: 0 1px;
  // default disappear
  height: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s; // fade-out fast 
}

// no js here 😎