PHP Classes

File: fwphp/glomodul/z_examples/txt_expand_collapse_open_close.php

Recommend this page to a friend!
  Classes of Slavko Srakocic  >  B12 PHP FW  >  fwphp/glomodul/z_examples/txt_expand_collapse_open_close.php  >  Download  
File: fwphp/glomodul/z_examples/txt_expand_collapse_open_close.php
Role: Auxiliary script
Content type: text/plain
Description: Auxiliary script
Class: B12 PHP FW
Manage database records with a PDO CRUD interface
Author: By
Last change: ver 7.0.2 mnu, msg, mkd FUNCTIONAL namespaces, CRUD PDO trait, pretty URL-s
Date: 3 months ago
Size: 7,657 bytes
 

Contents

Class file image Download
<?php
$wsroot_url
= ( (isset($_SERVER['HTTPS']) and $_SERVER['HTTPS'] == 'on') ? 'https://' : 'http://' )
       
// 2. URL_DOM AIN = dev1:8083 :
     
. filter_var( $_SERVER['HTTP_HOST'] . '/', FILTER_SANITIZE_URL ) ;
?>
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Collapsibles</title>

  <link rel="stylesheet" href="<?=$wsroot_url?>zinc/exp_collapse.css">
  <style></style>

</head>


<body>

<h2>Collapsibles (F5 or ctrl+r to close all)</h2>
<p>style="display:none; - without it here works, but all opened in home.php, to be all closed style="display:none; is needed !!!</p>

<button type="button" class="collapsible">Open Collapsible1</button>
<div class="content" style="display:none;">
  <p>1111111111111111</p>
</div> <!-- class="content" Collapsible-->

<button type="button" class="collapsible">Open Collapsible2</button>
<div class="content" style="display:none;">
  <p>222222222222222222222</p>
</div>


   <script src="<?=$wsroot_url?>zinc/exp_collapse.js"
           language='JScript' type='text/javascript'></script>
<script>
                    /* var coll = document.getElementsByClassName("collapsible");
                    var i;

                    for (i = 0; i < coll.length; i++) {
                      coll[i].addEventListener("click", function() {
                        this.classList.toggle("active");
                        var content = this.nextElementSibling;
                        if (content.style.display === "block") {
                          content.style.display = "none";
                        } else {
                          content.style.display = "block";
                        }
                      });
                    } */
</script>

                        <!--
                        background-color: #777;


                      .collapsible {
                        background-color: lightgray;
                        color: black;
                        cursor: pointer;
                        padding: 18px;
                        width: 100%;
                        border: none;
                        text-align: left;
                        outline: none;
                        font-size: 15px;
                      }

                      .active, .collapsible:hover {
                        background-color: #555;
                      }

                      .content {
                        padding: 0 18px;
                        display: none;
                        overflow: hidden;
                        background-color: #f1f1f1;
                      }


                        <p>Collapsible Set:</p>
                        <button type="button" class="collapsible">Open Section 1</button>
                        <div class="content">
                          <p>1111</p>
                        </div>
                        <button type="button" class="collapsible">Open Section 2</button>
                        <div class="content">
                          <p>2222</p>
                        </div>
                        <button type="button" class="collapsible">Open Section 3</button>
                        <div class="content">
                          <p>3333</p>
                        </div>
                        -->
</body></html>


<!DOCTYPE html>
<html>
<head>
           <title>IElementTraversal Example</title>

<script>
  function GetListItems () {
      var list = document.getElementById ("girls"); // find our list
      var results = document.getElementById("results"); // get our results line element
      var oChild = list.lastElementChild; // start with the last item in list
      results.innerHTML = "<br />";
      while (oChild) { // get and display each item in list
         results.innerHTML += "<br/>" + oChild.innerHTML;
          oChild = oChild.previousElementSibling; // get previous element in list
          }
  }
  function GetListItems2 () {
      var list = document.getElementById ("girls"); // find our list
      var results = document.getElementById("results"); // get our results line element
      var oChild = list.firstElementChild; // start with the first item in list
      results.innerHTML = "<br />";
      while (oChild) { // get and display each item in list
          results.innerHTML += "<br />" + oChild.innerHTML;
          oChild = oChild.nextElementSibling; // get next element in list
          }
  }
  function refresh()
     {
       window.location.reload( false ); //reload our page
     }

  //****************************************
        function GetListItems () {
            var list = document.getElementById ("myList");

            if ('firstElementChild' in list) {
                var child = list.firstElementChild;
                while (child) {
                    alert (child.innerHTML);
                    child = child.nextElementSibling;
                }
            }
            else {
                var child = list.firstChild;
                while (child) {
                    if (child.nodeType == 1 /*Node.ELEMENT_NODE*/) {
                        alert (child.innerHTML);
                    }
                    child = child.nextSibling;
                }
            }
        }






</script>
</head>




<body>
    <br /><br />
    <ol id="girls">
        <li>Sugar</li>
        <li>Spice</li>
        <li>Everything nice</li>
    </ol>
    <p id="results">Girls have: </p>
    <p>
    <button onclick="GetListItems ();">Get list backwards</button>
    </p>
   <p>
    <button onclick="GetListItems2 ();">Get list forwards</button>
    </p>
    <p>
      <input type="button" value="Refresh page" onclick="refresh()" />
    </p>


    <br /><br /><br />
    <ol id="myList">
        <li>Apple</li>
        <li>Peach</li>
        <li>Cherry</li>
    </ol>
    <button onclick="GetListItems ();">Get the list items!</button>



</body>
</html>






<!DOCTYPE html>
<html>

<head>
  <title>
  DOM nextSibling Property
  </title>
</head>

<body style="xxxtext-align: xxxcenter">

  <h2 style="color:green;">
  DOM nextElementSibling Property
  </h2>

  <h4 id="h42">Web Languages:</h4>
  <select size="4">
    <option>HTML</option>
    <option id="Select">CSS</option>
    <option>JAVA SCRIPT</option>
    <option>XML</option>
  </select>

  <br>
  <br>
  <button onclick="open_next_of_css()">Next of CSS</button>

  <button onclick="open_1()">open_1</button>
  <button onclick='document.getElementById("p").innerHTML ="";'>Close</button>

  <br>
  <br>

  <div id="p001" style="display: none; padding:5; margin:auto; width: 80%;">
        111111 aaaaaaaa bbbbbbbbb
  </div>


  <p id="p" style="padding:5; margin:auto; width: 80%;"></p>

  <script>
    function open_1() {
      //var to_open = 'KKKKKK'; //document.getElementById("p001").innerHTML;
      document.getElementById("p").style.color = "white";
      document.getElementById("p").style.background = "green";
      //document.getElementById("p").innerHTML = to_open.text; //not working
      document.getElementById("p").innerHTML = document.getElementById("p001").innerHTML;
    }

    function open_next_of_css() {
      var a = document.getElementById("Select").nextElementSibling;
      document.getElementById("p").innerHTML = a.text;
      document.getElementById("p").style.color = "white";
      document.getElementById("p").style.background = "green";
    }

  </script>
</body>

</html>

For more information send a message to info at phpclasses dot org.