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:
    318
    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:
    318
    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
Cache client non utilisé aprés fermeture/ouverture du navigateur Développement d'un site Web ou d'une appli mobile 26 Août 2009
Ouverture d'une fenêtre sondage à la fermeture d'un site Développement d'un site Web ou d'une appli mobile 29 Mars 2008
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
Google My Business :Comment afficher sa zone de couverture et pas son adresse ? Google : l'entreprise, les sites web, les services 19 Juin 2019
Erreur de couverture serveur (5xx) Débuter en référencement 23 Mars 2019
WordPress Indexation de trop de pages sur mon site (couverture index search console) Problèmes de référencement spécifiques à vos sites 31 Janvier 2019
Problème - Inspection URL / Couverture Référencement Google 18 Décembre 2018
[GMAIL] Forte baisse du taux d'ouverture Gmail, Google Talk, Blogger et Orkut 28 Août 2018
Ouverture des page très long, de manière aléatoire Demandes d'avis et de conseils sur vos sites 16 Août 2018
Search Console Beta : couverture de l'index bloquée ? Crawl et indexation Google, sitemaps 6 Août 2018
probleme lié avec couverture de l'index Crawl et indexation Google, sitemaps 9 Juin 2018