Need tree with plus and minus signmy expected design was like this if the tree node was not clicked and if it is clicked and expanded it should show as ltDOCTYPE htmlgtlthtmlgtltheadgtltmeta name34viewport34 content34widthdevicewidth initialscale134gtltstylegtul myUL liststyletype none myUL margin 0 padding 0 box cursor pointer webkituserselect none Safari 31 mozuserselect none Firefox 2 msusersel

Hi PriyaKannCheck this example Now please take its reference and correct your codeHTMLlthtml xmlns34httpwwww3org1999xhtml34gtltheadgt lttitlegtlttitlegt ltmeta name34viewport34 content34widthdevicewidth initialscale134 gt ltstyle type34textcss34gt ul myUL liststyletype none myUL margin 0 padding 0 box cursor pointer webkituserselect none Safari 31 mozuserselect none Firefox 2 msuserselect none IE 10 userselect none boxbefore content 3434 color black display inlineblock marginright 6px checkboxbefore content 3434

Create TreeView with plus and minus sign in HTML and CSS

PriyaKan...

SOLVED CLOSED ACTIVE ANSWERED
User: PriyaKann
Posted: on Jun 24, 2020 04:24 AM
Forum: HTML and CSS
Answer: 1
Views: 21400
Sample Code: Download

Need tree with plus and minus sign

my expected design was like this

+ if the tree node was not clicked and if it is clicked and expanded it should show as -

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
ul, #myUL {
  list-style-type: none;
}
 
#myUL {
  margin: 0;
  padding: 0;
}
 
.box {
  cursor: pointer;
  -webkit-user-select: none; /* Safari 3.1+ */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none;
}
 
.box::before {
  content: "\2610";
  color: black;
  display: inline-block;
  margin-right: 6px;
}
 
.check-box::before {
  content: "\2611";
  color: dodgerblue;
}
 
.nested {
  display: none;
}
 
.active {
  display: block;
}
</style>
</head>
<body>
 
<h2>Tree View</h2>
<p>A tree view represents a hierarchical view of information, where each item can have a number of subitems.</p>
<p>Click on the box(es) to open or close the tree branches.</p>
 
  <ul id="myUL">
    <li><span class="box">Beverages</span>
      <ul class="nested">
        <li><span class="box">Cold beverages</span></li>
        <li><span class="box">Hot Beverages</span></li>
      </ul>
    </li>
    <li><span class="box">Tea</span>
      <ul class="nested">
        <li><span class="box">Black Tea</span></li>
        <li><span class="box">White Tea</span></li>
      </ul>
    </li> 
    <li><span class="box">Green Tea</span>
      <ul class="nested">       
         <li><span class="box">Sencha</span></li>
        <li><span class="box">Gyokuro</span></li>
      </ul>
    </li>
  </ul>
 
<script>
var toggler = document.getElementsByClassName("box");
var i;
 
for (i = 0; i < toggler.length; i++) {
  toggler[i].addEventListener("click", function() {
    this.parentElement.querySelector(".nested").classList.toggle("active");
    this.classList.toggle("check-box");
  });
}
</script>
 
</body>
</html>

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 7

Reply
ANSWER
User: dharmendr
Replied: on Jun 24, 2020 11:55 PM
Report

Hi PriyaKann,

Check this example. Now please take its reference and correct your code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style type="text/css">
        ul, #myUL
        {
            list-style-type: none;
        }
        
        #myUL
        {
            margin: 0;
            padding: 0;
        }
        
        .box
        {
            cursor: pointer;
            -webkit-user-select: none; /* Safari 3.1+ */
            -moz-user-select: none; /* Firefox 2+ */
            -ms-user-select: none; /* IE 10+ */
            user-select: none;
        }
        
        .box::before
        {
            content: "+";
            color: black;
            display: inline-block;
            margin-right: 6px;
        }
        
        .check-box::before
        {
            content: "-";
        }
        
        .nested
        {
            display: none;
        }
        
        .active
        {
            display: block;
        }
    </style>
</head>
<body>
    <h2>Tree View</h2>
    <p>A tree view represents a hierarchical view of information, where each item can have a number of subitems.</p>
    <p>Click on the +/- symbol to open or close the tree branches.</p>
    <ul id="myUL">
        <li><span class="box">Beverages</span>
            <ul class="nested">
                <li><span>Cold beverages</span></li>
                <li><span>Hot Beverages</span></li>
            </ul>
        </li>
        <li><span class="box">Tea</span>
            <ul class="nested">
                <li><span>Black Tea</span></li>
                <li><span>White Tea</span></li>
            </ul>
        </li>
        <li><span class="box">Green Tea</span>
            <ul class="nested">
                <li><span>Sencha</span></li>
                <li><span>Gyokuro</span></li>
            </ul>
        </li>
    </ul>
    <script type="text/javascript">
        var toggler = document.getElementsByClassName("box");
        for (var i = 0; i < toggler.length; i++) {
            toggler[i].addEventListener("click", function () {
                if (this.parentElement.querySelector(".nested") != null) {
                    this.parentElement.querySelector(".nested").classList.toggle("active");
                    this.classList.toggle("check-box");
                }
            });
        }
    </script>
</body>
</html>

Demo

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Create TreeView with plus and minus sign in HTML and CSS

Company

Explore

Follow us

Contact Us