Change className [Résolu]

Question

Posez votre question Signaler

Change className [Résolu]

cs_carosch 4 Messages postés vendredi 16 septembre 2005Date d'inscription 16 décembre 2014 Dernière intervention - 13 déc. 2014 à 17:47 - Dernière réponse : cs_carosch 4 Messages postés vendredi 16 septembre 2005Date d'inscription 16 décembre 2014 Dernière intervention

- 16 déc. 2014 à 22:32

Javascript / DHTML Posez votre question Signaler

Bonjour,

j'ai un planning de conférences à afficher.
J'ai utilisé Bootstrap pour l'intégration.
Ne sont affichés par défaut que les titre de chaque session.
Lorsqu'on clique dessus le détail de la session se déplie.
Cela fonctionne très bien avec le js collapse.
Mais en plus de déplier le détail, on me demande de changer la couleur de fond de la session une fois dépliée.

Je suis un peu perdu en js.
J'ai fait une fonction que je voulais utiliser sur le a d titre de la session, mais
1) il ne fonctionne pas
et
2) je ne sais pas comment l'écrire pour qu'il fonctionne sur n'importe quel titre de session, sachant qu'avec l'accordion, on peut replier un element en en ouvrant un autre.

J'espère que je suis à peu près claire.

Merci d'avance pour votre aide et vos conseils.

Carosch

Voici ma fonction :

function change_couleur() {
    var elementDeReference = document.getElementById();
     if (elementDeReference.className = "unesessionfermee") {
         elementDeReference.removeClass(); 
         elementDeReference.addClass( "unesessionouverte" );
     }else {
         elementDeReference.addClass( "unesessionfermee" );
     }
}

et voici un panel (une conférence) pour exemple :

     <div class="panel">
        <div class="unesession" id="headingRD01">
            
                                            <div class="row">
<!-- date session -->
                                <div class="col-lg-1 col-md-1 col-sm-2 col-xs-2 ">
                                    <div class="date"><span>Ven<br />30</span></div>
                                </div>                       
