1 post tagged “js”
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)
<style type="text/css" media="screen">
.container {
width: 300px;
}
.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> <!-- end .bd -->
</div> <!-- end .module -->
</div> <!-- end .container -->
And you're done! Easier than a soft-boiled egg.
