Hello,

J'essais d'utiliser le jquery afin de faire un système de "En savoir plus", je doute que mon code de base soit le plus optimisé possible mais bon...

Quelle méthode utiliseriez-vous afin que chaque "En savoir plus", s'ouvre et se ferme indépendamment ?

<style>
*
{
font-family : "Verdana";
width: 200px;
color: white;
}
.texte
{
background-color: #585858;
}
.plus, .moins
{
background-color: #2ECCFA;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js">
</script>
</head>
<body>
<div class="plus" id="plus">En savoir plus</div>
<div class="moins" id="moins">En savoir moins</div>
<div class="texte" id="texte">BlaBlaBla</div>
<div class="plus" id="plus">En savoir plus</div>
<div class="moins" id="moins">En savoir moins</div>
<div class="texte" id="texte">BlaBlaBla</div>
<div class="plus" id="plus">En savoir plus</div>
<div class="moins" id="moins">En savoir moins</div>
<div class="texte" id="texte">BlaBlaBla</div>
<script>
$("#moins").hide();
$("#texte").hide();
$("#plus").click(function () {
if ($("#texte").is(":hidden")) 
    {
    $("#texte").slideDown("slow"); 
    $("#moins").show();
    $("#plus").hide();
    }
});
$("#moins").click(function () {
if ($("#texte").is(":visible")) 
    {
    $("#texte").slideUp("slow");
    $("#plus").show();
    $("#moins").hide();
    }
});
</script>

Merci d'avance.

2 réponses


MrGuillou
Réponse acceptée

Bonjour,

Avec jQuery il y a les fonctions prev() et next()

jQuery(function($){
    $("div.moins,div.texte").hide();
    $("div.plus").click(function () {
        $(this).hide();
        $(this).next("div.texte,div.moins").show();
    }):
    $("div.moins").click(function () {
        $(this).hide();
        $(this).next("div.texte").hide();
        $(this).prev("div.plus").show();
    }):
});

Attention il est interdit de placer des id identiques dans une meme page (norme w3c). Donc tu peux enlever les id.

flo.r68
Auteur

Merci de ta réponse :) Il faut que je me mette au jQuery plus sérieusement.

Effectivement, les ID ne seraient pas restés, ce n'était qu'un test.