WHide-Show

This is a demo to show how javascript and php can work together.

Check to show Instructions

This section is hidden from view until the check box is checked.

This is done via the id="hide" div DOM.

Checking the checkbox triggers the onclick="toggleDiv()" javascript function,

which then receives the 'hide' id and toggles the css display (i.e., none, block).

             
CODE FOLLOWS


<!doctype html>
<html lang="en-us">

<head>
    <meta charset="utf-8">
    <title>WHide-Show</title>
    <link rel="stylesheet" href="includes/css/styles.css" media="screen">
    <script type="text/javascript" src="js/toggle.js"></script>
</head>

<body>

<div id="page">    <!-- start of page -->

    <div id="banner">
        <h1>
            Show Hide Demo
        </h1>
    </div>

    <br>

    <div class="navcontainer">
        <ul class="navlist">
            <li><a href="examples.php">Back</a></li>
        </ul>
    </div>

    <div id="content">

        <div class="clear">
            <hr>
        </div>

        <h2>
            This is a demo to show how javascript and php can work together.
        </h2>

        <!-- The following statement triggers javascript to act -->

        <input type="checkbox" onclick="toggleDiv('hide');"> Check to show Instructions

        <div id="hide">
            <p>
                This section is hidden from view until the check box is checked.
            </p>

                <p>
                    This is done via the id="hide" div DOM.
                </p>

                <p>
                   Checking the checkbox triggers the onclick="toggleDiv()" javascript function,
                </p>

                <p>
                   which then receives the 'hide' id and toggles the css display (i.e., none, block).
                </p>

        </div>

        <!-- end of the hide-show code -->

        <div class="clear">
            <hr>
        </div>

        <pre>
             <?php // this is to show the code for this page
                 include("includes/show-code.php");

             ?>
        </pre>
        <pre>

            <?php // this is to show the javascript used
                include("js/toggle.js");
            ?>

        </pre>

    </div>  <!-- end of content -->

</div>    <!-- end of page -->

</body>
</html>


            
/*
    This javascript function toggles the display of whatever div provided to it
    Realize this function finds the name of the Id (i.e., getElementById)
    and then changes the div's style.display from "none" or "block"
    thereby changing the div's css style display value (show-hide).
*/

function toggleDiv(div)
    {
        if (document.getElementById(div).style.display == "block")
            {
                document.getElementById(div).style.display = "none";
            }
        else
            {
                document.getElementById(div).style.display = "block";
            }
    }