jQuery Accordion

by James Connolly

HTML

<form>
  <div class="form-section-title">
    <span class="form-step">1</span>
    <h2 class="h3"><span>Your Home</span></h2>
  </div>
  <div class="form-section-content">
    <p>Today technology has created a world of dazzling progress, growing disparities of wealth and poverty, and looming threats to the environment. Technology: A World History offers an illuminating backdrop to our present moment--a brilliant history of invention around the globe. Historian Daniel R. Headrick ranges from the Stone Age and the beginnings of agriculture to the Industrial Revolution and the electronic revolution of the recent past.</p>
  </div>
  <div class="form-section-title">
    <span class="form-step">2</span>
    <h2 class="h3"><span>Your Home</span></h2>
  </div>
  <div class="form-section-content">
    <p>Today technology has created a world of dazzling progress, growing disparities of wealth and poverty, and looming threats to the environment. Technology: A World History offers an illuminating backdrop to our present moment--a brilliant history of invention around the globe. Historian Daniel R. Headrick ranges from the Stone Age and the beginnings of agriculture to the Industrial Revolution and the electronic revolution of the recent past.</p>
  </div>
  <div class="form-section-title">
    <span class="form-step">3</span>
    <h2 class="h3"><span>Your Home</span></h2>
  </div>
  <div class="form-section-content">
    <p>Today technology has created a world of dazzling progress, growing disparities of wealth and poverty, and looming threats to the environment. Technology: A World History offers an illuminating backdrop to our present moment--a brilliant history of invention around the globe. Historian Daniel R. Headrick ranges from the Stone Age and the beginnings of agriculture to the Industrial Revolution and the electronic revolution of the recent past.</p>
  </div>
  <div class="form-section-title">
    <span class="form-step">4</span>
    <h2 class="h3"><span>Your...

SCSS

body {
  padding: 1em;
}

.form-section-title {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 25px 15px;
  border-radius: 10px;
  background: gray;
}

.form-section-title h2 {
  margin: 0;
  padding: 0;
}

.form-step {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 24px;
  height: 24px;
  background: #000;
  color: #fff;
  text-align: center;
  border-radius: 50%;
  margin-right: 15px;
}

.form-section-content {
  padding: 10px;
  margin: 0;
  overflow: hidden;
}

JavaScript

$(".form-section-content").hide();
$(".form-section-title:first-of-type").next().show();

$(".form-section-title").click(function () {
  if ($(this).next().is(":hidden")) {
    $(".form-section-title").removeClass("active").next().slideUp();
    $(this).toggleClass("active").next().slideDown()
  } else {
    $(".form-section-title").removeClass("active");
    $(this).next().slideUp()
  }
  //return !1
})