Simple Content Accordion

[email protected]

by Ryan Brackett

HTML

<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,300,400italic,600' rel='stylesheet' type='text/css'>




<div class="accordion">

  <h2>First item</h2>

  <ul>
    <li>This is a first list item</li>
    <li>This is a second list item</li>
    <li>This is a third list item</li>
  </ul>


  <h3>Second item</h3>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
  <ul>
    <li>This is a first list item</li>
    <li>This is a second list item</li>
    <li>This is a third list item</li>
  </ul>

  <h3>Third item</h3>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
  <ul>
    <li>This is a first list item</li>
    <li>This is a second list item</li>
    <li>This is a third list item</li>
  </ul>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
  <h3>Fourth item</h3>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
  <ul>
    <li>This is a first list item</li>
    <li>This is a second list item</li>
    <li>This is a third list item</li>
  </ul>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex...

CSS

body {
  background: white;
  font-family: 'Open Sans', arial;
  margin: 0px;
  padding: 20px;
  line-height: 1.6em;
  font-size: 100%;
}

.accordion {
  margin-bottom: 20px;
}

.accordion * {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.accordion .accordion-item-header {
  margin: 0px;
  padding: 0px;
  font-weight: 600;
  font-size: 110%;
  padding-right: 60px;
  color: black;
  cursor: pointer;
}

.accordion .accordion-item {
  margin-bottom: 10px;
}

.accordion .accordion-item .inner {
  background: #f0f0f0;
  padding: 30px;
  border-radius: 3px;
  /* border: 2px solid #dedede; */
  -webkit-transition: all .1s ease-in-out;
  -moz-transition: all .1s ease-in-out;
  -ms-transition: all .1s ease-in-out;
  -o-transition: all .1s ease-in-out;
  transition: all .1s ease-in-out;
}

.accordion .accordion-item ul li {
  margin-bottom: 5px;
}

.accordion .accordion-item .accordion-content {
  margin-top: 20px;
  display: none;
}

.accordion .accordion-item .accordion-control {
  float: right;
  cursor: pointer;
  font-size: 90%;
  font-weight: 600;
  color: #c75c1c;
  text-decoration: none;
  position: relative;
  -webkit-transition: all .1s ease-in-out;
  -moz-transition: all .1s ease-in-out;
  -ms-transition: all .1s ease-in-out;
  -o-transition: all .1s ease-in-out;
  transition: all .1s ease-in-out;
  padding: 0px;
}

.accordion .accordion-item.active .inner {
  background: #f7f7f7;
}

.accordion .accordion-item.active .accordion-content {
  display: block;
}

.accordion .accordion-item.active .accordion-control {
  color: #a7a7a7;
}

JavaScript

var itemHeader = $(".accordion *:header"),
  itemHeaderClass = "accordion-item-header",
  itemWrapperHTML = "<div class='accordion-item'/>",
  itemContentClass = "accordion-content",
  itemContentHTML = "<div class='" + itemContentClass + "'></div>",
  itemControlClass = "accordion-control",
  itemControlContent = "View",
  itemControlHTML = "<div class='" + itemControlClass + "'>" + itemControlContent + "</div>";

$(itemHeader).each(
  function() {
    $(this).addClass(itemHeaderClass);
    $(this).nextUntil(itemHeader).andSelf().wrapAll(itemWrapperHTML).wrapAll("<div class='inner'/>");
    $(this).nextUntil(itemHeader).wrapAll(itemContentHTML);
  });

$("." + itemContentClass).each(
  function() {
    $(this).parent().prepend(itemControlHTML);
    $(this).parent().addClass("content");
  });

$("." + itemControlClass).click(function() {
  $(this).parents().eq(1).toggleClass("active");
});
$("." + itemHeaderClass).click(function() {
  $(this).parents().eq(1).toggleClass("active");
});