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'>


<p>
  For each item, click the "View" button:
</p>

<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>
</div>

<p>
  This content exists outside the accordion container.
</p>

CSS

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

.accordion {
  margin: 20px 0px;
}

.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;
}

.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(index) {
    $(this).addClass(itemHeaderClass);
    $(this).nextUntil(itemHeader).andSelf().wrapAll(itemWrapperHTML).wrapAll("<div class='inner'/>");
    $(this).nextUntil(itemHeader).wrapAll(itemContentHTML);
  });

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

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