YUI: Simple show/hide div using Module

nobody@vox.com(Vani) — Thu, 01 Feb 2007 19:40:41 -0800

What you'll need from the Yahoo User Interface Library:
CSS: reset-fonts-grids.css
Javascript: yahoo-dom-event.js, container.js

Download 'em all.

Hop to it, campers! Call the YUI stuff first:

    <link rel="stylesheet" href="css/reset-fonts-grids.css" type="text/css" media="screen" charset="utf-8" />
    <script src="js/yahoo-dom-event.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/container.js" type="text/javascript" charset="utf-8"></script>

Add some styles for the prettiness factor. :o)

            .container h3 {
                font-size: 136%;
                font-weight: bold;
            }

                .container h3 a {
                    display: block;
                    float: right;
                    font-size: 77%;
                    font-weight: normal;
                    text-decoration: none;
                }

             .module {
                padding: 5px;
            }
    </style>

Apply YUI Javascript generously.

<script type="text/javascript" charset="utf-8">
YAHOO.namespace("cats.container");

    function init() {
        YAHOO.cats.container.module = new YAHOO.widget.Module("module");
        YAHOO.cats.container.show = new YAHOO.widget.Module("show");
        YAHOO.cats.container.hide = new YAHOO.widget.Module("hide");
        YAHOO.cats.container.module.render();

        YAHOO.util.Event.addListener("show", "click", YAHOO.cats.container.module.show, YAHOO.cats.container.module, true);
        YAHOO.util.Event.addListener("show", "click", YAHOO.cats.container.hide.show, YAHOO.cats.container.hide, true);
        YAHOO.util.Event.addListener("show", "click", YAHOO.cats.container.show.hide, YAHOO.cats.container.show, true);
        YAHOO.util.Event.addListener("hide", "click", YAHOO.cats.container.module.hide, YAHOO.cats.container.module, true);
        YAHOO.util.Event.addListener("hide", "click", YAHOO.cats.container.show.show, YAHOO.cats.container.show, true);
        YAHOO.util.Event.addListener("hide", "click", YAHOO.cats.container.hide.hide, YAHOO.cats.container.hide, true);
    }

YAHOO.util.Event.addListener(window, "load", init);
</script>

And the HTML. (Try holding your breath - it's really that quick!)

<div class="container">
        <h3>
            <a href="#" id="show" style="display: none;">Show</a>
            <a href="#" id="hide">Hide</a>
            Header
        </h3>
        <div id="module" class="module">
            <div class="bd">
                <ul>
                    <li><input type="checkbox" name="some_name" value="" id="some_name" />  Lorem ipsum dolor sit amet</li>
                    <li><input type="checkbox" name="some_name" value="" id="some_name" />  Lorem ipsum dolor sit amet</li>
                    <li><input type="checkbox" name="some_name" value="" id="some_name" />  Lorem ipsum dolor sit amet</li>
                    <li><input type="checkbox" name="some_name" value="" id="some_name" />  Lorem ipsum dolor sit amet</li>
                    <li><input type="checkbox" name="some_name" value="" id="some_name" />  Lorem ipsum dolor sit amet</li>
                </ul>
            </div> 
        </div> 
    </div>

And you're done! Easier than a soft-boiled egg.

Read and post comments | Send to a friend

vaniraja.com

YUI: Simple show/hide div using Module