Bouton lire la suite

Salut,

Créer un bloc div avec le texte à lire en plus et lorsque l'utilisateur clique sur lire la suite tu affiche le block !

Bonsoir.
Tu pourrais par exemple t'inspirer de ceci : Formation Javascript » TP : Système de spoiler.

Bonsoir,

Ca dépend exactement de ce que tu veux faire, soit afficher et cacher rapidement un contenu (un lien de téléchargement etc...)
Dans ce cas utilise le lien proposer par Lartak et essaye la solution deJeremieMeunier, et pour simplifier le dev je te conseille d'utiliser jQuery, écrire moins (..de Javascript) pour en faire plus.

Mais si ce que tu souhaite c'est par exemple d'afficher la suite d'un article. (Par exemple sur la page d'accueil d'un blog tu as le titre de l'article et une courte description et pour lire la suite tu as un bouton [Lire la suite]), dans ce cas pour éviter le rafraichissement de la page tu peux utliser de l'Ajax, et l'utilisation de l'ajax est nettement simplifié toujours grâce a jQuery.

et pour simplifier le dev je te conseille d'utiliser jQuery, écrire moins (..de Javascript) pour en faire plus

Alors la je ne suis pas d´accord, faut arrêter de mètre jquery a tous vas. si il veut apprendre le JavaScript c'est par le JavaScript qu'il faut passer, et pour faire un système de spoiler ça sert a quoi de charger jquery? A rien du tous.

c'est en commençant par jquery qu'o'n vas avoir de gros soucies en termes de best practices JavaScript... j query c'est pas le super pouvoir qui libère de tous

@Defy +1, tu me ôtes les mots de la bouche ;)

Explique un peu mieux ce que tu veux, est-ce que quand on appui sur "lire la suite" un autre bouton apparaît pour par exemple remettre à la normal le texte ?

Deux maniéres de procéder, toutes les deux sont simple et on leurs avantages et inconvienants !

1 =
Tu charges l'articles entier, tu comptes (strlength) le nombre de caractéres à afficher et tu caches le reste.
Tu généres un bouton toggle ( jquery) qui va afficher ou cacher ce block.

2 =
Tu as dans ta base de donnée un extrait que tu charges.
Tu a un bouton générer lui aussi en php : qui va appeler au click un fonction ajax ( jquery) qui va appeler le contenu dans une div.

Tu as des variantes :
Appeler le contenu global de l'article en php + récupérer un extrait en jquery + supprimer la chaine pour enfin la recharger via une fonction ajax ( complement stupide soit disant ! )

Bref tu as de quoi faire un bout de code pour essayer avec toutes ses infos normalement.

je detail plus :

home.php

recupération en php de l'article complet ou de l'extrait si il existe dans la bdd div.class.article-id
fonction javascripts via Jquery

on liste avec each toutes les class article-id
on recupérer les 200 premiers caractéres
on les englobes dans un block avec la class (addClass) .visible
on englobe le reste ( d'un simple calcul : Taille total de la chaine - 200 caractére = le nombre de caractéres a saisir à partir de la fin) idem dans un block ayant uen class .hide
bien entendu gére le css comme tu veux !
tu ajoutes aprés le dernier block (appendTo) ceci :
var bouton = a.href.#.class.voir.AFFICHER.a
avec une fonction si on click sur la class voir alors on selection l'element precedent (jquery.prev()) on retire la class courante (.hide) avec la fonction REMOVE et on ajoute la class (addClass) .visible
avec une condition : si la class == visible alors on ajoute .hide

Voilou !

Defy, le but là ce n'est pas lui dire ce qu'il doit apprendre ou ne pas apprendre, ni de lui parler de best practice etc.., il n'a pas besoin de mon aide pour lui dire par quoi il devrait commencer.
Là le but étant juste de répondre a sa question en lui proposant la méthode la plus simple. Et admet quand même que jQuery simplifie énormément le développement.. Moins de ligne pour un résultat équivalant voir supérieur.

@Mika445 jQuery est une lib Javascript, donc tout ce qui est fait peut l'être avec du vanilla JS, donc dire que le résultat est "supérieur" est un non-sens. jQuery aura tendance à être, pour certaines fonctionnalités, plus lent car, étant cross-browser, il y a plus de code afin de palier à toutes les éventualités.

Faire un document.querySelector('.toto') reviendra au même que $('.toto'). Et je pense même que le premier sera plus performant car jQuery aggrège et construit un gros objet derrière.

Cela dit, concernant le souci posé dans le post, peu importe vanilla JS ou jQuery, mais c'est vrai que vendre jQuery de cette façon à un débutant n'est peut-être pas la meilleure chose à faire ;)

Moins de ligne pour un résultat équivalant voir supérieur.

LOL jquery n'est pas superieur à du javascript vanilla loin de la! encore moins en terme de performance!

Et admet quand même que jQuery simplifie énormément le développement..

Non encore moins! masqué le fonctionnement basique d'un language par une librairie ne simplifie pas la chose loin de la. faut arreter de dire partous jquery c'est trop bien. jquery c'est une librairie monolitique qui as besoin d'evoluer et qui est bien en retard sur le javascript moderne.

ne serais-ce qu'avec es6 jquery est dépassé.

mais c'est vrai que vendre jQuery de cette façon à un débutant n'est peut-être pas la meilleure chose à faire ;)

absolument d'accord avec toi @betaWeb

@Mika445 , je suis d'accord avec toi au vu du sujet ! et seulement au vu du sujet ! Pour lui Jquery est la solution la plus adéquate. Coder en natif pour deux ou trois fonctions quand on est débutant, ça revient à passer tout les permis qui existent pour conduire un scooter !