University of Georgia School of Law's Covid FAQ code.

readme.md

How to do an FAQ

Hello! My name is Victor, I am a web developer at the University of Georgia School of Law. In case it is handy, my email address is: victor.lawrence@uga.edu

Big note: All of the choices I made were to make this work with the Drupal 7 CMS. We are in the process of upgrading to Drupal 8 as I write this.

Please get in touch if you need some help with any of this code here.

CSS

The Stylesheet code was written in SASS using the BEM methodology.

https://sass-lang.com/

https://getbem.com/

HTML

<h2>FAQ Section Name</h2>
<div class="faq-list">
    <div class="faq-list__item">
        <button class="faq-list__question">
          This is the first question.
        </button>
        <div class="faq-list__answer">
            <p>Oh, is this the first answer?</p>
            <p>Well, things are looking up!</p>
        </div>
    </div>
    <div class="faq-list__item">
        <button class="faq-list__question">
          Wow, a second question?
        </button>
        <div class="faq-list__answer">
            <p>Sure, a second answer too!</p>
        </div>
    </div>
    <div class="faq-list__item">
        <button class="faq-list__question">
          What about a third question?
        </button>
        <div class="faq-list__answer">
            <p>How about a third answer?</p>
        </div>
    </div>
</div>

When it needs to be updated, the HTML is manually edited using Drupal 7's built-in content editor, ensuring that its text box is set to FULL HTML in order to keep the class names of the individual HTML elements. Drupal will strip them otherwise. Nothing fancy here. You'll notice I used button elements for the questions, that's to ensure that keyboards can easily tab over to the question they want.

Javascript

This is all just vanilla javascript, it uses ARIA attributes as a way to trigger the show and hide states of the answers, hopefully this also makes things nicer for those that are in need of accomidation. The actual showing and hiding of items is handled by the CSS.

So long as the faq.js script is loaded after the page content is rendered (I added the script tag to the bottom of the Body tag, just before the closing </body> tag in our template.) it will search the document for any elements on the page that have the class .faq-list__item. if it finds any, it automatically sets up the show and hide logic that we need. If it doesn't find any, it does nothing.

_faq.scss

// these are my Development Clown Colors, please change them to match your school's brand guide.

$unpressedBackgroundColor: gray;
$unpressedHoverBackgroundColor: gold;
$unpressedTextColor: black;

$pressedBackgroundColor: red;
$pressedHoverBackgroundColor: blue;
$pressedTextColor: white;

$answerBackgroundColor: green;
$answerTextColor: white;

.faq-list{
  &__item{
    margin: 0.25rem;
  }
  &__question{
    // this is secretly a button element.
    // we don't want it to look like a button element.
    border: none;
    display: block;
    padding: 0.5rem;
    font-size: 1rem;
    width: 100%;
    text-align: left;
    &[aria-pressed='true']{
      background-color: $pressedBackgroundColor;
      color: $pressedTextColor;
      &:hover{
        background-color: $pressedHoverBackgroundColor;
      }
    }
    &[aria-pressed='false']{
      background-color: $unpressedBackgroundColor;
      &:hover{
        background-color: $unpressedHoverBackgroundColor;
      }
    }
  }
  &__answer{
    padding: 1rem;
    background-color: $answerBackgroundColor;
    color: $answerTextColor;
    > p:first-of-type{
      margin-top: 0;
    }
    > p:last-of-type{
      margin-bottom: 0;
    }
    > ul{
      padding-left: 1.5rem;
    }
    > ul:first-of-type{
      margin-top: 0;
    }
    > ul:last-of-type{
      margin-bottom: 0;
    }
    &[aria-hidden="true"]{
      display: none;
    }
    &[aria-hidden="false"]{
      display: block;
    }
  }
}

faq.js

function setupFAQItem (itemElm, questionButton, answerDiv) {

  function isHidden(){
    return answerDiv.getAttribute('aria-hidden') === 'true'
  }
  
  function hideAnswer(){    
    questionButton.setAttribute('aria-pressed', 'false')
    answerDiv.setAttribute('aria-hidden', 'true')
  }

  function showAnswer(){
    answerDiv.setAttribute('aria-hidden', 'false')
    questionButton.setAttribute('aria-pressed', 'true')
  }

  function toggleAnswer(){
    if(isHidden()){
      showAnswer()
    }else{
      hideAnswer()
    }
  }

  // here are the default paramaters we add to our items.
  itemElm.setAttribute('aria-expanded', 'false')
  questionButton.setAttribute('aria-pressed', 'false')
  questionButton.addEventListener('click', function(){
    toggleAnswer()
  })

  // all answers are hidden by default.
  hideAnswer()
}

function setupFAQElements(){
  const itemElements = document.querySelectorAll('.faq-list__item')

  for(const itemElm of itemElements){
    let questionButton = null
    let answerDiv = null
  
    for(const child of itemElm.children){
      if(child.classList.contains('faq-list__answer')){
        answerDiv = child
      }else if (child.classList.contains('faq-list__question')){
        questionButton = child
      }
    }
  
    if(questionButton && answerDiv){
      setupFAQItem(
        itemElm,
        questionButton,
        answerDiv
      )
    }
  }
  
}

setupFAQElements()

faqSectionExample.html

<h2>Before you come to campus</h2>
<div class="faq-list">
    <div class="faq-list__item">
        <button class="faq-list__question">What should I do each day before coming to school?</button>
        <div class="faq-list__answer">
            <p>Take your temperature, self-monitor your health and use the University’s screening and notification tool called DawgCheck. Additional information on this tool is forthcoming.</p>
            <p>Also, make sure you have your mask or face covering before coming to campus!</p>
        </div>
    </div>
    <div class="faq-list__item">
        <button class="faq-list__question">What are the symptoms of COVID-19?</button>
        <div class="faq-list__answer">
            <p>According to the Centers for Disease Control and Prevention (“CDC”), symptoms include fever or chills, cough, shortness of breath or difficulty breathing, fatigue, muscle or body aches, headache, new loss of taste or smell, sore throat, congestion or runny nose, nausea or vomiting, and diarrhea.</p>
        </div>
    </div>
    <div class="faq-list__item">
        <button class="faq-list__question">What should I do if I have a fever, symptoms of COVID-19 or otherwise feel sick?</button>
        <div class="faq-list__answer">
            <p>Stay home and, depending on your condition, contact the University Health Center or your personal health care provider (Guidance from the CDC can be found here: <a href="https://www.cdc.gov/coronavirus/2019-ncov/if-you-are-sick/steps-when-sick.html">https://www.cdc.gov/coronavirus/2019-ncov/if-you-are-sick/steps-when-sick.html</a> ). </p>
            <p>If your health allows, attend class virtually (and let your professor(s) know).  If your health does not allow, that’s ok – just let your professors (and Casey Graham) know.  We are adjusting the attendance policy (details forthcoming), and those adjustments will reflect the need to prioritize health and safety.</p>
        </div>
    </div>
</div>