Simple Accordion #3

by Erik Woods

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<section data-accordion="group">
  <div data-accordion="item-open">
    <div>Option 1 <a data-accordion="link">View</a></div>
    <div data-accordion="content">Content 1</div>
  </div>
  <div data-accordion="item">
    <div>Option 2 <a data-accordion="link">View</a></div>
    <div data-accordion="content">Content 2</div>
  </div>
  <div data-accordion="item">
    <div>Option 3 <a data-accordion="link">View</a></div>
    <div data-accordion="content">Content 3</div>
  </div>
</section>

<footer>
  <p><a href="http://erikwoods.com" target="_blank">Fiddle by Erik Woods</a> | <a href="http://jsfiddle.net/user/erikwoods/fiddles/" target="_blank">Other Fiddles by Erik Woods</a></p>
</footer>

CSS

body {
  background: #e90;
}

[data-accordion="group"] {
  margin: 10px;
}

[data-accordion="link"] {
  cursor: pointer;
  display: inline-block margin: 0 0 4px 0;
  padding: 2px;
  text-decoration: underline;
}

[data-accordion="link"]:hover,
[data-accordion="link"]:focus,
[data-accordion="link"]:active {
  background: rgba(255, 255, 255, 0.6);
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  text-decoration: none;
}

[data-accordion="content"] {
  border: 0 none;
  border-bottom: 1px dotted #4D4D4D;
  margin: 0 0 10px 20px;
}

footer {
  background: #ff0;
  border: 0 none;
  border-top: 1px solid #000;
  bottom: 0;
  color: #000;
  padding: 10px;
  position: fixed;
  width: 100%;
}

JavaScript

$('[data-accordion="link"]').on('click', function(e) {
  e.preventDefault();
  var clicked = $(this);

  $('[data-accordion="item-open"] [data-accordion="content"]')
    .slideToggle(500, function() {
      $('[data-accordion="item-open"]').attr('data-accordion', 'item');

      clicked.closest('[data-accordion="item"]')
        .attr('data-accordion', 'item-open')
        .find('[data-accordion="content"]')
        .slideToggle(500, function() {
          adjustAccordion();
        });
    });
});

function adjustAccordion() {
  $('[data-accordion="item-open"] [data-accordion="link"]').hide();
  $('[data-accordion="item"] [data-accordion="content"]').hide();
  $('[data-accordion="item"] [data-accordion="link"]').show();
}

adjustAccordion();