Как исправить этот аккордеон jquery code с 3 уровнями?

Question

Я делаю этот аккордеон с 2 уровнями.

Но мне нужно сделать это на 3 уровня.

Я пробовал много раз, но не работал.

Мне интересно узнать, как исправить этот код jQuery, приветствия.

Это на 2 уровнях JQuery код Jsfiddle здесь: http://jsfiddle.net/o7t062ap/30/

JQuery

$(function() { 
var Accordion = function(el, multiple) { 
    this.el = el || {}; 
    this.multiple = multiple || false; 

    // Variables privadas 
    var links = this.el.find('.sidebar'); 
    // Evento 
    links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown) 
} 
Accordion.prototype.dropdown = function(e) { 
    var $el = e.data.el; 
     $this = $(this), 
     $next = $this.next(); 

    $next.slideToggle(); 
    $this.parent().toggleClass('open'); 

    if (!e.data.multiple) { 
     $el.find('.firstSubmenu').not($next).slideUp().parent().removeClass('open'); 
    };  
} 
var accordion = new Accordion($('#accordion'), false);} 

Answer 1

[HTML]

<ul id="accordion" class="accordion"> <li> <ul id="sidebar" div class="sidebar"><i class="1"></i>1</ul> <ul class="firstSubmenu"> <li><a href="#">2</a></li> <ul class="secondSubmenu"> <li><a href="#">3</a></li> <li><a href="#">3</a></li> <li><a href="#">3</a></li> </ul> <li><a href="#">2</a></li> <li><a href="#">2</a></li> <li><a href="#">2</a></li> <li><a href="#">2</a></li> </ul> <ul id="sidebar" div class="sidebar"><i class="2"></i>1</ul> <ul class="firstSubmenu"> <li><a href="#">2</a></li> <ul class="secondSubmenu"> <li><a href="#">3</a></li> <li><a href="#">3</a></li> <li><a href="#">3</a></li> </ul> <li><a href="#">2</a></li> <li><a href="#">2</a></li> <li><a href="#">2</a></li> <li><a href="#">2</a></li> </ul> <ul id="sidebar" div class="sidebar"><i class="2"></i>1</ul> <ul class="firstSubmenu"> <li><a href="#">2</a></li> <ul class="secondSubmenu"> <li><a href="#">3</a></li> <li><a href="#">3</a></li> <li><a href="#">3</a></li> </ul> <li><a href="#">2</a></li> <li><a href="#">2</a></li> <li><a href="#">2</a></li> <li><a href="#">2</a></li> </ul>

Answer 2

[CSS]

* { 
margin: 0; 
padding: 0; 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
} 

body { 
background: #fff; 
font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma; 
} 

ul { 
list-style-type: none; 
} 

a { 
color: #333; 
text-decoration: none; 
} 

/** ======================= 
* Contenedor Principal 
===========================*/ 


.accordion{ 
width: 100%; 
border: 1px solid #e5e5e5; 
background: #FFF; 
list-style: none; 
white-space: nowrap; 
} 

.sidebar { 
cursor: pointer; 
display: block; 
padding: 10px 10px 10px 42px; 
color: #111; 
position: relative; 
font-size: 16px; 
} 

.accordion li i { 
position: absolute; 
top: 16px; 
left: 0px; 
padding: 0 10px 0 10px; 
background: #fff; 
} 

.sidebar:hover { 
background: #fff; 
color: #0099FF; 
font-weight: bold; 
} 

.accordion li.open .sidebar { 
color: #0099ff; 
font-weight: bold; 
} 

.accordion li.open i { 
color: #0099ff; 
} 



/* Submenu 
-----------------------------*/ 

.firstSubmenu { 
display: none; 
background: #444359; 
font-size: 12px; 
} 

.firstSubmenu li { 
background: #f2f2f2; 
} 

.firstSubmenu li a { 
display: block; 
text-decoration: none; 
color: #333; 
padding: 12px; 
padding-left: 42px; 
font-size: 12px; 
} 

.firstSubmenu li a:hover { 
background: #000; 
color: #fff; 
font-weight: 300; 
} 

.sidebar li.open .firstSubmenu { 
color: #0099ff; 
background: #f2f2f2; 
} 

.firstSubmenu li.open a { 
color: #0099ff; 
} 

.secondSubmenu { 
background: #444359; 
font-size: 12px; 
} 

.secondSubmenu li { 
display: none; 
background: #e2e2e2; 
} 

.secondSubmenu li a { 
text-decoration: none; 
color: #333; 
padding: 12px; 
padding-left: 42px; 
font-size: 12px; 
} 

.secondSubmenu li a:hover { 
background: #000; 
color: #fff; 
font-weight: 300; 
}