[ENSG] collapsable asides

Fonctions pour fermer et ouvrir les asides

by toubia95

HTML

<nav class="menu-page">  
    <h4>Dans cette page</h4>
    <ol class="aside-content">
        <li><a href="#">Recherche publique ou privée</a></li>                                                    <li><a href="#">Domaines d'excellences des laboratoires</a></li>                                        <li><a href="#">Exploitation et gestion des ressources lkjsdhf lkjsdhf lskjdh fglskjhdf glksjhdfg lksjhdfgkl</a></li>
    </ol>
</nav>
<nav class="menu-section">
    <h4>Dans cette section</h4>
    <ul class="aside-content">
        <li><a href="#">Recherche publique ou privée</a>
            <ul>
                <li><a href="#">Sous-page 1 ksjdhf kjshd fksjhdf ksjdfh ksjdfh ksjdfh ksjdfh </a></li>                  <li><a href="#">Sous-page 2</a></li>                                         
            </ul>
        </li>
        <li><a href="#">Domaines d'excellences des laboratoires</a></li>                                        <li><a href="#">Exploitation et gestion des ressources skjdhf ksjhf ksjhdf ksjdhf ksjdhf ksjfh ksjhdf ksjhdf ksjhdf </a></li>
    </ul>
</nav>
<aside class="aside-telecharger">
    <h4>À télécharger</h4>
    <ul class="aside-content">
            <li><a href="coucou.doc">Description générale</a></li>
            <li><a href="test.pdf">Informations complémentaires sur les cursus Informations complémentaires sur les cursus</a></li>
            <li><a href="#">Informations complémentaires sur les cursus Informations complémentaires sur les cursus</a></li>
            <li><a href="#">Candidature pour le M1 Candidature pour le M1 Candidature pour le M1</a></li>
            <li><a href="#">Candidature pour le M2</a></li>
    </ul>
</aside>                                     
<aside class="aside-contact">
    <h4>Vos contacts</h4>
    <div class="aside-content">
        <p>Responsable du M2 : Dr Etienne DELOULE kjhs dfkjhs dfkjsh dfkjsh dfkjsh dfksjhd <br>                  Deloule(at)crpg.cnrs-nancy.fr</p>
    </div>
</aside>
<aside...

CSS

/***
 * 1. Supprime les div inutiles pour la classe .aside-content et l'appliquer aux ul et ol
 */

.caretdown {
    color: #666;
    text-decoration: underline;
}

h4:hover {
    cursor:pointer;
}

JavaScript

$(".menu-page h4, .menu-section h4, .aside-telecharger h4, .aside-contact h4, .aside-plusloin h4, .aside-divers h4").click(function() {
  $(this).toggleClass("caretdown");
  $(this).parent().find(".aside-content").slideToggle("slow");
});