JSFiddle - React, Tailwind, and code Playground

by cleo_not_chloe

HTML

<ul id="sectionA">
        <li class="step-heading" id="sectionA-button" contenteditable="false">
          SECTION A</li>

        <li id="step1" class="step">
          <span contenteditable="false">&nbsp;&nbsp;&nbsp;1. </span>This is step 1A.
        </li>

        <li id="step2" class="step">
          <span contenteditable="false">&nbsp;&nbsp;&nbsp;2. </span>This is step 2A.
        </li>

        <li id="step3" class="step">
          <span contenteditable="false">&nbsp;&nbsp;&nbsp;3. </span>This is step 3A.
        </li>
      </ul>

      <ul id="sectionB">
        <li class="step-heading" id="sectionB-button" contenteditable="false">
          SECTION B
        </li>

        <li id="step1b" class="step">
          <span contenteditable="false">&nbsp;&nbsp;&nbsp;1. </span>This is step 1B.
        </li>

        <li id="step2b" class="step">
          <span contenteditable="false">&nbsp;&nbsp;&nbsp;2. </span>This is step 2B.
        </li>

        <li id="step3b" class="step">
          <span contenteditable="false">&nbsp;&nbsp;&nbsp;3. </span>This is step 3B.
        </li>
      </ul>

      <ul id="sectionC">
        <li class="step-heading" id="sectionC-button" contenteditable="false">
          SECTION C
        </li>

        <li id="step0c" class="subtitle">
          <span style="font-style: italic;">subtitle</span>
        </li>

        <li id="step1c" class="step">
          <span contenteditable="false">1. </span>This is step 1C.
        </li>

        <li id="step2c" class="step">
          <span contenteditable="false">2. </span>This is step 2C.
        </li>

        <li id="step3c" class="step">
          <span contenteditable="false">3. </span>This is step 3C.
        </li>
      </ul>
      
      <button class="next" class="show">
        <i>NEXT STEP</i>
      </button>

CSS

.step,
.next,
.step-heading {
  font-family: 'Source Sans Pro', sans-serif;
}

.step {
  list-style-type: none;
  font-weight: 200;
  font-size: 1.5em;
  line-height: 1.5em;
  cursor: pointer;
  text-indent: -1.5em;
  padding-left: 0;
  margin-top: 10px;
  display: block;
}

.step-heading {
  font-weight: 400;
  cursor: pointer;
  display: block;
  text-indent: -25px;
}

#sectionA,
#sectionB {
  width: 50vw;
  position: relative;
}

#sectionB .step {
  display: none;
}

#sectionC .step {
  display: none;
}

.subtitle {
  display: none;
}

.bold {
  font-weight: 400;
}

/* CLEAR & NEXT BUTTONS */

.next {
  border: none;
  color: white;
  font-size: 2.5em;
  letter-spacing: 1px;
  font-style: italic;
  height: 70px;
  width: 231px;
  right: 20px;
  position: fixed;
  bottom: 20px;
  border-radius: 5px;
  cursor: pointer;
  outline: none;
}

.next {
  background-color: #d3a536;
}

.show {
  visibility: visible;
}

JavaScript

// To bold the next step when next button is clicked:
// If there are no bold steps, bold the first one,
//and show clear button
$('.next').click(function(){
  if( $('.bold').length < 1 ){
    $('.step').first().addClass('bold');
  }
  // If there are bold steps, remove the current bold class, add bold class to the step after it
  else {
    $('.bold')
      .removeClass('bold')
        .next('.step')
          .addClass('bold');

    // If there aren't any steps at the end of section A, open section B and bold the first step
    if($('.bold').length < 1){
       $('#sectionB .step').slideToggle(500);
       $('#sectionB .step')
         .first()
           .addClass('bold');
  }