Mostrar ocultar contenido con liferay accesible

En páginas del sitio web seleccionar la página que queremos que haga la acción y en el apartado javascript añadir el siguiente código:



function toggleDivOL( elemID )
{
var elem = document.getElementById( elemID );
if( elem.style.position != "relative" )
{
elem.style.position = "relative";
elem.style.left = "0px";
}
else
{
elem.style.position = "absolute";
elem.style.left = "-4000px";
}
}


En el css añadir



.testDiv {
width: 100%;
padding: 5px;
background-color: #DDD000;
color: #CC0000;
border: 1px solid #000000;
position:absolute;
left:-4000px;


}




y el código html para añadir al contenido web



<h1>
Hiding a DIV using the off-left technique</h1>
<p>
<a href="javascript:toggleDivOL('toHide');" title="Hide the DIV">Hide/Show the DIV</a></p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nec arcu. Fusce tempus, nibh sed tincidunt tincidunt, purus quam volutpat nunc, id rhoncus justo lorem in turpis. Phasellus interdum. Nam dui. Nulla a metus. Suspendisse cursus vehicula lacus. Aliquam malesuada. Suspendisse sagittis elementum purus. Cras ornare sem et est. Duis ut nunc nec mi dignissim elementum.</p>
<div class="testDiv" id="toHide">
Here is the DIV we will hide. Click the link above to hide this DIV. When hidden it is pushed 4000 pixels to the left which effectively hides it. Clicking the link multiple times will toggle between hidden and shown states.</div>
<p>
Cras velit magna, venenatis a, posuere lobortis, dignissim sed, sem. Donec at ipsum. Mauris rhoncus. Phasellus ornare, velit in bibendum elementum, velit erat pulvinar neque, id aliquam dolor felis id diam. Donec nulla quam, venenatis lobortis, vestibulum nec, consequat quis, ante. Vestibulum vel quam vel nunc viverra sodales. Mauris sed dolor. Vivamus accumsan ipsum a urna. Proin sollicitudin. Sed adipiscing. Vestibulum elit purus, imperdiet in, eleifend sit amet, porta vitae, dui. Vivamus nec felis. Etiam vitae metus. Donec enim justo, pharetra molestie, sollicitudin a, suscipit non, quam. In hac habitasse platea dictumst. Nulla aliquam ante.</p>
<p>
&nbsp;</p>
<p>
Aenean porttitor molestie felis. Nulla vulputate malesuada ligula. Pellentesque porttitor aliquam magna. Pellentesque dolor libero, varius quis, elementum rutrum, bibendum non, turpis. Cras aliquam urna at dolor. Duis quam. Fusce laoreet. Donec accumsan volutpat lorem. Curabitur ac massa vel ipsum facilisis faucibus. Nam metus. Vestibulum sed risus.</p>


Sí tenemos el javascript desactivado simplemente se mostrará todo el contenido.

Vía http://www.netlobo.com/off_left_div_hiding.html