BucketAdmin Sidebar not working - html

Question

I am working on the BucketAdmin template by Theme Bucket.
Everything works smooth but when I edit the Side-bar code, it stops collapsing and opening. Here is the original code.
I am a newbie at this so please also explain the issue.
<aside>
<div id="sidebar" class="nav-collapse">
<!-- sidebar menu start-->
<div class="leftside-navigation">
<ul class="sidebar-menu" id="nav-accordion">
<li>
<a href="index.html">
<i class="fa fa-dashboard"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sub-menu">
<a href="javascript:;">
<i class="fa fa-laptop"></i>
<span>Layouts</span>
</a>
<ul class="sub">
<li>Boxed Page</li>
<li>Horizontal Menu</li>
<li>Language Switch Bar</li>
</ul>
</li>
<li class="sub-menu">
<a href="javascript:;">
<i class="fa fa-book"></i>
<span>UI Elements</span>
</a>
<ul class="sub">
<li>General</li>
<li>Buttons</li>
<li>Typography</li>
<li>Widget</li>
<li>Slider</li>
<li>Tree View</li>
<li>Nestable</li>
<li>Grids</li>
<li>Calender</li>
<li>Draggable Portlet</li>
</ul>
</li>
<li>
<a href="fontawesome.html">
<i class="fa fa-bullhorn"></i>
<span>Fontawesome </span>
</a>
</li>
<li class="sub-menu">
<a href="javascript:;">
<i class="fa fa-th"></i>
<span>Data Tables</span>
</a>
<ul class="sub">
<li>Basic Table</li>
<li>Responsive Table</li>
<li>Dynamic Table</li>
<li>Editable Table</li>
</ul>
</li>
<li class="sub-menu">
<a href="javascript:;">
<i class="fa fa-tasks"></i>
<span>Form Components</span>
</a>
<ul class="sub">
<li>Form Elements</li>
<li>Advanced Components</li>
<li>Form Wizard</li>
<li>Form Validation</li>
<li>Muliple File Upload</li>
<li>Dropzone</li>
<li>Inline Editor</li>
</ul>
</li>
<li class="sub-menu">
<a href="javascript:;">
<i class="fa fa-envelope"></i>
<span>Mail </span>
</a>
<ul class="sub">
<li>Inbox</li>
<li>Compose Mail</li>
<li>View Mail</li>
</ul>
</li>
<li class="sub-menu">
<a href="javascript:;">
<i class=" fa fa-bar-chart-o"></i>
<span>Charts</span>
</a>
<ul class="sub">
<li>Morris</li>
<li>Chartjs</li>
<li>Flot Charts</li>
<li>C3 Chart</li>
</ul>
</li>
<li class="sub-menu">
<a href="javascript:;">
<i class=" fa fa-bar-chart-o"></i>
<span>Maps</span>
</a>
<ul class="sub">
<li>Google Map</li>
<li>Vector Map</li>
</ul>
</li>
<li class="sub-menu">
<a href="javascript:;" class="active">
<i class="fa fa-glass"></i>
<span>Extra</span>
</a>
<ul class="sub">
<li class="active">Blank Page</li>
<li>Lock Screen</li>
<li>Profile</li>
<li>Invoice</li>
<li>Pricing Table</li>
<li>Timeline</li>
<li>
Media Gallery
</li>
<li>404 Error
</li>
<li>500 Error</li>
<li>Registration</li>
<li>Blank2</li>
</ul>
</li>
<li>
<a href="login.html">
<i class="fa fa-user"></i>
<span>Login Page</span>
</a>
</li>
</ul>
</div>
<!-- sidebar menu end-->
</div>
</aside>
<!--sidebar end-->
Here is the edited code
<aside>
<div id="sidebar" class="nav-collapse">
<!-- sidebar menu start-->
<div class="leftside-navigation">
<ul class="sidebar-menu" id="nav-accordion">
<li> <i class="fa fa-dashboard"></i> <span>Dashboard</span> </li>
</ul>
</div>
<!-- sidebar menu end-->
</div>
</aside>
<!--sidebar end-->

Answer 1

Don't delete, I simply commented the part which I wanted to remove and it worked.