Précédent   Forum des professionnels en informatique > Webmasters - Développement Web > JavaScript > Bibliothèques & Frameworks > jQuery
jQuery Forum d'entraide sur le framework jQuery. Avant de poster : Tutoriels jQuery, FAQ jQuery, Tous les tutoriels JavaScript, Toutes les FAQ JavaScript
Partagez cette discussion sur d'autres réseaux sociaux : Viadeo Twitter Google Facebook Digg Delicious MySpace Yahoo
Réponse Proposer ce sujet en actualité
 
Outils de la discussion
Publicité
'
Vieux 18/03/2011, 10h38   #1
Invité régulier
 
Pierre ANTOINE
Inscription : novembre 2009
Messages : 34
Détails du profil
Informations personnelles :
Nom : Pierre ANTOINE

Informations forums :
Inscription : novembre 2009
Messages : 34
Points : 9
Points : 9
Par défaut Fonction toggle, comment puis-je alterner entre deux affichages ?

Bonjour,

Je cherche à utiliser la fonction toggle pour afficher/masquer des textes longs.
Je souhaiterais que en fonction du click, l'affichage switch entre 2 contenus
différents. Le premier, le texte tronqué, définit par ma variable $bodyaccordeon et le deuxième, le texte entier, définit par $fields['body']->content; ?>.

Voici mon code :
Code :
1
2
3
4
5
6
7
 
<div class="transport_hebergementtexte">                  
                <div class="description"><?php print $bodyaccordeon ?></div>
                <div class="description2"><?php print $fields['body']->content; ?></div>
                <a href="#">La suite ...</a>  	 	
 
        </div>
En gros, quand on clique sur la suite, je voudrais swicher entre <div class="description"> et <div class="description2">

Voici mon code javascript :
Code :
1
2
3
4
5
6
7
8
9
$(document).ready(function(){
		$('.transport_hebergementtexte').click(function() {										 
			$('.description').toggle('slow', function() {
			if (document.getElementByClassName("description").style.display = "none") {
			document.getElementByClassName("description2").style.display = "block";
				}
			});	
	});
});
Sachant que dans ma css, j'ai mis un display none sur ma classe "description2".

C'est vraiment de la bidouille, je ne suis pas un spécialiste, mais j'ai coince et je ne sais pas comment faire.

Merci d'avance pour votre aide,
Pierrea4564 est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 18/03/2011, 10h42   #2
Rédacteur/Modérateur
 
Avatar de SpaceFrog
 
Homme
Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur
Inscription : mars 2002
Messages : 30 007
Détails du profil
Informations personnelles :
Sexe : Homme
Localisation : Royaume-Uni

Informations professionnelles :
Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur
Secteur : Industrie

Informations forums :
Inscription : mars 2002
Messages : 30 007
Points : 45 091
Points : 45 091
il me semble que le sujet à déja été traité ...
le but était d'afficher un resumé puis de switcher au texte complet
__________________
Ma page Developpez
Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
Votre post est résolu ? Alors n'oubliez pas le Tag


réalisations :www.planet-languages.com|www.saftair.com| www.ouestisol.fr | www.sebemex.fr | www.extramiante.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
SpaceFrog est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 18/03/2011, 10h45   #3
Responsable Développement Web

 
Avatar de Bovino
 
Homme Didier Mouronval
Développeur Web
Inscription : juin 2008
Messages : 13 806
Détails du profil
Informations personnelles :
Nom : Homme Didier Mouronval
Âge : 41
Localisation : France, Gironde (Aquitaine)

Informations professionnelles :
Activité : Développeur Web
Secteur : High Tech - Éditeur de logiciels

Informations forums :
Inscription : juin 2008
Messages : 13 806
Points : 35 803
Points : 35 803
Code :
if (document.getElementByClassName("description").style.display = "none")
D'une part, = en JavaScript, c'est une affectation, dont l'équivalent booléen est true. Pour une comparaison, c'est == voire ===.

Ensuite, un nom de classe pouvant être répété sur une page, une méthode "getElementByClassName" n'a pas de sens. Il existe bien getElementsByClassName, mais ce n'est pas encore cross browser et renvoie une collection d'éléments.
__________________
Pas de question technique par MP !
Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi !
Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
Mon livre sur jQuery
Bovino est actuellement connecté   Envoyer un message privé Réponse avec citation 00
Vieux 18/03/2011, 10h52   #4
Rédacteur/Modérateur
 
Avatar de SpaceFrog
 
Homme
Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur
Inscription : mars 2002
Messages : 30 007
Détails du profil
Informations personnelles :
Sexe : Homme
Localisation : Royaume-Uni

Informations professionnelles :
Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur
Secteur : Industrie

Informations forums :
Inscription : mars 2002
Messages : 30 007
Points : 45 091
Points : 45 091
http://www.developpez.net/forums/d10...ropre-element/
__________________
Ma page Developpez
Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
Votre post est résolu ? Alors n'oubliez pas le Tag


réalisations :www.planet-languages.com|www.saftair.com| www.ouestisol.fr | www.sebemex.fr | www.extramiante.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
SpaceFrog est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 18/03/2011, 12h18   #5
Invité régulier
 
Pierre ANTOINE
Inscription : novembre 2009
Messages : 34
Détails du profil
Informations personnelles :
Nom : Pierre ANTOINE

Informations forums :
Inscription : novembre 2009
Messages : 34
Points : 9
Points : 9
Merci à vous deux.
Effectivement, c'est ce que je voulais.
Par contre, comment je peux maintenant appliquer ceci avec toggle en utilisant le clic sur un lien?
Pierrea4564 est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 18/03/2011, 22h49   #6
Membre confirmé
 
Inscription : janvier 2003
Messages : 244
Détails du profil
Informations personnelles :
Localisation : France, Loire Atlantique (Pays de la Loire)

Informations forums :
Inscription : janvier 2003
Messages : 244
Points : 241
Points : 241
Il y a aussi un plugin qui fait ça, qui s'appelle jTruncate.
Il présente un résumé du contenu d'une balise et ajoute automatiquement le lien pour agrandir/réduire:

http://blog.jeremymartin.name/2008/0...or-jquery.html
yarp est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 19/03/2011, 11h13   #7
Rédacteur
 
Avatar de danielhagnoul
 
Homme Daniel Hagnoul
Étudiant perpétuel
Inscription : février 2009
Messages : 3 221
Détails du profil
Informations personnelles :
Nom : Homme Daniel Hagnoul
Âge : 61
Localisation : Belgique

Informations professionnelles :
Activité : Étudiant perpétuel
Secteur : Enseignement

Informations forums :
Inscription : février 2009
Messages : 3 221
Points : 6 767
Points : 6 767
Bonjour

API jQuery : toggle event, addClass et removeClass.
__________________

FAQ jQuery

Mon cahier d’exercices sur jQuery & Co

Si un message vous a aidé ou vous semble pertinent, votez pour lui !
danielhagnoul est déconnecté   Envoyer un message privé Réponse avec citation 00
Réponse Proposer ce sujet en actualité
Outils de la discussion



Fuseau horaire GMT +2. Il est actuellement 22h22.


 
 
 
 
Partenaires

Hébergement Web