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">1. </span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </li>

        <li id="step2" class="step">
          <span contenteditable="false">2. </span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </li>

        <li id="step3" class="step">
          <span contenteditable="false">3. </span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </li>

        <li id="step4" class="step">
          <span contenteditable="false">4. </span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </li>

        <li id="step5" class="step">
          <span contenteditable="false">5. </span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </li>

        <li id="step6" class="step">
          <span contenteditable="false">6. </span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </li>

        <li id="step7" class="step">
          <span contenteditable="false">7. </span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </li>

        <li id="step8" class="step">
          <span contenteditable="false">8. </span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </li>

        <li id="step9" class="step">
          <span...

CSS

sectionA .step {
  display: none;
}

sectionB .step {
  display: none;
}

sectionC .step {
  display: none;
}

.clear {
  visibility: hidden;
}

.bold {
  font-weight: 800;
}

.show {
  visibility: visible;
}

ul {
  list-style-type: none;
}

.step-heading {
  font-size: 2em;
  font-weight: 800;
}

JavaScript

// Open and close sections
$('#sectionA-button').click(function() {
  $('#sectionA .step').slideToggle(500);
})
$('#sectionB-button').click(function() {
  $('#sectionB .step').slideToggle(500);
})
$('#sectionC-button').click(function() {
  $('#sectionC .step').slideToggle(500);
})

// Bold steps when they're clicked on
$('.step').click(function(){
  $('.bold').removeClass('bold');
  $(this).addClass('bold');
  // Show clear button
  $('.clear').addClass('show');
  
// Bold steps when next button is clicked
$('.next').click(function(){
	// If there are no bold steps, bold the first one,
  if( $('.bold').length < 1 ){
    $('.step').first().addClass('bold');
    // Show clear button
    $('.clear').addClass('show');
  }
  // 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');
  }
}

// To remove bold class from all steps
$('.clear').click(function(){
  $('.bold').removeClass('bold');
  $('.clear').removeClass('show');
  $('.border').removeClass('border');
});