anji plus and minus expansion

Zany Zebra answered on November 30, 2022 Popularity 1/10 Helpfulness 1/10

answer anji plus and minus expansion

anji plus and minus expansion

Comment

Tip Zany Zebra 1 GREPCC

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
	
<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>

xxxxxxxxxx

<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>

Popularity 1/10 Helpfulness 1/10 Language whatever

Source: www.aspsnippets.com

Tags: expansion whatever

Link to this answer
Share Copy Link

Contributed on Nov 30 2022

Zany Zebra

0 Answers Avg Quality 2/10

anji plus and minus expansion

Contents

More Related Answers

anji plus and minus expansion

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.