Système en savoir plus

flo.r68
Javascript

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.