Boite déroulante : effet accordéon

CM -  
 CM -
Bonjour,

Je cherche déspérément un code HTLM qui ferait ceci :

TITRE 1
Texte : blablablabla

TITRE 2
Texte : blablablabla

Seulement, il me faut un code qui puisse contenir beaucoup de contenus
et l'effet accordéon ne fonctionnerait qu'avec un clic de souris ?

Comment faire ?
Cordialement
CM

5 réponses

  1.
    RAD ZONE Messages postés 5362 Statut Contributeur 1 360
     
    Salut

    sinon sans js mais avec un peu de boulot css
    un exemple en css html5! 

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>
    RAD ZONE Webcreation
    </title>
    <style type="text/css">
    <!--
    /* CSS reset */
    body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
    }

    html, body {
    margin: 0;
    padding: 0;
    }

    table {
    border-collapse: collapse;
    border-spacing: 0;
    }

    fieldset, img {
    border: 0;
    }

    address, caption, cite, code, dfn, th, var {
    font-style: normal;
    font-weight: normal;
    }

    ol, ul {
    list-style: none;
    }

    caption, th {
    text-align: left;
    }

    h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
    }

    q:before, q:after {
    content: '';
    }

    abbr, acronym {
    border: 0;
    }

    section, header{
    display: block;
    }
    /*Style  General */

    body{
    font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
    background: #e0e3ec;
    font-weight: 400;
    font-size: 15px;
    color: #393b40;
    overflow-y: scroll;
    }

    a{
    color: #333;
    text-decoration: none;
    }

    .container{
    width: 100%;
    position: relative;
    text-align: center;
    }

    .clr{
    clear: both;
    }

    .Accordeon-container{
    width: 400px;
    margin: 10px auto 30px auto;
    text-align: left;
    }

    .Accordeon-container label{
    font-family: 'Arial Narrow', Arial, sans-serif;
    padding: 5px 20px;
    position: relative;
    z-index: 20;
    display: block;
    height: 30px;
    cursor: pointer;
    color: #777;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
    line-height: 33px;
    font-size: 19px;
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #ffffff), color-stop(100%, #eaeaea));
    background: -webkit-linear-gradient(top, #ffffff 1%, #eaeaea 100%);
    background: -o-linear-gradient(top, #ffffff 1%, #eaeaea 100%);
    background: -ms-linear-gradient(top, #ffffff 1%, #eaeaea 100%);
    background: linear-gradient(top, #ffffff 1%, #eaeaea 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );
    box-shadow: 0px 0px 0px 1px rgba(155, 155, 155, 0.3), 1px 0px 0px 0px rgba(255, 255, 255, 0.9) inset, 0px 2px 2px rgba(0, 0, 0, 0.1);
    }

    .Accordeon-container label:hover{
    background: #fff;
    }

    .Accordeon-container input:checked + label, .Accordeon-container input:checked + label:hover{
    background: #c6e1ec;
    color: #3d7489;
    text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.6);
    box-shadow: 0px 0px 0px 1px rgba(155, 155, 155, 0.3), 0px 2px 2px rgba(0, 0, 0, 0.1);
    }

    .Accordeon-container label:hover:after, .Accordeon-container input:checked + label:hover:after{
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    right: 13px;
    top: 7px;
    /* background: transparent url(../images/fleche_down.png) no-repeat center center;
    image de fleche a creer */
    }

    .Accordeon-container input:checked + label:hover:after{
    /*background-image: url(../images/fleche_up.png);
    image de fleche a creer */}

    .Accordeon-container input{
    display: none;
    }

    .Accordeon-container article{
    background: rgba(255, 255, 255, 0.5);
    margin-top: -1px;
    overflow: hidden;
    height: 0px;
    position: relative;
    z-index: 10;
    -webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    -moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    -o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    -ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    }

    .Accordeon-container article p{
    font-style: italic;
    color: #777;
    line-height: 23px;
    font-size: 14px;
    padding: 20px;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
    }

    .Accordeon-container input:checked ~ article{
    -webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    -moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    -o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    -ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    box-shadow: 0px 0px 0px 1px rgba(155, 155, 155, 0.3);
    }

    .Accordeon-container input:checked ~ article.Accordeon-petit{
    height: 120px;/* c est la que tu met les hauteurs que tu veux  */
    }

    .Accordeon-container input:checked ~ article.Accordeon-moyen{
    height: 180px;/* c est la que tu met les hauteurs que tu veux  */
    }

    .Accordeon-container input:checked ~ article.Accordeon-grand{
    height: 550px;/* c est la que tu met les hauteurs que tu veux  */
    }

    .Accordeon-container input:checked ~ article.Accordeon-tres-grand{
    height: 850px;/* c est la que tu met les hauteurs que tu veux  */
    }
    -->
    </style>
    <!-- JS MODERNIZR  pour la reco CSS3 HTML5-->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
    <!-- JS MODERNIZR -->
    </head>
    <body>
    <div class="container">
    <section class="Accordeon-container">
    <div>
    <input id="Accordeon-1" name="Accordeon-1" type="radio" checked> <label for="Accordeon-1">Accordeon
    petit</label>
    <article class="Accordeon-petit">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. <em>Tibi hoc incredibile, quod beatissimum.</em>
    Philosophi autem in suis lectulis plerumque moriuntur.
    </p>
    </article>
    </div>
    <div>
    <input id="Accordeon-2" name="Accordeon-1" type="radio"> <label for="Accordeon-2">Accordeon tres
    grand</label>
    <article class="Accordeon-tres-grand">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href='http://loripsum.net/' target=
    '_blank'>Duo Reges: constructio interrete.</a> Quid est igitur, inquit, quod requiras? Claudii libidini,
    qui tum erat summo ne imperio, dederetur. Restatis igitur vos; Quid, quod homines infima fortuna, nulla
    spe rerum gerendarum, opifices denique delectantur historia? Ut id aliis narrare gestiant? Ad corpus
    diceres pertinere-, sed ea, quae dixi, ad corpusne refers? Quae quo sunt excelsiores, eo dant clariora
    indicia naturae. <strong>Certe, nisi voluptatem tanti aestimaretis.</strong> <mark>Sint ista
    Graecorum;</mark>
    </p>
    <h1>
    Istam voluptatem, inquit, Epicurus ignorat?
    </h1>
    <p>
    Praeteritis, inquit, gaudeo. Audax negotium, dicerem impudens, nisi hoc institutum postea translatum ad
    philosophos nostros esset. Vitiosum est enim in dividendo partem in genere numerare. Quamquam ab iis
    philosophiam et omnes ingenuas disciplinas habemus; Quid est, quod ab ea absolvi et perfici debeat? Quae
    quidem sapientes sequuntur duce natura tamquam videntes; Expectoque quid ad id, quod quaerebam,
    respondeas. Nihil minus, contraque illa hereditate dives ob eamque rem laetus. Cur ipse Pythagoras et
    Aegyptum lustravit et Persarum magos adiit?
    </p>
    <h2>
    Cum audissem Antiochum, Brute, ut solebam, cum M.
    </h2>
    <ul>
    <li>Ea, quae dialectici nunc tradunt et docent, nonne ab illis instituta sunt aut inventa sunt?
    </li>
    <li>Quod si ita sit, cur opera philosophiae sit danda nescio.
    </li>
    </ul>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Egone non intellego, quid sit don Graece, Latine
    voluptas? Iam in altera philosophiae parte. Omnes enim iucundum motum, quo sensus hilaretur. Habent enim
    et bene longam et satis litigiosam disputationem. Quantum Aristoxeni ingenium consumptum videmus in
    musicis? Idemne potest esse dies saepius, qui semel fuit? Restinguet citius, si ardentem acceperit.
    <em>Duo Reges: constructio interrete.</em>
    </p>
    </article>
    </div>
    <div>
    <input id="Accordeon-3" name="Accordeon-1" type="radio"> <label for="Accordeon-3">Accordeon grand</label>
    <article class="Accordeon-grand">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Atque hoc loco similitudines eas, quibus illi
    uti solent, dissimillimas proferebas. Ut in geometria, prima si dederis, danda sunt omnia. Quod
    praeceptum quia maius erat, quam ut ab homine videretur, idcirco assignatum est deo.
    </p>
    <h1>
    Quid ei reliquisti, nisi te, quoquo modo loqueretur, intellegere, quid diceret?
    </h1>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Quorum sine causa fieri nihil putandum
    est.</strong> <mark>Comprehensum, quod cognitum non habet?</mark> Et non ex maxima parte de tota
    iudicabis? Nemo nostrum istius generis asotos iucunde putat vivere. Vitae autem degendae ratio maxime
    quidem illis placuit quieta. Cum audissem Antiochum, Brute, ut solebam, cum M. Duo Reges: constructio
    interrete.
    </p>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Atque hoc loco similitudines eas, quibus illi
    uti solent,Lorem ipsum dolor sit amet, consectetur adipiscing elit. <em>Quodsi ipsam honestatem undique
    pertectam atque absolutam.</em> Restinguet citius, si ardentem acceperit.
    </p>
    </article>
    </div>
    <div>
    <input id="Accordeon-4" name="Accordeon-1" type="radio"> <label for="Accordeon-4">Accordeon moyen</label>
    <article class="Accordeon-moyen">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Habes, inquam, Cato, formam eorum, de quibus
    loquor, philosophorum. Nec lapathi suavitatem acupenseri Galloni Laelius anteponebat, sed suavitatem
    ipsam neglegebat; <strong>Sed fortuna fortis;</strong> Sed ad bona praeterita redeamus. <strong>Quonam,
    inquit, modo?</strong> Non laboro, inquit, de nomine.
    </p>
    </article>
    </div>
    </section>
    </div>
    </body>
    </html>



    tu decide des hauteurs d accordeons en fonction du texte , j ai commente le css ou modifier ! important ne pas donner des "name" different aux imput sinon plus de fermeture ouverture ;-)))

    ps: ne passe pas sur ie8 et inferieur

    a+


    ♣ La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣
    4
  3. bbaasstt Messages postés 233 Statut Membre 17
     
    si tu veut mettre des effets sur ton site il te faudrat t'atteler au javascript ! regarde du coter du Jquery
    0
  4. ideal23 Messages postés 505 Statut Membre 28
     
    tu fais menu accordéon sur google tu devrais trouver ton bonheur.
    0

  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. CM
     
    Merci des réponses,

    Pour ce qui est de google... j'ai fouillé tout un après-midi
    sans succès...

    Pour le code, je vais tenté.

    Cordialement
    0

Discussions similaires

Accéder à mail.live.fr
mag -
Redbart -

1 réponse