JSFiddle - React, Tailwind, and code Playground

by bowheart

HTML

<!-- Hide/Show Example: -->
<div class="color-match-label interested-in-seint">
  <span class="color-match-text">Are you interested in Seint's Artist Program?</span>
  <label class="color-match-radio-label">
    <input class="color-match-radio" name="seintArtistProgram" value="Yes" type="radio">
    <span class="color-match-radio-text">I'd love to know more!</span>
  </label>
  <label class="color-match-radio-label">
    <input class="color-match-radio" name="seintArtistProgram" value="No" type="radio">
    <span class="color-match-radio-text">Not right now :)</span>
  </label>
</div>
<div class="color-match-label only-show-if-interested-in-seint">
  <div class="color-match-text">Yay! Seint’s Artist program is so dang fun AND rewarding! Learn the basics of the program in just minutes by watching this short overview of the Artist Program below. Want to learn more? Reach out to me:)
  </div>
  <div class="color-match-subtext">
    PRO KIT: $399 - BASIC KIT: $199
  </div>
</div>

CSS

/* hide by default */
.only-show-if-interested-in-seint {
  display: none;
}

JavaScript

// Show the maybeHiddenSection only if they're interested:
const radios = [...document.querySelectorAll('.interested-in-seint input')]
const maybeHiddenSection = document.querySelector('.only-show-if-interested-in-seint')

radios.forEach(radio => {
  radio.addEventListener('change', event => {
  	const isInterested = event.target.value === 'Yes'
    
    maybeHiddenSection.style.display = isInterested ? 'block' : 'none'
  })
})