Faire un sommaire

Le style

.c_temp
{
color: #de7008;
text-decoration: none;
cursor: pointer;
font-size: 0.85em;
}

ul.chap, ul.chap li
{
list-style-image: none;
list-style-type: none;
}

Le Script

<script type="text/javascript">

var idt = "";

function poke (id)
{
idt=id + "t";

if(document.getElementById(id).style.display=='none')
{
document.getElementById(id).style.display='block';
document.getElementById(idt).innerHTML='▼ ' +
document.getElementById(idt).innerHTML.substr(2,document.getElementById(idt).innerHTML.length
);
}
else
{
document.getElementById(id).style.display='none';
document.getElementById(idt).innerHTML='► ' +
document.getElementById(idt).innerHTML.substr(2,document.getElementById(idt).innerHTML.length
);
}
return;
}
</script>

Le HTML

<ul class="chap">

<li id="ch00t" class="c_temp" onclick="poke('ch00');">► Les Gadgets</li>

<ul id="ch00" style="display: none;">

<li><a href="http://viti-vino.blogspot.com/2009/06/sonoriser-ses-images-avec-dewplayer.html"
title="Sonoriser ses images avec Dewplaye" target="_blank">Sonoriser ses images avec
Dewplayer</a></li>
<li><a href="http://viti-vino.blogspot.com/2008/12/des-gadgets-pour-son-blog.html"
title="Ajouter du son et des videos sur son Blog" target="_blank">Ajouter du son et des
videos sur son Blog</a></li>
</ul>


<li id="ch01t" class="c_temp" onclick="poke('ch01');">► Les Diaporamas</li>

<ul id="ch01" style="display: none;">

<li><a href="http://viti-vino.blogspot.com/2008/12/des-gadgets-pour-son-blog-2.html"
title="Des Gadgets pour son Blog" target="_blank">Des Gadgets pour son Blog</a></li>
<li><a
href="http://viti-vino.blogspot.com/2008/10/un-diaporama-dans-le-corps-du-message.html"
title="Un Diaporama dans le corps du message" target="_blank">Un Diaporama dans le corps du
message</a></li>
</ul>

<li id="ch02t" class="c_temp" onclick="poke('ch02');">► Les bordures</li>

<ul id="ch02" style="display: none;">

<li><a href="http://viti-vino.blogspot.com/2010/07/ombrer-boites-box-shadow.html" title="Les
bords ombragés" target="_blank">Les bords ombragés</a></li>
<li><a href="http://viti-vino.blogspot.com/2008/07/mettre-ses-photos-en-valeurs.html"
title="Mettre ses photos en valeur" target="_blank">Mettre ses photos en valeur</a></li>
</ul>

<li id="ch03t" class="c_temp" onclick="poke('ch03');">► Autre</li>

<ul id="ch03" style="display: none;">

<li><a href="http://viti-vino.blogspot.com/2010/03/code-qr-liens-telephone-mobile.html"
title="Un QR Code sur son Blog" target="_blank">Un QR Code sur son Blog</a></li>
<li><a href="http://viti-vino.blogspot.com/2010/01/fichiers-joints-podcasting-blogger.html"
title="Fichiers joints et Podcasting" target="_blank">Fichiers joints et Podcasting</a></li>
<li><a href="http://viti-vino.blogspot.com/2009/12/google-web-elements.html" title="Les
Google Web Elements" target="_blank">Les Google Web Elements</a></li>
<li><a href="http://viti-vino.blogspot.com/2008/12/google-maps-dans-les-messages-du-blog.html"
title="Google Maps sur son Blog" target="_blank">Google Maps sur son Blog</a></li>
</ul>

</ul>

Le Résultat

• ► Les Gadgets
• Sonoriser ses images avec Dewplayer
• Ajouter du son et des videos sur son Blog
• ► Les Diaporamas
• Des Gadgets pour son Blog
• Un Diaporama dans le corps du message
• ► Les bordures
• Les bords ombragés
• Mettre ses photos en valeur
• ► Autre


• Un diaporama avec les derniers messages du Blog
• Un QR Code sur son Blog
• Fichiers joints et Podcasting
• Les Google Web Elements
• Google Maps sur son Blog