per intero
codice:
<html>
<head>
<title>Toggle Pane Test</title>
<script type="text/javascript" src="scripts/prototype.js"></script>
<script>
function da_chiamare_allonload() {
$$('legend a').each(function(link) {
link.status = false;
link.className = 'linkchiuso';
link.onclick = function() {
var divrelated = this.rel; //uso l'attributo rel del link per sapere l'id del div da aprire/chiudere
if ($(divrelated)) {
if (this.status) {
// this è il link cliccato. Puoi cambiare classe al link (this.className) al legend
// che lo contiene (this.parentNode.className), etc etc.
$(divrelated).style.display = 'none';
this.className = 'linkchiuso';
}
else {
$(divrelated).style.display = 'block';
this.className = 'linkaperto';
}
this.status = !this.status;
}
return false;
}
});
}
window.onload = function() {
da_chiamare_allonload();
}
</script>
<style type="text/css">
body {
font-family: Verdana,sans-serif;
font-size: 9pt;
padding: 16px;
}
fieldset {
border: 0;
padding: 4px 12px;
background-color:#FFFFCC
}
.readmore {
background-color: #00FF00;
color: #000
}
</style>
</head>
<body>
<fieldset id="testFieldset">
<legend>Leggi tutto</legend>
<div class="text ext_content" id="content1" style="display:none">
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor
incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat
cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
</fieldset>
<fieldset id="testFieldset">
<legend>Leggi tutto</legend>
<div class="text ext_content" id="content2" style="display:none">
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor
incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat
cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
</fieldset>
</body>
</html>