11548 sujets

JavaScript, DOM et API Web HTML5

[Jquery] Spoiler : cacher du texte

Bonjour,

Je souhaiterai réaliser en JQuery une sorte de "spoiler". J'aimerai cacher du texte et le faire apparaitre lorsque je clique sur un lien.
Pour cela, j'ai repris le tutoriel sur le menu accordéon que j'ai adapté à ma sauce.

Voici le html :

<div class="toggleSubMenu">
		<h4><span>Fraise</span></h4>
		<div class="subMenu">
			<p>La fraise est formée par l'ensemble du réceptacle charnu de la fleur. Elle a une couleur rouge ou jaune blanchâtre selon les variétés, et une forme ovoïde oblongue plus ou moins arrondie.Au sens botanique du terme, les « vrais » fruits sont en fait les akènes, ces petits grains secs (communément appelés à tort pépins alors que ce dernier terme ne devrait désigner que leur minuscule graine centrale) disposés régulièrement sur la fraise, de couleur verte à brune, et renfermant chacun soit un ovule (non fécondé) soit une graine (qui porte alors un germe lorsque la fraise arrive à maturité).Le corps charnu de la fraise étant formé par le réceptacle floral (induvie) est ce que l'on consomme avec ou sans les akènes (l’épépinage des fraises consiste à ôter ces fruits secs du reste de la chair pulpeuse pour la préparation de gelées). Ce sont les akènes qui produisent une hormone permettant au faux-fruit de grossir.</p>
		</div>

		<h4><span>Pomme</span></h4>
		<div class="subMenu">
			<p>La pomme est le fruit du pommier et plus particulièrement du pommier domestique, arbre fruitier largement cultivé. L'étude de la culture des pommes constitue une partie de la pomologie, la pomologie englobant tous les fruits à pépins. La pomme est comestible et a un goût sucré ou acidulé selon les variétés.Généralement, on distingue trois types de pommes alimentaires : les pommes à cidre, les pommes de table ou pommes à couteau et les pommes à cuire qui appartiennent à un des deux premiers types mais supportent bien la cuisson. Ces trois types sont issus de l'espèce Malus pumila qui compte plus de 20 000 variétés à travers le monde.Plusieurs boissons sont élaborées à base de pommes, en particulier le jus de pomme sans fermentation, sucré et non alcoolisé, et le cidre produit à partir de la fermentation de ce jus.</p>
		</div>

		<h4><span>Citron</span></h4>
		<div class="subMenu">
			<p>Le citron est un agrume. C'est le fruit du citronnier. Le citronnier (Citrus limonum) est un arbuste de 5 à 10 m de haut, à feuilles persistantes.Le fruit a une écorce lisse jaune éclatant. Sa chair est juteuse, très acide et riche en vitamine C. De l'écorce jaune on extrait une huile essentielle qui contient entre autres substances du limonène et du citral.Les citrons doux sont les fruits d'un cultivar particulier et se consomment comme des oranges : Citrus limon (L.) Burm. f. (classification de Tanaka).</p>
		</div>
	</div>


Voici le javascript :


$(document).ready( function () { 
    // On cache les sous-menus : 
    $(".subMenu").hide(); 
    // On sélectionne tous les items de liste portant la classe "toggleSubMenu" 
    // et on remplace l'élément span qu'ils contiennent par un lien : 
    $(".toggleSubMenu span").each( function () { 
        // On stocke le contenu du span : 
        var TexteSpan = $(this).text(); 
        $(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ; 
    } ) ; 
 
    // On modifie l'évènement "click" sur les liens dans les items de liste 
    // qui portent la classe "toggleSubMenu" : 
    $(".toggleSubMenu").click( function () { 
        // Si le sous-menu était déjà ouvert, on le referme : 
        if ($(this).next(".subMenu:visible").length != 0) { 
            $(this).next(".subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") }); 
        } 
        // Si le sous-menu est caché, on ferme les autres et on l'affiche : 
        else { 
            $(".subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") }); 
            $(this).next(".subMenu").slideDown("normal", function () { $(this).parent().addClass("open") }); 
        } 
        // On empêche le navigateur de suivre le lien : 
        return false; 
    }); 
} ) ;


Le code permet bien de cacher le texte, en revanche, lorsque l'on clique sur le lien, le texte n'apparait pas... Vous pouvez tester ici.

Je ne vois pas mon erreur. Où est elle?! Smiley confus

Merci!
Salut,

Il y a deux principales modifs que je ferais sur ton code :
- pas besoin de changer les spans en liens, Javascript permet le onclick sur n'importe quel élément
- utiliser des fonctions de jQuery plus adaptées

Au final, à l'exception du changement de classe "open" (cf. plus bas), tout ton code peut donc se résumer à :
$(document).ready(function() {
    $('.toggleSubMenu h4')
        .click(function(){ $(this).next().slideToggle(); })
        .next().hide();
});

Pour ce qui est de l'ajout/suppression de la classe "open", je n'ai pas vraiment compris sur quel élement ça devait se faire, mais dans tous les cas, tu peux utiliser toggleClass() plutôt que addClass() / removeClass().
Sujet clos
Aller à