Aller au contenu
Support de Zwii

Messages recommandés

Bonsoir

Est-il possible d'insérer un menu accordéon (déroulant avec flèche ou croix ) dans une page de zwii ... je ne trouve pas comment faire

Merci d'avance !!

Modifié par zin90

Partager ce message


Lien à poster
Partager sur d’autres sites

merci Fred , on apprend tout les jours sur ce forum , c'est une mine d 'information avec une équipe toujours prêt à vous aider

merci à tous

très bonne soirée

  • J'aime 2

Partager ce message


Lien à poster
Partager sur d’autres sites
il y a une heure, omega a dit :

merci Fred , on apprend tout les jours sur ce forum , c'est une mine d 'information avec une équipe toujours prêt à vous aider

merci à tous

très bonne soirée

Avec plaisir !!

Partager ce message


Lien à poster
Partager sur d’autres sites

Merci beaucoup Fred pour toutes ces infos et pour l'intégration dans la nouvelle version !! Nickel 👍

J'ai modifié l'intitulé également.

Merci

Denis

  • J'aime 1

Partager ce message


Lien à poster
Partager sur d’autres sites

Bonjour à tous,

Merci pour ce développement qui m'est aussi très utile 😄 .

Je l'ai utilisé pour alléger une page "Espace clients". Pour ceux que l'idée intéresse ou pour voir le visuel je peux vous donner un accès client par MP. 

Juste une question, je galère un peu pour modifier le script (je pense JS) pour fermer l'onglet "actif" sur un clic. C'est utile sur cette page mais aussi sur n'importe quelle page que l'on veut alléger en permettant l'affiche de "plus d'informations".

 

Partager ce message


Lien à poster
Partager sur d’autres sites
il y a 10 minutes, Sourigo a dit :

Bonjour à tous,

Merci pour ce développement qui m'est aussi très utile 😄 .

Je l'ai utilisé pour alléger une page "Espace clients". Pour ceux que l'idée intéresse ou pour voir le visuel je peux vous donner un accès client par MP. 

Juste une question, je galère un peu pour modifier le script (je pense JS) pour fermer l'onglet "actif" sur un clic. C'est utile sur cette page mais aussi sur n'importe quelle page que l'on veut alléger en permettant l'affiche de "plus d'informations".

 

Bonjour,

Si j'ai bien compris, il te suffit d'enlever la valeur active de la classe

<li class="accordion-item active">

Ainsi le premier élément ne  s'affiche pas.

Par contre pour le ferme, il faut dans le js, créer une nouvelle fonction  close et l'appeler dans le on.click

Partager ce message


Lien à poster
Partager sur d’autres sites
il y a 1 minute, Fred a dit :

Par contre pour le ferme, il faut dans le js, créer une nouvelle fonction  close et l'appeler dans le on.click

Bonjour @Fred

J'avais vu cette possibilité de tout fermer par "défaut". 

C'est bien cette seconde fonction close qu'il me faut. Laisse moi chercher un peu, je devrai trouver ... 🙄

Partager ce message


Lien à poster
Partager sur d’autres sites
Il y a 2 heures, Sourigo a dit :

// fonction pour cacher un élément
function close(item, speed) {
			// on cache l'élément actif
			item.addClass('inactive')
				.slideUp(speed);
		}

J'ai bon pour la fonction ? 🤨

Il manque un find pour savoir à qui on applique la classe.

 

  • Merci 1

Partager ce message


Lien à poster
Partager sur d’autres sites

Pour une ligne je n'ai pas ajouté de fonction close. Avec cette modification il est possible de fermer un accordéon ouvert.

	/**
	 * Effet accordéon
	 */
	$('.accordion').each(function(e) {
		// on stocke l'accordéon dans une variable locale
		var accordion = $(this);
		// on récupère la valeur data-speed si elle existe
		var toggleSpeed = accordion.attr('data-speed') || 100;

		// fonction pour afficher un élément   
		function open(item, speed) {
			// on récupère tous les éléments, on enlève l'élément actif de ce résultat, et on les cache
			accordion.find('.accordion-item').not(item).removeClass('active')
				.find('.accordion-content').slideUp(speed);
			// on affiche l'élément actif
			item.addClass('active')
				.find('.accordion-content').slideDown(speed);
		}

		// on initialise l'accordéon, sans animation 
		open(accordion.find('.active:first'), 0);

		// au clic sur un titre...
		accordion.on('click', '.accordion-title', function(ev) {
			ev.preventDefault();		
			// Masquer l'élément déjà actif
			if ($(this).closest('.accordion-item').hasClass('active')) {
				$(this).removeClass('active').next('.accordion-content').slideUp(toggleSpeed);
			} else {
				// ...on lance l'affichage de l'élément, avec animation	
				open($(this).closest('.accordion-item'), toggleSpeed);	
			}
		});
	});

 

Merci qui ?

 

On le garde ?

 

 

  • Merci 1

Partager ce message


Lien à poster
Partager sur d’autres sites
il y a une heure, Sourigo a dit :

Merci @Fred ...

T'as testé ? 😂 

