Description:
Create a button labeled “more” that changes into “Less” when area is expanded. Can be used also for other similar situations like “Expand / Contract”, “Maximize / Minimize” and so on.
Solution:
First, create the image, containing both sides of the button, so also “More” and “Less”, let’s say 100px width and 40px height, of which, 20px height for each of the image.
Second, create the mark-up for the button and add the following CSS class:
.button { background-image: url(“/image/more_less.png”); background-position: 0 0px; height: 20px;
width: 100px;}
Then, with javascript onClick() make sure you change the background-position attribute, to incorporate the second part of the image:
.button {
background-image: url(“/image/more_less.png”); background-position: 0 -20px; height: 20px;
width: 100px;}
