Multi Level jQuery Accordion with unlimited nesting

• Item 1
  • Option 1
  • Option 2
  • Option 3
• Item 2
  • Option 1
  • Option 2
  • Option 3
• Item 3
  • Open Inner

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus placerat fringilla. Duis a elit et dolor laoreet volutpat. Aliquam ultrices mauris id mattis imperdiet. Aenean cursus ultrices justo et varius. Suspendisse aliquam orci id dui dapibus

  • Open Inner #2

    Children will automatically close upon closing its parent.

  • Option 3
• Item 4
  • Technically any number of nested elements
    • Another nested element

      As long as the inner element has inner as one of its classes then it will be toggled.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus placerat fringilla. Duis a elit et dolor laoreet volutpat. Aliquam ultrices mauris id mattis imperdiet. Aenean cursus ultrices justo et varius. Suspendisse aliquam orci id dui dapibus

  • Option 2
  • Option 3

@import url('https://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: 1em 0;
}
 
.description {
  margin: 1em auto 2.25em;
}
 
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);
            }
        }
    }
}

@import url(‘https://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: 1em 0;
}
.description {
margin: 1em auto 2.25em;
}
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);
}
}
}
}

$('.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);
    }
});

$(‘.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);
}
});