Expandable ul

Using jQruey, wrap parent LI text content only with a span, and bind "click" event to the span

by Dru Dro

HTML

<ul class="disc">
  <li>
    Appmethod
    <ul class="disc">
      <li>Appmethod for Windows 32-bit &amp; 64-bit</li>
      <li>Appmethod for MacOS</li>
      <li>Appmethod for iOS 32-bit &amp; 64-bit</li>
      <li>Appmethod for Android</li>
    </ul>
  </li>
  <li>
    Embarcadero RAD Studio 10 Seattle
    <ul class="disc">
      <li>Embarcadero Delphi 10 Seattle for Windows 32-bit &amp; 64-bit</li>
      <li>Embarcadero Delphi 10 Seattle for MacOS</li>
      <li>Embarcadero Delphi 10 Seattle for iOS 32-bit &amp; 64-bit</li>
      <li>Embarcadero Delphi 10 Seattle for Android</li>
      <li>Embarcadero C++Builder 10 Seattle for Windows 32-bit &amp; 64-bit</li>
      <li>Embarcadero C++Builder 10 Seattle for MacOS</li>
      <li>Embarcadero C++Builder 10 Seattle for iOS 32-bit &amp; 64-bit</li>
      <li>Embarcadero C++Builder 10 Seattle for Android</li>
    </ul>
  </li>
  <li>
    Embarcadero RAD Studio XE8
    <ul class="disc">
      <li>Embarcadero Delphi XE8 for Windows 32-bit &amp; 64-bit</li>
      <li>Embarcadero Delphi XE8 for MacOS</li>
      <li>Embarcadero Delphi XE8 for iOS 32-bit &amp; 64-bit</li>
      <li>Embarcadero Delphi XE8 for Android</li>
      <li>Embarcadero C++Builder XE8 for Windows 32-bit &amp; 64-bit</li>
      <li>Embarcadero C++Builder XE8 for MacOS</li>
      <li>Embarcadero C++Builder XE8 for iOS 32-bit &amp; 64-bit</li>
      <li>Embarcadero C++Builder XE8 for Android</li>
    </ul>
  </li>
  <li>
    Embarcadero RAD Studio XE7
    <ul class="disc">
      <li>Embarcadero Delphi XE7 for Windows 32-bit &amp; 64-bit</li>
      <li>Embarcadero Delphi XE7 for MacOS</li>
      <li>Embarcadero Delphi XE7 for iOS</li>
      <li>Embarcadero Delphi XE7 for Android</li>
      <li>Embarcadero C++Builder XE7 for Windows 32-bit &amp; 64-bit</li>
      <li>Embarcadero C++Builder XE7 for MacOS </li>
      <li>Embarcadero C++Builder XE7 for iOS</li>
      <li>Embarcadero C++Builder XE7 for Android</li>
    </ul>
  </li>
  <li>
    Embarcadero RAD...

CSS

ul {
   color: #777;
   line-height: 2;
 }
 
 ul.disc {
   list-style-type: disc;
   padding-left: 1.5rem;
 }
 
 ul.disc ul {
   list-style-type: circle;
 }
 
 .category {
   list-style-type: none;
 }
 
 .category span {
   cursor: pointer;
   margin-left: -22px;
   width: 100%;
   height: 1.2em;
 }
 
 .category span:before {
   display: inline-block;
   content: "";
   margin-right: 6px;
   top: .3em;
   height: 11px;
   width: 11px;
   background: url(https://www.devart.com/images/toggle-icon.png) no-repeat 0 0;
 }
 
 .expanded.category span:before {
   background-position: 0 -11px;
 }
 
 .category ul li {
   list-style-type: disc;
 }

JavaScript

$(function() {
  $('ul li ul').hide();
  $('ul li').has('ul').addClass('category').attr("title", "Click to expand").each(function() {
    $($(this).contents().filter(function() {
      return this.nodeType == 1 || 2 || 3;
    })[0]).wrap('<span class="toggle"></span>');
  }).on("click", "span", function(event) {
    $(this).parent('.category').toggleClass('expanded').children('ul').slideToggle(200);
  });
});