Add SVG Arrows To Folded Content - jQuery folding-arrow

Add SVG Arrows To Folded Content - jQuery folding-arrow

folding-arrow is a jQuery plugin that automatically adds CSS/SVG based arrow indicators to folded/collapsed content such as accordion panels, tree structure, folder tree, etc.

1. Insert jQuery JavaScript together with the jQuery folding-arrow plugin's files into the html file.

<link rel="stylesheet" href="jquery-folding-arrow-icon.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="src/jquery-folding-arrow-icon.js"></script>

2. Add the CSS/SVG based arrow indicators to an HTML list based hierarchical tree.

<ul id="demo" class="folding-arrows">
  <li id="g1"><a href="#!">Test list item</a>
    <br>
    Second line
    <ul>
      <li>sub</li>
      <li>list</li>
    </ul>
  </li>
  
  <li id="g1b" class="showing">
    <a href="#!">Test list item</a>
    <br>
    Second line
    <ul class="folding-arrows">
      <li>sub<br>still sub</li>
      <li>list</li>
    </ul>
    
  </li>
</ul>
$("#demo > li, #demo ul.folding-arrows > li").prependFoldingArrowIcon();

3. Apply your own CSS styles to the arrow icons.

#g1 .folding-arrow-icon path {
  stroke: none;
  fill: silver;
}
#g1b .folding-arrow-icon path {
  stroke: none;
  fill: #a00
}

4. Default plugin options.

$("selector").prependFoldingArrowIcon({
  svgClass: "folding-arrow-icon",
  containerClass: "folding-arrow",
  separator: "&ensp;",
  viewboxRadius: 5,
  viewboxMargin: 1,
  closePath: false,
  preset: undefined
});

This awesome jQuery plugin is developed by isg-software. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 07.01.2018
  • Source