11548 sujets

JavaScript, DOM et API Web HTML5

Presque tout est dit dans le titre.
J'ia trouvé un petit code qui permet de montrer/cacher des divs à l'aide de jquery, seulement en apposant une class à mes divs.
Cependant, j'ai un problème d'héritage, ou de récursion.
Il vaut mieux un exemple, c'est assez difficile à expliquer:
http://osefdemonsite.alwaysdata.net/
Le Show marche bien, mais le second ne marche pas, lors du premier clique: les "labels" s'vinersent.
J'aimerais garder le fait d'avoir un seul attribut à mettre à mon div, constant, je ne sais pas si c'est possible. Merci d'avance !
Bonjour,

Une solution possible :

- Dans le code js (box.js), tu récupères le contenu html du lien que l'utilisateur a cliqué (donc tu as soit "Show" soit "Hide", donc si la valeur est "Hide" tu affiches "Show", sinon l'inverse.

Donc ton fichier box.js donnerait ça :


// this tells jquery to run the function below once the DOM is ready
$(document).ready(function() {
	// choose text for the show/hide link - can contain HTML (e.g. an image)
	var showText='Show';
	var hideText='Hide';
	// append show/hide links to the element directly preceding the element with a class of "toggle"
	$('.toggle').prev().append(' (<a href="#" class="toggleLink">'+showText+'</a>)');
	// hide all of the elements with a class of 'toggle'
	$('.toggle').hide();

	// capture clicks on the toggle links
	$('a.toggleLink').click(function() {
		// on initialise la variable et on récupère le contenu html du lien
		var a_text = $(this).html();
		// on compare le contenu html du lien aux variables showText et hideText
		$(this).html( (a_text == hideText) ? showText : hideText);
		// toggle the display - uncomment the next line for a basic "accordion" style
		//$('.toggle').hide();$('a.toggleLink').html(showText);
		$(this).parent().next('.toggle').toggle('slow');
		// return false so any link destination is not followed
		return false;
	});
});