La création d'un “lire la suite” le lien qui s'étend le contenu de la page
Je voudrais créer un lire la suite lien qui permettrait d'étendre un paragraphe déjà montré à révéler l'intégralité du texte sur la même page. Si cela pouvait se résout avec le HTML5 et le CSS, j'aimerais ça, mais je suppose un certain type de script sera nécessaire.
Par exemple:
Exemple de texte
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porttitor feugiat ipsum quis moderne. Nullam vitae velit vitae savoir plus semper tempor ac vitae magna. Maecenas un moderne neque. Aliquam vitae savoir plus luctus nisi rutrum eleifend aiguille non non leo.
Sed eleifend aiguille lectus id semper accumsan. Sed lobortis id ligula eget blandit. Entier interdum iaculis nunc, sed porttitor magna tincidunt dans. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam lobortis accumsan tempor. Aliquam demande pulvinar est, quis convallis tellus.
Lire Plus >>
Je voudrais que le texte normal d'être montré avec le "Lire la suite >>" lien ci-dessous, puis le texte en gras sera dévoilé après avoir cliqué sur le lien.
Je veux aussi avoir une image dans la section masquée, serait-ce possible?
Merci d'avance.
- Je n'ai pas été en mesure de trouver quelque chose sur elle parce que je ne sais pas ce qu'il serait appelé. Si j'avais un mot à aller sur le code, je serais en mesure de localiser une solution je pense. J'ai regardé OnClick et Comprend, mais jusqu'à présent. Même le nom d'un site qui utilise ce serait utile pour la source d'inspecter.
- Vous pouvez résoudre ce problème avec HTML5 =JavaScript et plus de nouvelles fonctionnalités html, mais vous pouvez avoir besoin de faire quelques recherches sur des pages web dynamiques et JavaScript pour obtenir une meilleure compréhension de la façon de résoudre le problème.
- Merci, je vais regarder autour pour la meilleure solution, et d'essayer les réponses ci-dessous.
Vous devez vous connecter pour publier un commentaire.
À la vanille, JS alternative:
Le code HTML:
Le JS:
Il est vraiment reconnaissant extensions qui n'utilise jquery.
Voici ce que j'ai trouvé
https://github.com/jedfoster/Readmore.js
Le nécessaire pour balisage Readmore.js est également très léger et très simple. Pas besoin de vous compliquer la vie des ensembles de div s ou codé en dur des noms de classe, il suffit d'appeler
.readmore()
sur l'élément contenant votre bloc de texte et Readmore.js prend en charge le reste.J'ai créé quelque chose de facile à utiliser
HTML:
Voir l'exemple ici
J'ai créé un jQuery/JS script qui devrait faire l'affaire:
JSFiddle: http://jsfiddle.net/Starfire1337/pL9ve/
HTML:
et dans /js/site.js:
Vous pouvez le faire, modifier la propriété de CSS via Javascript.
Code JS
Voir ce code sur JSfiddle
Oui, c'est ... c'est juste un petit exemple http://jsfiddle.net/QDg4P/3/
Voici un pur HTML + CSS solution. Vous pouvez définir le style du "afficher plus" case à cocher à l'aide de CSS pour l'adapter à vos besoins, y compris le masquage de la case de la partie.
http://jsfiddle.net/T7eXL/
après le texte de placer ce code
Si vous voulez quelque chose comme ça (avoir lu élément de plus après le texte) et vous avez également plusieurs éléments dynamiques:
HTML&CSS:
JS&JQUERY