J'ai tout remplacé et tous les onglets sont ouverts. 

Sinon oui, on le garde ...

Oui oui ça marche.  Mais il faut bien vider le cache. 

  • Merci 1

Partager ce message


Lien à poster
Partager sur d’autres sites

Bon le script a besoin d'être amélioré :

	/**
	 * Effet accordéon
	 */
	$('.accordion').each(function(e) {
		// on stocke l'accordéon dans une variable locale
		var accordion = $(this);
		// on récupère la valeur data-speed si elle existe
		var toggleSpeed = accordion.attr('data-speed') || 100;

		// fonction pour afficher un élément   
		function open(item, speed) {
			// on récupère tous les éléments, on enlève l'élément actif de ce résultat, et on les cache
			accordion.find('.accordion-item').not(item).removeClass('active')
				.find('.accordion-content').slideUp(speed);
			// on affiche l'élément actif
			item.addClass('active')
				.find('.accordion-content').slideDown(speed);
		}
		function close(item, speed) {
			accordion.find('.accordion-item').removeClass('active')
				.find('.accordion-content').slideUp(speed);
		}

		// on initialise l'accordéon, sans animation 
		open(accordion.find('.active:first'), 0);

		// au clic sur un titre...
		accordion.on('click', '.accordion-title', function(ev) {
			ev.preventDefault();		
			// Masquer l'élément déjà actif
			if ($(this).closest('.accordion-item').hasClass('active')) {
				close($(this).closest('.accordion-item'), toggleSpeed);
			} else {
				// ...on lance l'affichage de l'élément, avec animation	
				open($(this).closest('.accordion-item'), toggleSpeed);	
			}
		});
	});

 

  • Merci 1

Partager ce message


Lien à poster
Partager sur d’autres sites

Bonjour à tous, 

Toujours des difficultés pour que cela fonctionne...

J'ai donc installé la dernière version de Zwii, création de page avec appel de l'accordéon (aucun problème de fonctionnement), je modifie le fichier core.js.php en remplaçant la partie /**     * Effet accordéon par ton script @Fred...

 

Mise à jour : Après avoir comparé les codes il manque deux caractères : ce qu'il faut coller est 

/**
	 * Effet accordéon
	 */
	$('.accordion').each(function(e) {
		// on stocke l'accordéon dans une variable locale
		var accordion = $(this);
		// on récupère la valeur data-speed si elle existe
		var toggleSpeed = accordion.attr('data-speed') || 100;

		// fonction pour afficher un élément   
		function open(item, speed) {
			// on récupère tous les éléments, on enlève l'élément actif de ce résultat, et on les cache
			accordion.find('.accordion-item').not(item).removeClass('active')
				.find('.accordion-content').slideUp(speed);
			// on affiche l'élément actif
			item.addClass('active')
				.find('.accordion-content').slideDown(speed);
		}
		function close(item, speed) {
			accordion.find('.accordion-item').removeClass('active')
				.find('.accordion-content').slideUp(speed);
		}

		// on initialise l'accordéon, sans animation 
		open(accordion.find('.active:first'), 0);

		// au clic sur un titre...
		accordion.on('click', '.accordion-title', function(ev) {
			ev.preventDefault();		
			// Masquer l'élément déjà actif
			if ($(this).closest('.accordion-item').hasClass('active')) {
				close($(this).closest('.accordion-item'), toggleSpeed);
			} else {
				// ...on lance l'affichage de l'élément, avec animation	
				open($(this).closest('.accordion-item'), toggleSpeed);	
			}
		});
	});
});

Le script est très utile. Je l'ai mis en place ici (page membres, pour l'instant visiteurs) et ici

Merci @Fred et oui, on le garde 😁 ...

 

Modifié par Sourigo
  • J'aime 1

Partager ce message


Lien à poster
Partager sur d’autres sites
Il y a 3 heures, Sourigo a dit :

Toujours des difficultés pour que cela fonctionne...

 

Je n'ai, pour ma part, pas rencontré de difficultés, j'ai installé la version 9.2.15 qui intègre l'accordéon sans avoir besoin de remanier le script

 

Il y a 3 heures, Sourigo a dit :

Après avoir comparé les codes il manque deux caractères

 

Quels sont ces 2 caractères manquant ?

Partager ce message


Lien à poster
Partager sur d’autres sites
il y a 14 minutes, Gilux a dit :

Quels sont ces 2 caractères manquant ?

 

});

Pas vraiment manquants peut-être, je pense que c'est la fermeture d'une instruction précédente.

J'ai modifié le script manuellement ... d'où l'erreur. 

Modifié par Sourigo

Partager ce message


Lien à poster
Partager sur d’autres sites
il y a 1 minute, Sourigo a dit :

});

 

ça fait 3 :)

 

Cette fermeture est bien présente dans le fichier core.js.php de la version 9.2.15, elle correspond à $(document).ready(function(){

Le script de l'accordéon donné ci-dessus par @Fred est donc complet

  • J'aime 1

Partager ce message


Lien à poster
Partager sur d’autres sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.


×
×
  • Créer...