Вот пример с кнопкой +/-, без изображений. Весь текст и CSS.
http://jsbin.com/ikeca
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test Expander</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body { background-color: #FFF; font: 16px Helvetica, Arial; color: #000; }
.hidden { display:none;}
.indented {margin-left: 32px;}
a.expander:active,
a.expander:visited,
a.expander:link {
color: #0000CD; /* ca2f2b; */
text-decoration : none;
/* display : block; */
border-bottom: 1px dotted #000;
border-left: 1px dotted #000;
border-right: 1px dotted #000;
border-top: 1px dotted #000;
padding: 1px;
}
a.expander:hover {
color: #FF00FF; /* FF00FF == Fuschia #000; */
text-decoration : none;
background: #E6E6FA; /* shading */ /* #f4f4f4; */
padding: 1px;
/* draw a shaded box around the thing when hovering */
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-top: 1px solid #ccc;
}
</style>
</head>
<body>
<h1>Hello</h1>
<div id="div0">
<p id="intro">
<a href="#" class='expander'>+</a>
Introduction</p>
<p class='hidden indented' >
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer
vulputate, nibh non rhoncus euismod, erat odio pellentesque lacus,
sit amet convallis mi augue et odio. Phasellus cursus urna facilisis quam.
</p>
<p class='hidden indented' > Quisque pharetra lacus quis sapien. Duis
id est non wisi sagittis adipiscing. Nulla facilisi. Etiam quam erat,
lobortis eu, facilisis nec, blandit hendrerit, metus. Fusce
hendrerit. Nunc magna libero, sollicitudin non, vulputate non, ornare
id, nulla. Suspendisse potenti. Nullam in mauris.
</p>
</div>
<div id="div1">
<p id="sec1">
<a href="#" class='expander'>+</a>
Section 1</p>
<p class='hidden indented' >
Vivamus congue pede at quam. Aliquam aliquam leo vel turpis. Ut
commodo. Integer tincidunt sem a risus. Cras aliquam libero quis
arcu. Integer posuere. Nulla malesuada, wisi ac elementum sollicitudin,
libero libero molestie velit, eu faucibus est ante eu libero. Sed
vestibulum, dolor ac ultricies consectetuer, tellus risus interdum diam,
a imperdiet nibh eros eget mauris. Donec faucibus volutpat
augue. Phasellus vitae arcu quis ipsum ultrices fermentum. Vivamus
ultricies porta ligula. Nullam malesuada. Ut feugiat urna non
turpis. Vivamus ipsum. Vivamus eleifend condimentum risus. Curabitur
pede. Maecenas suscipit pretium tortor. Integer pellentesque.
</p>
</div>
<div id="div2">
<p id="sec2">
<a href="#" class='expander'>+</a>
Section 2</p>
<p class='hidden indented' >
Mauris est. Aenean accumsan purus vitae ligula. Lorem ipsum dolor sit
amet, consectetuer adipiscing elit. Nullam at mauris id turpis placerat
accumsan. Sed pharetra metus ut ante. Aenean vel urna sit amet ante
pretium dapibus. Sed nulla. Sed nonummy, lacus a suscipit semper, erat
wisi convallis mi, et accumsan magna elit laoreet sem. Nam leo est,
cursus ut, molestie ac, laoreet id, mauris. Suspendisse auctor nibh.
</p>
<p class='hidden indented' >
Nulla erat lorem, fringilla eget, ultrices nec, dictum sed,
sapien. Aliquam libero ligula, porttitor scelerisque, lobortis nec,
dignissim eu, elit. Etiam feugiat, dui vitae laoreet faucibus, tellus
urna molestie purus, sit amet pretium lorem pede in erat. Ut non libero
et sapien porttitor eleifend.
</p>
</div>
</body>
</html>