accordeon

by toubia95

HTML

<div class="field-item even">
    <p>Les Relations Internationales sont&nbsp; gérées au niveau des composantes par des correspondants Relations Internationales de composantes</p>
    <p>Pour trouver votre correpondant en composante, <strong>sélectionnez votre domaine d'étude :</strong>
        <br>&nbsp;</p>
    <ul class="accordion">
        <li class=""><a href="#ArtsLettreLangue">Arts, lettres et langues</a>

            <ul style="display: none;">
                <li><a href="#ALLEERUDI">Etudes et ressources universitaires à distance (ERUDI Nancy)</a>

                    <div style="display: none;">
                        <div style="display:table-cell;clear:none;float:left;width:45%;"><strong>ENSEIGNANT :</strong>
                            <br><a href="mailto:[email protected]">Marc Nussbaumer</a>
                        </div>
                        <div style="display:table-cell;width:45%;float:left;clear:none;"><strong>ADMINISTRATIF :</strong>
                            <br><a href="mailto:[email protected]">Christelle Jeandemange</a> 
                            <br>03 87 50 46 75</div>
                    </div>
                </li>
                <li><a href="#ALLIECA">Institut Européen de Cinéma et d'Audiovisuel (IECA)</a>

                    <div style="display: none;">
                        <div style="display:table-cell;clear:none;float:left;width:45%;"><strong>ENSEIGNANT :</strong>
                            <br><a href="mailto:[email protected]">Marie-Josephe Pierron </a>
                        </div>
                        <div style="display:table-cell;width:45%;float:left;clear:none;"><strong>ADMINISTRATIF :<br><a href="mailto:[email protected]">Marlene Baldassi</a> - 03 54 50 49 06</strong>
                        </div>
                    </div>
                </li>
                <li><a href="#ALLLanguesCulture">UFR Langues et Cultures Etrangères (Nancy)</a>

...

CSS

/*******noeud 1533 : contact des relations internationales 
.page-node-1533	ul.accordion
{ list-style-type: none; padding: 0; margin: 0 0 0 2em;
border: 1px solid #17a; border-top: none; border-left: none; }
.page-node-1533	.accordion ul,
.page-node-1533	.accordion ul { padding: 0; margin: 0; float: left; display: block;width:auto }


.page-node-1533	ul.accordion li {

cursor: pointer; list-style-type: none; padding: 0; margin: 0; float: left; display: block; width: 100%;}



.page-node-1533 .accordion a { text-decoration: none;font: bold 1.1em/2em Arial, sans-serif; 
color: #222; padding: 0 15px;  margin:  0;display: block; cursor: pointer;}

.page-node-1533 .accordion>li>a {	background: url("/misc/menu-collapsed.png") no-repeat  2px  50% #eee;
 border-bottom:1px solid #666;border-top: 1px solid #ccc; }
.page-node-1533 .accordion li a:hover{text-decoration:none;}


.page-node-1533	ul.accordion>li.active> a,
.page-node-1533	ul.accordion >li> a:hover
{  color:#fff;padding:0;
padding-left:15px \9;
 background-image: url("/misc/menu-collapsed.png") no-repeat  2px  50% \9;
 background:#666 url("/misc/menu-collapsed.png") no-repeat  2px  50% !important;/****pour ie
background: #666   -webkit-gradient(linear, left top, left bottom, from(#999), to(#666)) !important ;
background:  #666  -moz-linear-gradient(top,  #999,  #666) !important;
}


.page-node-1533	ul.accordion>li.active> a:before,
.page-node-1533	ul.accordion >li> a:hover:before
{float:left;background: url("/misc/menu-expanded.png") no-repeat  4px  50%  transparent !important ;width:15px;
content:'';margin-right:10px;vertical-align:50%;height:28px;}


.page-node-1533 .accordion li div {background:#e1eded;color:#888;padding: 10px 0 0 0 ;display: block; clear: both; float: left; width:100%}
.page-node-1533 .accordion li div div {padding:0 0 0 10px;margin:0}******/

/* Level 2
.page-node-1533	.accordion li ul{padding-left:1em; width:95%;background: #fff;padding-top:1em;}
.page-node-1533	.accordion li ul li {...

JavaScript

$(document).ready(function () {

    //$('.accordion .head').click(function() {
    //$('#accordion h3').click(function () {
    $('ul.accordion li a').click(function () {
        //alert("Hello!");
        $(this).next().toggle();
        return false;
    }).next().hide();
});