Простой древовидный список

jQuery 3.1.1.

by Denis Tverdokhlebov

HTML

<ul class="ul-treefree ul-dropfree">
  <li>
    <div class="drop" style="background-position: -11px 0px;"></div><span class="tree_active">Программирование</span>
    <ul style="display: block;">
      <li><a href="#">PHP</a></li>
      <li>JavaScript</li>
      <li>MySQL</li>
      <li>htaccess</li>
      <li>regular expression</li>
    </ul>
  </li>

  <li>
  <div class="drop" style="background-position: 0px 0px;"></div><span class="tree_active">Верстка</span>
    <ul style="display: none;">
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>

  <li>
  <div class="drop" style="background-position: 0px 0px;"></div><span class="tree_active">Дизайн</span>
    <ul style="display: none;">
      <li>Photoshop</li>
    </ul>
  </li>

  <li>
  <div class="drop" style="background-position: 0px 0px;"></div><span class="tree_active">SEO</span>
    <ul style="display: none;">
      <li>SEO</li>
    </ul>
  </li>
  <li>Разное</li>
</ul>

CSS

/* ul-treefree */

ul.ul-treefree {
  padding-left: 25px;
}

ul.ul-treefree ul {
  margin: 0;
  padding-left: 6px;
}

ul.ul-treefree li {
  position: relative;
  list-style: none outside none;
  border-left: solid 1px #999;
  margin: 0;
  padding: 0 0 0 19px;
  line-height: 23px;
}

ul.ul-treefree li:before {
  content: '';
  display: block;
  border-bottom: solid 1px #999;
  position: absolute;
  width: 18px;
  height: 11px;
  left: 0;
  top: 0;
}

ul.ul-treefree li:last-child {
  border-left: 0 none;
}

ul.ul-treefree li:last-child:before {
  border-left: solid 1px #999;
}

/* ul-dropfree */

ul.ul-dropfree div.drop {
  width: 11px;
  height: 11px;
  position: absolute;
  z-index: 10;
  top: 6px;
  left: -6px;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAALCAIAAAD0nuopAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE1JREFUeNpinDlzJgNlgAWI09LScEnPmjWLoAImrHpIAkwMFAMqGMGC6X44GzkIsHoQooAFTTVQKdbAwxOigyMsmIh3MC7ASHnqBAgwAD4CGeOiDhXRAAAAAElFTkSuQmCC');
  background-position: -11px 0;
  background-repeat: no-repeat;
  cursor: pointer;
}
.tree_active {
  cursor:pointer;
}

JavaScript

$(".ul-dropfree").find("li:has(ul)").prepend('<div class="drop"></div>');
$(".ul-dropfree div.drop").click(function() {
  if ($(this).nextAll("ul").css('display') == 'none') {
    $(this).nextAll("ul").slideDown(400);
    $(this).css({
      'background-position': "-11px 0"
    });
  } else {
    $(this).nextAll("ul").slideUp(400);
    $(this).css({
      'background-position': "0 0"
    });
  }
});
$(".ul-dropfree").find("ul").slideUp(400).parents("li").children("div.drop").css({
  'background-position': "0 0"
});

$("span.tree_active").click(function() {
  if ($(this).nextAll("ul").css('display') == 'none') {
    $(this).nextAll("ul").slideDown(400);
    $(this).prev().css({
      'background-position': "-11px 0"
    });
  } else {
    $(this).nextAll("ul").slideUp(400);
    $(this).prev().css({
      'background-position': "0 0"
    });
  }
});