Aby uzyskać efekt podobny do powyższych przykładów, wystarczy dołączyć do swojego kodu xhtml w seksji head bibliotekę jQuery.
Najlepiej najnowszą wersję dostępną na stronie  jquery.com.
Strona składaczy korzysta z wersji 1.3.2 tej biblioteki

<script src = "/js/jquery-1.3.2.min.js" type = "text/javascript" ></script>

Kod html powyższych przykładów wygląda następująco

<div class="example1">

<a href="javascript:void(0);" onclick="$('#box').toggle();" class="toggle"> rozwiń/zwiń</a>
<div id="box" class="box1">
zawartość rozwijanego boksu
</div>

</div>

<div class="example1">
<a href="javascript:void(0);" onclick="$('#box1').slidetoggle('slow');" class="toggle"> rozwiń/zwiń</a>
<div id="box1" class="box1">
zawartość rozwijanego boksu
</div>

</div>

Dla zdarzenia oclick wywołana jest funkcja z biblioteki jQuery  toggle, która powoduje pojawienie się jeżeli jest ukryty lub ukrycie jeżeli jest widoczny boksu o id= "box" ( czy jak w drugim przykładzie id="box1"). W drugim przykładzie funkcja toggle została zastompiona podobną funkcją slidetoggle  wywołana z parametrem slow, co nadało dodatkowy efekt animacji pokazującemu się elementowi, więcej o tych funkcjiach można poczytać tutaj http://api.jquery.com/toggle/ i tutaj http://api.jquery.com/slideToggle/ ( lista podobnych funkcji http://api.jquery.com/category/effects/)

Jeżeli chcemy aby na starcie boks był ukryty wystarczyw stylach nadać mu właściwość display:none;

Powyższe przykłady są bardzo proste graficznie, ale można uzyskać naprawde ciekawe efekty za pomocą tych prostych funkcji, stosując je np do boksu z akualnościami, po kliknięciu "czytaj więcej", do  rozwijanego menu itd, itd.