jQuery Accordion

by John Doe

HTML

<div class="ex-content">
  <div id="xac107" class="wrapper elegant">
    <h3 class="trigger">
      <span> Investigationes. Legunt dignissim mirum</span>
    </h3>
    <div class="container" style="display: none; ">
      <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>
    <h3 class="trigger">
      <span>Euismod quinta ut dolor</span>
    </h3>
    <div class="container" style="display: none; ">
      <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>
    <h3 class="trigger">
      <span>commodo vel blandit accumsan</span>
    </h3>
    <div class="container" style="display: none; ">
      <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>
    <h3 class="trigger">
      <span>Facilisis nostrud typi enim processus quinta</span>
    </h3>
    <div...

SCSS

html {
  font-family: ProximaNova,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size: 15px;
  font-weight: normal;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  background: #fff;
  color: #666;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  padding: 1em;
}

.wrapper {
  width: 100%;
}

.trigger {
  padding: 6px 0;
  margin: 0;

  span {
    color: #4a4a4a;
    text-decoration: none;
    display: block;
    padding: 0 10px;
    cursor: pointer;

    &:hover, &:focus, &:active {
      outline: none;
    }
  }
}

.container {
  padding: 10px;
  margin: 0;
  overflow: hidden;
  clear: both;

  img {
    margin: 0 10px 10px 0;
    float: left;
  }
}

/*Handheld Devices*/
@media only screen and (max-width: 479px) {
  .wrapper {
    max-width: 390px;
    width: 100%;
  }
}

/*Tablet*/
@media only screen and (min-width: 478px) and (max-width: 735px) {
  .wrapper {
    max-width: 730px;
    width: 100%;
  }
}

@media only screen and (min-width: 736px) and (max-width: 985px) {
  .wrapper {
    max-width: 800px;
    width: 100%;
  }
}

.basic {
  &.wrapper {
    border: 1px solid #eeeeee;
  }

  .trigger, .container {
    border-bottom: 1px solid #eeeeee;
  }

  .trigger.active {
    background-color: #f5f5f5;
  }
}

.line .trigger {
  border-bottom: 1px solid #eeeeee;
}

.elegant {
  .trigger {
    background-color: #ffffff;
    background-image: -webkit-linear-gradient(top, #ffffff, #eaeaea);
    background-image: linear-gradient(top, #ffffff, #eaeaea);
    box-shadow: 0 0 0 1px rgba(155, 155, 155, 0.3), 1px 0 0 0 rgba(255, 255, 255, 0.9) inset, 0 2px 2px rgba(0, 0, 0, 0.1);
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
    color: #777;

    &:hover {
      background: url(../images/arrow-down.png) no-repeat 98% 50%;
    }

    &.active {
      background: #c6e1ec;

      &:hover {
        background: #c6e1ec...

JavaScript

$(".container").hide();
$(".trigger").click(function() {
  if ($(this).next().is(":hidden")) {
    $(".trigger").removeClass("active").next().slideUp();
    $(this).toggleClass("active").next().slideDown()
  } else {
    $(".trigger").removeClass("active");
    $(this).next().slideUp()
  }
  return !1
})