tree with list

by eawe_

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

 <div id ="_vertmenu" class="vertmenu header stages">
 
    <ul>
    <li>
    
      <a class="active" href="#">Пункт меню 1</a>
      <input type="checkbox" class="subCat" id="1" checked="checked" />
      <label class="chka" for="1"></label>
      
      <ul style="display:none">
      
        <li>
        
          <a class="active" href="#">Пункт меню 1.1</a>
          <input type="checkbox" class="subCat" id="1.1" checked="checked"/>
          <label class="chka" for="1.1"></label>
          
          <ul style="display:none">
            <li>
              <a href="#">Пункт меню 1.1.1</a>
            </li>
            <li>
              <a href="#">Пункт меню 1.1.2</a>
            </li>
            <li>
              <a href="#">Пункт меню 1.1.3</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Пункт меню 1.2</a>
        </li>
        <li>
          <a href="#">Пункт меню 1.3</a>
        </li>
      </ul>
    </li>	
    <li>
      <a href="#">Пункт меню 2</a>
      <input type="checkbox" class="subCat" id="2" />
      <label class="chka" for="2"></label>
      <ul style="display:none">
        <li>
          <a href="#">Пункт меню 2.1</a>
        </li>
        <li>
          <a href="#">Пункт меню 2.2</a>
        </li>
        <li>
          <a href="#">Пункт меню 2.3</a>
        </li>
        <li>
          <a href="#">Пункт меню 2.4</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">Пункт меню 3</a>
      <input type="checkbox" class="subCat" id="3" />
      <label class="chka" for="3"></label>
      <ul style="display:none">
        <li>
          <a href="#">Пункт меню 3.1</a>
        </li>
        <li>
          <a href="#">Пункт меню 3.2</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">Пункт меню 4</a>
      <input type="checkbox" class="subCat" id="4" />
      <label...

CSS

.vertmenu {
margin: 0 20px;
font-family: 'Open Sans', sans-serif;    
}
.vertmenu ul {
list-style: none;
margin: 0;
padding: 0;
}
.vertmenu ul li {
position: relative;
margin: 0;
line-height: 30px;
text-transform: uppercase;    
}
.vertmenu ul li li {
padding-left:20px;
}
.vertmenu .subCat, .chka {
top: 0;
right: 0px;
position: absolute;
cursor: pointer;
}
.vertmenu .subCat.plus, 
.chka:before, 
.vertmenu .subCat.minus, 
.subCat:checked + .chka:before {
content: '+';
font-size: 26px;
color: #1266B1;
font-weight: bold;    
font-family: Courier;    
}
.vertmenu .subCat.minus, .subCat:checked + .chka:before {
content: '-';
}
.vertmenu a {
color: #477AB9;
font-size: 16px;
font-weight:bold;
text-decoration:none;
}
.vertmenu ul li li a {
color: #666;
font-size: 15px;
font-weight:normal;
text-decoration:none;
}
.vertmenu a.active {
color: #00B1EC;
}
.vertmenu a:hover {
text-decoration: none;
color: #000 !important;
}
.vertmenu > ul > li ul {
display: none;
}
.vertmenu > ul > li a.active + span + ul {
display: block !important;
}
.vertmenu > ul > li .subCat:checked ~ ul {
display: block !important;
}
.vertmenu input[type=checkbox].subCat {
display:none;
}
.vertmenu ul li li a:before {
content: '\203A';
font-size: 20px;
padding-right: 6px;
color: #666;
font-weight: bold;
}
.vertmenu > ul li li a:hover:before {
color: #1266B1;
}



           			body {
                        margin: 0;
                    }
            
                    .container {
                        
                    }
            
                    .sidebar {
           
                        float: left;
                    }
            
                    .content {
         
                        float: left;
            
                    }
            
                    .header {
                        margin: 17px;
                    }
            
                    .stages {
                        float: left;
                    }
            
                    .vl...

JavaScript

var getImageCheckedTrue = function () {
            return "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAADVUlEQVRYheWXP2gTURzHv7+71FQdRB0Viy4XO2hwEASJqFgXvSbIbYqoUCM4KLjodIs6qWO1gyJFrBRs7jIEOkYFKVoiYkg66CIqFlstWnNN7/0c0pz3JzG5Jpvf6d3v3r3P992993u/A/53UZjOmqbJlmUlmGkvIClEvAkAmGkOEGUinopGo/nx8XG7qwZSqdRm2+ZzANIAtrfo/gGgYVnG/YmJiW+dGiBVTaYBvg1Qbztm/4orgHTZNCfuAeDQBgYGBtb39q67C+BkOLAPQBgVwk5ns9nFtg2swPMA9nQCd2m6UllMTE5O/vLfkBqZWpl5t+AAsGft2nXDaDBh2R9Q1VQawLUuwuvaHYspn8vl8mt30OOottrFx/ALrl1xRZalre7d4fkEto2zXYK/AXAFwIw3TL3Ly+KMO+IY0DRNBvhC52x+Wa1aCdPM3KpWe/YDeOuxQHRB13WH6zQsy0qgdZJpA750NJfLLQBALjc+C4gjtZzgaEehUEgEDNTSa0MtEiEDYCEMvK6FhU0/APJsPyHgsFxrQFIajPodEAcMI5Mi4n0AvoaBa5q2ZsOG748BbPb0ZooFDNQPFk8/lgZM03wFAIZhFIn4YNBEc/jSUvUJM5J+u5LEGwMGgqJP2ezTV+6IYRhFZvsQgNnVwgNmnHkwzflmtuX48cGr/gey2ew7ZvsgAKMZ3LKWx/4FF4Lm6+2IK1z2Z0oiuq6qSTbNzE2/CSAIGBoa6vnyZXYM4FQzeG1cLtXb7jUw1aT/DVVNBt5EE/iTVnAAkCQ4LMdANBrNA/iwGhNh4ADex+PxfP3COYyKxSIrys41AI40efCwosSWyuXS8w7gYOYbIyP3XtSvPbtAlnHfl7X88ryJGvxry2/uwlciEemBh+m+KJVKvxWl/xuAY/8Y5bCixKL9/Ts//fz56y6ANuEAES5mMplnnlijfoODyYfMONXuwG3CRw0jcxq++rBRImIh7DSA6S7yp1fGDBSngYoIAGZmZqp9fdseRSI92wDs6oRMhFFm+0SootR9X1VT5wFxZzVlOREuGYYxgtWU5W7VSjWcXSlYWtUM75l5OBKRHnTjx8QjXdelQqGQEAJ7mSlWP9WEoHkiLkkSpuLxeF7XdRFm3P9bfwDllI6GTy5BSwAAAABJRU5ErkJggg==";
        }

        var getImageCheckedFalse = function () {
            return...