A Better Way to Toggle

A Better Way to Toggle

(Warning: what follows may be obvious or trivial to many.)

One of the cool things about AJAX is switching parts on and off: you
can make an element visible simply by

myElement.style.display = "block";

or hide it with

myElement.style.display = "none";

But the problem with this is that it requires the JavaScript script to
know a lot about the document. The example above doesn’t look too bad,
but what if you have something like a pulldown menu that appears when
you click a button?

Let’s say that originally, the button is gray and has a “+” icon next
to the text. When you click on it, the menu becomes visible, but the
button also changes to red, and the “+” icon changes to “-“, to show
that the menu is active.

Now you have all sorts of CSS resources that you have to keep track
of. It would be nice to put them in the .css file, with the
rest of the style stuff.


Fortunately, CSS allows you to select style rules based on an
element’s attributes:

.menu {
	display:	none;
}

.menu[visible="true"] {
	display:	block;
}

This means that in your HTML, you can set the initial state of the
menu with


...

Then, in the JavaScript, just toggle the visible attribute
from "false" to "true".

This
example
displays a short snippet of text. If you click on it, it expands to
show the full text (and also changes the background color):

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
	>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

function toggle(self)
{
	var collapsed = self.getAttribute("collapsed");
	self.setAttribute("collapsed",
		(collapsed == "true" ? "false" : "true"));
}


<style type="text/css">
.container {
	background-color:	white;
	padding:		0px;
	max-height:		auto;
}

.container[collapsed="true"] {
	background-color:	yellow;
	max-height:		5em;
	overflow:		auto;
}
</style>

<title>Toggle example</title>
</head>
<body>
<hr/>



Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam dignissim mollis ipsum. Sed id felis nec lacus scelerisque fringilla. Proin placerat scelerisque pede. Cras blandit. Nam sit amet enim ut felis pellentesque vestibulum. Nulla metus mauris, dignissim sed, suscipit ut, fringilla ut, mauris. Ut tempor viverra erat. Curabitur dignissim orci sit amet augue. Proin gravida. Etiam sagittis, lacus ac ullamcorper imperdiet, velit velit ultrices velit, in convallis enim nisl ut odio. Donec augue. Quisque iaculis turpis nec felis pulvinar aliquet. Aenean aliquam venenatis orci. Vivamus est dui, euismod vel, auctor quis, interdum in, urna. Donec magna. Etiam ultrices odio id lectus. Nullam euismod, libero nec venenatis vestibulum, mi libero euismod elit, quis pellentesque lacus nisl sit amet ante. Curabitur lorem urna, sodales non, faucibus non, rutrum in, orci. Vestibulum elementum.



Maecenas sed nunc. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam id eros. In erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vulputate. Nunc semper nulla non risus. Curabitur elit metus, laoreet non, pharetra ut, varius at, massa. In semper mollis nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc posuere scelerisque felis. Sed porttitor tortor ut augue. Aenean id risus vitae felis dapibus varius. Nam dolor dolor, adipiscing sit amet, consequat non, rutrum ac, justo.



Nulla dolor. Ut a orci a augue viverra dignissim. Aliquam accumsan aliquam leo. Nunc vel mi sit amet lorem rhoncus lobortis. Aenean nunc nisi, lobortis vehicula, consequat vel, hendrerit at, mauris. Nunc id quam id tellus eleifend feugiat. Mauris turpis ligula, lacinia eget, varius ut, pharetra vel, lorem. Vivamus nec diam. Nam mauris enim, rhoncus vel, fermentum ut, posuere ut, tortor. Fusce ultrices tempor quam. Morbi dolor arcu, hendrerit ac, posuere sit amet, sodales nec, nibh. Mauris nulla lacus, lobortis vitae, semper a, lacinia vel, lacus. Aenean aliquet iaculis lectus. Fusce elementum molestie felis. In hac habitasse platea dictumst. Duis ipsum. Sed metus.



<hr/>
</body>
</html>
, ,
Comments 0