Le texte rétractable est peut-être le plus simple des éléments de conception interactive de votre site. Il vous permet de modifier la visibilité du texte ou du contenu en cliquant sur cette étiquette. Cet article vous aidera à savoir comment ajouter un texte rétractable. Alors, asseyez-vous, détendez-vous et poursuivez votre lecture.
Processus détaillé d’ajout d’un texte rétractable
Les concepteurs de sites web qui maîtrisent l’édition HTML peuvent ajouter un texte en mosaïque directement à un widget de texte ou à une page de contenu. Si vous disposez d’un emplacement dans une section à texte déroulant, vous pouvez l’éditer à l’aide de la fonction Editeur WYSIWYG.
Augmentez la taille de la barre d’outils WYSIWYG pour voir clairement le bouton HTML. Une fois que vous aurez appuyé sur ce bouton, une fenêtre contextuelle s’affichera, dans laquelle vous pourrez directement éditer le texte HTML de votre contenu.
Chaque texte rétractable doit comporter une div conteneur qui entoure l’ensemble du morceau, un titre qui sert d’organisateur et une div cible qui entoure le texte que vous souhaitez rétracter. Il est essentiel d’utiliser les bonnes balises et les bonnes étiquettes de classe pour chaque élément, faute de quoi le texte réduit ne fonctionnera pas.
Vous pouvez utiliser la div avec class= « openberkeley-collapsible-container » pour le conteneur.
Vous pouvez utiliser un titre (h2, h3, h4 ou h5) avec class= »openberkeley-collapsible-controller » pour le contrôleur.
Utilisez la div avec class= »openberkeley-collapsible-target » pour le texte cible.
Vous pouvez copier et coller l’exemple de code ci-dessous dans les fenêtres d’édition HTML. Ajoutez le texte même s’il y a déjà du HTML dans la fenêtre ; assurez-vous simplement de copier et de coller le code au bon endroit.
Dans l’exemple de code ci-dessous, remplacez le texte de la balise <h2> (l’en-tête du contrôleur) ainsi que de la balise <p> (le contenu cible du paragraphe) par le texte réduit.
Exemple
<textarea style="width:100%;min-height:500px;">
<div class="openberkeley-collapsible-container">
<h2 class="openberkeley-collapsible-controller">Line of collapsible text</h2>
<div class="openberkeley-collapsible-target">
<p>In hac habitasse platea dictumst. Suspendisse dictum, velit vel vehicula gravida,
turpis nulla dignissim nibh, a tristique enim dui vestibulum enim. Duis cursus
euismod diam vitae gravida. Etiam a purus lorem.</p>
</div>
</div>
<div class="openberkeley-collapsible-container">
<h2 class="openberkeley-collapsible-controller">Another line of collapsible text</h2>
<div class="openberkeley-collapsible-target">
<p>Here is another paragraph that will expand. It can be long or short. You can add any formatting and layout you want to a collapsible item. For example:</p>
<h3>Here is a subheading</h3>
<p>More text.</p>
<table>
<tbody>
<tr><th>Table header</th><th>Table header 2</th></tr>
<tr>
<td>Content of table</td>
<td>More content of table</td>
</tr>
</tbody>
</table>
</div>
</div>
<h2>No longer expanding!</h2>
<p>This stuff is just regular.</p>
</textarea>Lorsque vous avez terminé, cliquez sur le bouton « Mettre à jour ». Vous verrez alors vos modifications reflétées dans l’éditeur WYSIWYG.
Chaque cible et chaque contrôleur seront affichés dans l’éditeur avec une bordure en pointillés ou en tirets. Les bordures ne seront pas visibles si vous consultez la page web sauvegardée. Si vous avez créé un texte repliable dans la fenêtre contextuelle HTMP, ces bordures vous aideront à modifier le contenu ultérieurement sans avoir à ouvrir la vue HTML.
Lorsque vous accédez à la page web, tout le texte commence à se réduire. Pour le développer, appuyez sur le titre du contrôleur. La tâche de réduction a été testée pour des raisons d’accessibilité. Elle fonctionne très bien pour les lecteurs d’écran et les utilisateurs de clavier uniquement.
Réduire tout
Si vous le souhaitez, vous pouvez insérer des liens pour réduire les textes en une seule fois. Il vous suffit de cliquer sur l’éditeur HTML et de coller le code avant l’élément rétractable initial.
Voici à quoi cela ressemblera :
Il ne peut y avoir qu’un seul ensemble de liens de fermeture pour chaque page.
Comment modifier un texte rétractable
Après avoir inséré un texte rétractable, il n’est pas nécessaire de revenir à HTML pour effectuer des modifications. L’éditeur HTML WYSIWYG modifiera le contenu de votre titre ainsi que le texte repliable. Ici, vous verrez un dessin en pointillé dans la région de l’en-tête ainsi qu’un dessin en pointillé autour du texte qui est repliable. Il s’agit en outre de la manière dont le texte apparaît sur la vue publique de votre page web, qui variera en fonction du thème que vous utilisez pour votre site. Ces contours vous permettront de voir si le texte se trouve à l’intérieur ou à l’extérieur de la partie rétractable.
Pour un affichage remarquable, veillez à ce que votre texte d’en-tête soit bref.
Une fois que le texte rétractable est le dernier élément du contenu de la page, il est difficile d’inclure un texte non rétractable en dessous sans avoir à signer le code HTML. Lorsque vous modifiez le texte HTML, veillez à laisser une balise
vide après la dernière taxe rétractable. Les mêmes problèmes peuvent survenir si vous tentez d’inclure du texte non repliable entre deux éléments repliables ou si vous essayez de supprimer le texte repliable. Pour réussir ces modifications, assurez-vous de visiter le mode HTML.
Il n’y a qu’un seul jeu de collapse-all pour chaque page. Les liens fonctionnent bien sur les textes qui sont repliables, quel que soit l’endroit où ils se trouvent sur votre page. C’est pourquoi il est vivement conseillé d’éviter de placer des textes repliables dans plusieurs volets d’une même page.
Les avantages de l’ajout de textes rétractables
L’un des avantages de la réduction du texte est que votre titre devient un élément de bordure, ce qui donne aux utilisateurs une impression du texte disponible sans qu’ils aient besoin de faire défiler le texte.
L’ajout d’un texte pliable à votre page offre de l’interactivité tout en vous permettant d’inclure plus de texte dans votre site.
Un autre avantage est que les utilisateurs de claviers n’ont pas besoin d’entrer dans les facteurs de focalisation de la page d’accueil pour aller à l’endroit qu’ils souhaitent.
Conclusion
Le texte rétractable est-il la meilleure solution pour la documentation d’aide, ou ne fait-il que soulever d’autres questions et préoccupations ?
Dans l’ensemble, le texte rétractable offre un avantage considérable pour le tri du texte ou du contenu et doit être respecté en dépit de certains défauts. Un texte rétractable peut remplir les fonctions suivantes :
Cela permet de comprimer une grande partie des informations vitales dans un espace réduit que les lecteurs peuvent parcourir rapidement.
Cela permet également de dissimuler la quantité d’informations, de sorte que le texte paraît plus léger et plus simple aux lecteurs et aux utilisateurs. Jusqu’à ce qu’ils agrandissent les sections pour connaître la quantité de texte qu’elles contiennent.
Cela vous permet également d’intégrer du texte de manière à ce qu’il s’adapte aux besoins des utilisateurs. Lorsque les lecteurs ont besoin de plus de détails, il leur suffit de cliquer sur le lien pour en savoir plus.
Cela permet également aux lecteurs d’interagir avec le texte, de sorte qu’ils choisissent ce qu’ils veulent savoir.
Lorsque les pages sont longues, la réduction des textes peut s’avérer très bénéfique pour la convivialité et la navigation.
Toutefois, cette méthode présente également quelques inconvénients : si un lecteur recherche une expression clé enfouie dans le texte réduit, il risque d’être déconcerté de ne pas trouver l’expression clé mise en évidence sur la page web, car le texte réduit reste réduit même dans les résultats de recherche.
