Ouverture/fermeture div ->Toggle

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par seabird, 22 Octobre 2012.

  1. seabird
    seabird WRInaute occasionnel
    Inscrit:
    1 Décembre 2003
    Messages:
    320
    J'aime reçus:
    0
    Bonjour,

    Je souhaite en cliquant sur un lien, fermer ou ouvrir une div tout en ayant seulement la div active ouverte à chaque fois, les autres étant fermées.
    J'ai donc fait ça:

    Code:
    <script language="javascript" type="text/javascript">
    
       $(document).ready(function(){
          $('.titre').click(function(){
              $('.description').not($(this).next('.description')).slideUp('fast');
              $(this).next('.description').slideToggle('fast');
          });
       });
    </script>
    
    puis par exemple:

    Code:
    <div class="titre"><a href="javascript:void(0)">Lire la suite</a></div>
    <div class="description"  style="display: none;">
    bla bla bla bla bla bla bla blabla bla bla bla
    </div>
    
    	<div class="titre"><a href="javascript:void(0)">Lire la suite</a></div>
    <div class="description"  style="display: none;">
    bla bla bla bla bla bla bla blabla bla bla bla
    </div>
    
    	<div class="titre"><a href="javascript:void(0)">Lire la suite</a></div>
    <div class="description"  style="display: none;">
    bla bla bla bla bla bla bla blabla bla bla bla
    </div>
    
    Jusque là pas de problème. Mais il se trouve que ma structure est comme ça:

    Code:
    <a href="javascript:void(0)">Titre 1</a>
    bla bla bla 
    
    	<div class="titre"><a href="javascript:void(0)">Lire la suite</a></div>
    <div class="description"  style="display: none;">
    bla bla bla bla bla bla bla blabla bla bla bla
    </div>
    
            <a href="javascript:void(0)">Titre 2</a>
    bla bla bla 
    
    	<div class="titre"><a href="javascript:void(0)">Lire la suite</a></div>
    <div class="description"  style="display: none;">
    bla bla bla bla bla bla bla blabla bla bla bla
    </div>
    
    

    Je veux donc le même fonctionnement sachant qu'il y a deux possibilités pour dérouler ( soit titre, soit lire la suite) et je ne vois pas trop comment faire.

    Si quelqu'un a une idée, je suis preneur.

    Merci,

    Eric
     
  2. seabird
    seabird WRInaute occasionnel
    Inscrit:
    1 Décembre 2003
    Messages:
    320
    J'aime reçus:
    0
    Bonjour,

    Bon je me suis répondu à moi-même. J'ai trouvé une solution à force de faire des tests. Je la poste, cela peut intéresser du monde.

    si je mettais entre le div titre et le div "lire la suite" , un div quelconque, cela ne fonctionne plus. ( du à next). Je suis donc passé par des id ?
    Code:
    <script language="javascript" type="text/javascript">
    
    var a=2;
    
    $(document).ready(function(){
        
       
        for (j = 1; j <= a; j++)
       {
          
          $('.titre'+j).click(function(){
              
            var id = 'div' + $(this).attr('data-article');
    $('.description').not($('div#' + id)).slideUp('fast');
         $('div#' + id).slideToggle();
        
          });
        
        }        
                      }              
                     );   
    	</script>	
    
    
    
    <a class="titre1" data-article="1" href="javascript:void(0)">Titre 1</a>
    bla bla bla
    <div class="">test</div>
        <div class="titre1" data-article="1"><a href="javascript:void(0)">Lire la suite</a></div>
    <div class="description" id="div1"  style="display: none;">
    bla bla bla bla bla bla bla blabla bla bla bla
    </div>
    <br/>
            <a class="titre2" data-article="2" href="javascript:void(0)">Titre 2</a>
    bla bla bla
    
        <div class="titre2" data-article="2"><a href="javascript:void(0)">Lire la suite</a></div>
    <div class="description"  id="div2" style="display: none;">
    bla bla bla bla bla bla bla blabla bla bla bla
    </div>
    
    Eric
     
Chargement...
Similar Threads - Ouverture fermeture div Forum Date
GSC : problème de Couverture Rédaction web et référencement 5 Septembre 2021
GSC : couverture, page d'accueil exclue ! Problèmes de référencement spécifiques à vos sites 31 Août 2021
Search Console Export couverture différent Crawl et indexation Google, sitemaps 1 Juillet 2021
Search Console Comment faire partir les erreurs Couverture => Introuvable (404) Problèmes de référencement spécifiques à vos sites 12 Mars 2021
Search Console Analyse de la couverture Crawl et indexation Google, sitemaps 12 Mai 2020
Search Console Erreurs d'exploration rapport Couverture Crawl et indexation Google, sitemaps 15 Avril 2020
Mise à jour couverture GSC pages exclues Crawl et indexation Google, sitemaps 9 Avril 2020
GSC nettoyage couverture de l'index Débuter en référencement 29 Janvier 2020
Search Console Couverture :"Url désignée comme no-index" Crawl et indexation Google, sitemaps 8 Décembre 2019
Search Console L'URL envoyée contient une erreur d'exploration (erreur couverture) Crawl et indexation Google, sitemaps 12 Août 2019