hide or show element

  1. eins
    1. elf
    2. zwoelf
    3. 13
  2. zwei
    1. einUndZwanzig
      1. 211
      2. 212
    mid21
    1. einUndZwanzigAfter
      1. 21A
      2. 21B
      3. einUndZwanzigCCCC
        1. 21C1
        2. 21C2
    end21
  3. zweiUndZwanzig
  4. dreiUndZwanzig
zweiEnd
  • drei
  • vier
  • fuenf

    • Source /home/ch45859/web/wlkl.ch/public_html/inf/js/j07hide.php 

    <html>
 <head>
  <title> <?php echo basename(__file__, '.php'); ?> </title>
    <style type="text/css">
         #layer {position:absolute; top:12em; left: 12em; width: 340; height:246; border: 1em solid red; padding-left: 2em; 
            background-image: url("pn.jpg"); background-repeat:  no-repeat; background-color: yellow; }
    </style>
    <script type="text/javascript">
        function hide(id, hi) {
            document.getElementById(id).hidden = hi;
            console.log('hide(' + id + ', ' + hi + ')');
            }  
        function showChildren(nd) {
            for (var i=0; i < nd.children.length; i++) {
                if (nd.children[i] == null) {
                } else if (nd.children[i].hidden) {
                    nd.children[i].hidden = false;
                } else {
                    showChildren(nd.children[i]);
                }
                }
            }
        function hideSisters(nd, hi) {
            var t = '', iH, iS;
            if (nd.constructor.name == 'HTMLInputElement') {
                if (hi) {
                    iH = nd;            
                    for (var iS=nd.nextSibling; iS != null && iS.constructor.name == 'Text' ; iS=iS.nextSibling)
                         t = t + ', ' + iS;
                } else {
                    iS = nd;
                    for (iH=nd.previousSibling; iH != null && iH.constructor.name == 'Text' ; iH=iH.previousSibling) 
                        t = t + ', prev' + iH;
                }
                if (iH != null && iH.constructor.name == 'HTMLInputElement') {
                    iH.hidden = hi;
                } else {
                    t = t + ' >>>bad hideInput ' + iH;
                    }
                if (iS != null && iS.constructor.name == 'HTMLInputElement') {
                    iS.hidden = ! hi;
                } else {
                    t = t + ' >>>bad hideInput ' + iS;
                    iS = nd;
                    }
            } else if (nd.constructor.name == 'HTMLImageElement') {
                iS = nd;
            } else {
                console.log('implement hide show for ' + nd.constructor.name);
            }
                
            for (var si=iS.nextSibling; si != null && si.constructor.name == 'Text' ; si=si.nextSibling) {
                t = t + ', ' + si + (' con=' + si.constructor.name);
                }
            t = t + ' >>>hide>>> ';
            for ( ; si != null ; si=si.nextSibling) {
                t = t + ', ' + si.constructor.name;
                si.hidden = hi;
                }
            console.log('hi=' + hi + ' !hi=' + (! hi) + ' sisterchain' + t.substr(1));
            }
        function hiEv(ev, hi) {
            console.log('hiEv(target=' + ev.target + ' src=' + ev.target.src + ' par=' + ev.target.parentNode + ', ' + hi + ')');
            var nd = ev.target;
            if (nd.constructor.name != 'HTMLImageElement') {
                hideSisters(nd, hi);
            } else if (nd.src.endsWith('/plus.jpg')) { 
                    nd.src = nd.src.substr(0, nd.src.length-9) + '/minus.jpg';
                    hideSisters(nd, false);
            } else if (nd.src.endsWith('/minus.jpg')) { 
                    nd.src = nd.src.substr(0, nd.src.length-10) + '/plus.jpg';
                    hideSisters(nd, true);
            } else {
                console.log('implement hide/show for target=' + ev.target + ' src=' + ev.target.src + ' par=' + ev.target.parentNode + ', ' + hi + ')');
            }
            }

        function sizeC(id, ns) {
            for (const c of document.getElementById(id).children) {
                c.style.width = ns;
                /* c style.height = ns; */
                c.style.overflow = 'hidden';
            }
            console.log('sizeC(' + id + ', ' + ns + ')');
            }  
        function scrollEv(ev, top=true) {
            var nd = ev.target;
            console.log('scrollEv(target=' + nd + ' par=' + nd.parentNode + ', ' + top + ')');
            nd.scrollIntoView(top);
        }

</script>
 </head>
<body>
<h1 >hide or show element</h1>
<input type="button" value="hide eins" onclick="hide('l1', true);" />
<input type="button" value="show eins" onclick="hide('l1', false);" />
<input type="button" value="show list" onclick="showChildren(document.getElementById('o1'));" />
<input type="button" value="hide eins" onclick="hide('l1', true);" />
<input type="button" value="size eins 1px" onclick="sizeC('l1', '5px');" />
<input type="button" value="size eins auto" onclick="sizeC('l1', 'auto');" />
<input type="button" value="scroll to #src" onclick="document.getElementById('src').scrollIntoView();" />
<ol id=o1>
<li id=l1 stye="display: block;">eins
<ol><li>elf</li><li>zwoelf</li><li>13</li></ol></li>
<li><input type="button" value="hide" onclick="hiEv(event, true);" />
    <input type="button" value="show" onclick="hiEv(event, false);" />
    zwei <div>
    <ol><li><input type="button" value="hide" onclick="hiEv(event, true);" />
    <input type="button" value="show" onclick="hiEv(event, false);" /> einUndZwanzig<ol><li>211</li><li>212</li></ol></ol>mid21
    <ol><li><img src="minus.jpg" onclick="hiEv(event);" /> einUndZwanzigAfter<ol><li>21A</li><li>21B</li>
        <li><img src="minus.jpg" onclick="hiEv(event);" /> einUndZwanzigCCCC<ol><li>21C1</li><li>21C2</li></ol></ol></ol>
end21</div></li>
<li value=345>
<img src="minus.jpg" onclick="hiEv(event);" /> zweiUndZwanzig</li>
<li>dreiUndZwanzig</li></ol>
zweiEnd
</li>
<li>drei</li>
<li>vier</li>
<li>fuenf <input type="button" value="scroll this to top" onclick="scrollEv(event);" /></li>
</ol>
<h1 id="src">Source <?php echo __file__; ?> </h1>
<?php highlight_file(__file__) ?>
 </body>
</html>