Return to Snippet

Revision: 59146
at August 20, 2012 23:01 by ringo380


Updated Code
<html>
<head>
<script type="text/javascript">
            $(document).ready(function()
            {
                $(".exp_body").hide();
                $(".exp_head").click(function()
                {
                    $(this).next(".exp_body").slideToggle(400);
                    $(this).toggleClass('exp_head_expanded'); // <-- This changes the element's class when clicked. use it with CSS to create a "plus/minus" expand style.
                });
            });
</script>
<style>
.expand {
	margin: 0px;
	padding: 0px;
	width: 750px;
}

.exp_head {
	padding: 5px 10px 5px 35px;
	cursor: pointer;
	color: #41270E;
	position: relative;
	background: #779DA7 url('../images/plus.png') no-repeat 10px;
	margin: 1px;
}

.exp_head_expanded {
	background: #779DA7 url('../images/minus.png') no-repeat 10px;
}

.exp_body {
	padding: 5px 10px 15px;
	background-color: #F4F4F8;
	color: #8D633A;
	word-wrap: break-word;
}
</style>
</head>
<body>
<?php

function print_array($array, $title) {
    echo "<p class='exp_head'>\$$title</p>\n";
    echo "<div class='exp_body'>\n";
    echo "\t<pre>\n";
    print_r($array);
    echo "\t</pre>\n";
    echo "</div>\n";
}

echo "<div class='expand'>";

# -- Any arrays can be added below to be placed in the same list
print_array($_SERVER,'_SERVER');
print_array($x,'x');
print_array($y,'y');

echo "</div>";

?>
</body>
</html>

Revision: 59145
at August 20, 2012 22:56 by ringo380


Updated Code
<html>
<head>
<script type="text/javascript">
            $(document).ready(function()
            {
                $(".exp_body").hide();
                $(".exp_head").click(function()
                {
                    $(this).next(".exp_body").slideToggle(400);
                    $(this).toggleClass('exp_head_expanded'); // <-- This changes the element's class when clicked. use it with CSS to create a "plus/minus" expand style.
                });
            });
</script>
<style>
.expand {
	margin: 0px;
	padding: 0px;
	width: 750px;
}

.exp_head {
	padding: 5px 10px 5px 35px;
	cursor: pointer;
	color: #41270E;
	position: relative;
	background: #779DA7 url('../images/plus.png') no-repeat 10px;
	margin: 1px;
}

.exp_head_expanded {
	background: #779DA7 url('../images/minus.png') no-repeat 10px;
}

.exp_body {
	padding: 5px 10px 15px;
	background-color: #F4F4F8;
	color: #8D633A;
	word-wrap: break-word;
}
</style>
</head>
<body>
<?php

function print_array($array, $title) {
    echo "<p class='exp_head'>\$$title</p>\n";
    echo "<div class='exp_body'>\n";
    echo "\t<pre>\n";
    print_r($array);
    echo "\t</pre>\n";
    echo "</div>\n";
}

echo "<div class='exp_list'>";
# -- Any arrays can be added below to be placed in the same list
print_array($_SERVER,'_SERVER');
echo "</div>";

?>
</body>
</html>

Revision: 59144
at August 20, 2012 22:51 by ringo380


Initial Code
<html>
<head>
<script type="text/javascript">
            $(document).ready(function()
            {
                $(".exp_body").hide();
                $(".exp_head").click(function()
                {
                    $(this).next(".exp_body").slideToggle(400);
                    $(this).toggleClass('exp_head_expanded'); // <-- This changes the element's class when clicked. use it with CSS to create a "plus/minus" expand style.
                });
            });
</script>
<?php

function print_array($array, $title) {
    echo "<p class='exp_head'>\$$title</p>\n";
    echo "<div class='exp_body'>\n";
    echo "\t<pre>\n";
    print_r($array);
    echo "\t</pre>\n";
    echo "</div>\n";
}

echo "<div class='exp_list'>";
print_array($_SERVER,'_SERVER');
echo "</div>";

?>

Initial URL


Initial Description
I use this primarily for debugging purposes. This simply takes an array and creates an expandable item that prints the array out in a \<pre\> wrapping, making it easy to read. Very basic snippet.

Initial Title
Print large arrays in a nicely formatted list of expandable divs

Initial Tags
php, debug, array

Initial Language
PHP