<!-- titre session -->
                                <div class="col-lg-8 col-md-8 col-sm-10 col-xs-10 ">
                                    <span class="heurelieu retrait">10:00 - 11:30 | Salle A |</span>
                                    <div class="row">
                                        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                                        <span class="refsession retrait">RD01</span> 
                                        </div>
                                        <div class="" role="tab" id="titreOne">
                                        <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 titresession">
                                        <a class="collapsed" data-toggle="collapse" data-parent="#planning" href="#collapseRD01" aria-expanded="false" aria-controls="collapseRD01" onclick="change_couleur('headingRD01')"> Recommandations sur l'hyperréactivité bronchique</a>
                                        </div>
                                        </div>
                                    </div>
                                    
                                            
                                </div>                       
 <!-- pictos session -->
                                <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 lespictos">
                                    <div class="calendar" id="calendarRD01"><i class="glyphicon glyphicon-calendar"></i></div><div class="pictos"><img src="../img/picto-rouge.png" alt="picto Fil rouge" /><img src="../img/picto-dpc.png" alt="picto DPC" /><img src="../img/picto-micro.png" alt="picto différée" /><img src="../img/picto-interactif.png" alt="picto session interactive" /></div>
                                </div>                       
                            </div>
  
            
        </div>
        <div id="collapseRD01" class="panel-collapse collapse" aria-labelledby="headingRD01">
 
            
            
            
            
            <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 retrait">
                            <div class="row">
                                <div class="col-lg-1 col-md-1 col-sm-2 col-xs-2"> </div>
                                <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 descriptif">
                                    <div id="RD01-titlepresident" class="titrepresident">Président(s)</div>
                                    
                                    <div id="RD01-nomspresidents" class="nompresident">
                                        <span id="RD01-presid1" class="genrefem"></span> <span class="nomprenomville">L. Plantier, Paris, Ville.</span><br />
                                        <span id="RD01-presid2" class="genrefem">Mme </span> <span class="nomprenomville">A. Prud'homme, Tarbes</span> 
                                    </div>
                                    <div id="RD01-titlepaper1" class="titrepaper">Apport méthodologiques</div>
                                    <span id="RD01-papper1-interv1" class="genrefem"></span> <span class="nomprenomville">L. Plantier, Paris</span><br />
                                        <span id="RD01-papper1-interv2" class="genrefem">Mme </span> <span class="nomprenomville">A. Prud'homme, Tarbes</span> 
                                    <br />
                                    <div id="RD01-titlepaper2" class="titrepaper">Apport méthodologiques</div>
                                    <span id="RD01-papper2-interv1" class="genrefem"></span> <span class="nomprenomville">L. Plantier, Paris</span><br />
                                        <span id="RD01-papper2-interv2" class="genrefem">Mme </span> <span class="nomprenomville">A. Prud'homme, Tarbes</span> 
                                    <br />
                                    <div id="RD01-titlepaper3" class="titrepaper">Apport méthodologiques</div>
                                    <span id="RD01-papper3-interv1" class="genrefem"></span> <span class="nomprenomville">L. Plantier, Paris</span><br />
                                        <span id="RD01-papper3-interv2" class="genrefem">Mme </span> <span class="nomprenomville">A. Prud'homme, Tarbes</span> 
                                    <br />
                                    <div id="RD01-titlepaper4" class="titrepaper">Apport méthodologiques</div>
                                    <span id="RD01-papper4-interv1" class="genrefem"></span> <span class="nomprenomville">L. Plantier, Paris</span><br />
                                        <span id="RD01-papper4-interv2" class="genrefem">Mme </span> <span class="nomprenomville">A. Prud'homme, Tarbes</span> 
                                        
                                </div>
                                <div class="col-lg-1 col-md-1 col-sm-2 col-xs-2"><i class="glyphicon glyphicon-print calendar"></i></div>
                            </div>
                            <div class="row ">
                                <div class="col-lg-1 col-md-1 col-sm-2 col-xs-2"> </div>
                                <div class="col-lg-11 col-md-11 col-sm-11 col-xs-11 sessionfooter">
                                    <p><img src="../img/barcode.png" alt="codebarre" /> Accès libre</p>
                                    <p>barre sociale</p>
                                </div>
                            </div>
 
                        </div>
                    </div>  
            
            
            
            
            
       </div>
      </div>

Afficher la suite

Votre réponse

Répondre au sujet

2 réponses

Signaler Commenter la réponse de @karamel

@karamel 1661 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 23 août 2018 Dernière intervention - Modifié par kazma le 13/12/2014 à 18:24

0

Merci

bonjour si c'est juste la couleur de fon qu'il faut changer utilise style

elementDeReference.style.background='red'

ensuite dans la fontion tu fait

var elementDeReference = document.getElementById();

mais tu ne precise pas l'id de l'element il faudrait le mettre en parametre de fonction


function change_couleur(element_a_modife) {
    var elementDeReference = document.getElementById(element_a_modife);

     if (elementDeReference.style.backgroundColor="blue") {
       
         elementDeReference.style.backgroundColor='red'
     }else {
         elementDeReference.style.backgroundColor='blue'
     }
}

et si tu prefere modifier la class utilise className

elementDeReference.className='une_classe'

rien ne sert de courir il faut partir a point.
cours Forest cours !

Signaler Commenter la réponse de cs_carosch

cs_carosch 4 Messages postés vendredi 16 septembre 2005Date d'inscription 16 décembre 2014 Dernière intervention - 16 déc. 2014 à 22:32

0

Merci

Bonjour,

merci pour ta réponse kazma

mon problème était plus complexe,
il y avait plusieurs cas à prendre en compte
changer la couleur en cliquant sur lui-même pour ouvrir l'accordion et aussi changer la couleur des autres
et en refermant rechanger la couleur, sachant qu'on peut refermer en cliquant sur lui-même ou sur un autre.

Bref, j'ai un ami qui m'a fait la function

mon problème est donc résolu

merci
Carosch

--

Votre réponse

Répondre au sujet

Posez votre question

Answer 1

Change className [Résolu]

Votre réponse

Votre réponse

Votre réponse

Vous n'êtes pas encore membre ? inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !