A simple jQuery Accordion with unlimited nesting

A simple jQuery Accordion with unlimited nesting.markdown

A simple jQuery Accordion with unlimited nesting

A Pen by Brenden Palmer on CodePen.

License.

index.html

<h1>A Cool Accordion</h1>
<p>You could simply toggle the .show class (if display: block is uncommented in the CSS) in JavaScript, but you'll lose the animation.</p>
<ul class="accordion">
  <li>
    <a class="toggle" href="javascript:void(0);">Item 1</a>
    <ul class="inner">
      <li>Option 1</li>
      <li>Option 2</li>
      <li>Option 3</li>
    </ul>
  </li>
  <li>
    <a class="toggle" href="javascript:void(0);">Item 2</a>
    <ul class="inner">
      <li>Option 1</li>
      <li>Option 2</li>
      <li>Option 3</li>
    </ul>
  </li>
  <li>
    <a class="toggle" href="javascript:void(0);">Item 3</a>
    <ul class="inner">
      <li>
        <a href="#" class="toggle">Open Inner</a>
        <div class="inner">
          Any<br>Element<br>Can<br>Be<br>Here...
        </div>
      </li>
      <li>
        <a href="#" class="toggle">Open Inner #2</a>
        <div class="inner">Auto closes too...</div>
      </li>
      <li>Option 3</li>
    </ul>
  </li>
  <li>
    <a class="toggle" href="javascript:void(0);">Item 4</a>
    <ul class="inner">
      <li>
        <a href="#" class="toggle">Technically any number of nested elems</a>
        <ul class="inner">
          <li>
            <a href="#" class="toggle">Again...</a>
            <div class="inner">Interesting stuff... As long as the inner element has inner as one of its classes then it will be toggled.</div>
          </li>
        </ul>
      </li>
      <li>Option 2</li>
      <li>Option 3</li>
    </ul>
  </li>
</ul>

script.js

$('.toggle').click(function(e) {
  	e.preventDefault();
    var $this = $(this);
    if ($this.next().hasClass('show')) {
        $this.next().removeClass('show');
        $this.next().slideUp(350);
    } else {
        $this.parent().parent().find('li .inner').removeClass('show');
        $this.parent().parent().find('li .inner').slideUp(350);
        $this.next().toggleClass('show');
        $this.next().slideToggle(350);
    }
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@import url('http://fonts.googleapis.com/css?family=Pacifico|Open+Sans:300,400,600');
* {
    box-sizing: border-box;
    font-family: 'Open Sans',sans-serif;
    font-weight: 300;
}
a {
    text-decoration: none;
    color: inherit;
}
p {
    font-size:1.1em;
    margin-bottom: 2em;
}
body {
    width: 40%;
    min-width: 300px;
    max-width: 400px;
    margin: 1.5em auto;
    color: #333;
}
h1 {
    font-family: 'Pacifico',cursive;
    font-weight: 400;
    font-size: 2.5em;
}
ul {
    list-style: none;
    padding: 0;
    .inner {
        padding-left: 1em;
        overflow: hidden;
        display: none;
        &.show {
          /*display: block;*/
        }
    }
    li {
        margin: .5em 0;
        a.toggle {
            width: 100%;
            display: block;
            background: rgba(0,0,0,0.78);
            color: #fefefe;
            padding: .75em;
            border-radius: 0.15em;
            transition: background .3s ease;
            &:hover {
                background: rgba(0,0,0,0.9);
            }
        }
    }
}