Ausklappbarer Text ist vielleicht die grundlegendste der interaktiven Gestaltungsmöglichkeiten auf Ihrer Website. Damit können Sie die Sichtbarkeit des Textes oder des Inhalts durch Anklicken des Inhaltsetiketts ein- und ausblenden. In diesem Artikel erfahren Sie, wie Sie einen ausklappbaren Text hinzufügen können. Also, lehnen Sie sich zurück, entspannen Sie sich und lesen Sie weiter.
Detailliertes Verfahren zum Hinzufügen eines klappbaren Textes
Website-Ersteller, die mit der Bearbeitung von HTML vertraut sind, können kollabierenden Text direkt in ein Textwidget oder eine Inhaltsseite einfügen. Wenn Sie einen Platz in einem kollabierenden Abschnitt haben, können Sie ihn mit Hilfe des WYSIWYG-Editor.
Vergrößern Sie die WYSIWYG-Symbolleiste, um die Schaltfläche HTML deutlich zu sehen. Sobald Sie auf die Schaltfläche klicken, wird ein Popup-Fenster angezeigt, in dem Sie den HTML-Text Ihres Inhalts direkt bearbeiten können.
Jeder ausklappbare Text sollte ein Container-Div haben, das den gesamten Abschnitt umgibt, eine Überschrift, die als Organisator dient, und ein Ziel-Div, das den Text umgibt, den Sie ausklappen möchten. Es ist wichtig, dass Sie für jedes Element die richtigen Tags und Klassenbeschriftungen verwenden, da der eingeklappte Text sonst nicht funktioniert.
Sie können das div mit class= „openberkeley-collapsible-container“ für den Container verwenden.
Sie können eine Überschrift (h2, h3, h4 oder h5) mit class=“openberkeley-collapsible-controller“ als Controller verwenden.
Verwenden Sie für den Zieltext ein div mit class=“openberkeley-collapsible-target“.
Sie können den Beispielcode unten kopieren und in HTML-Bearbeitungsfenster einfügen. Fügen Sie den Text auch dann ein, wenn sich bereits HTML in dem Fenster befindet. Achten Sie nur darauf, den Code an der richtigen Stelle zu kopieren und einzufügen.
Im Beispielcode unten tauschen Sie den Text im Tag <h2> (die Überschrift des Controllers) sowie im Tag <p> (Zielinhalt des Absatzes) gegen den eingeklappten Text aus.
Beispiel
<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>Wenn Sie damit fertig sind, klicken Sie auf die Schaltfläche Aktualisieren. Hier sehen Sie, wie Ihre Änderungen im WYSIWYG-Editor wiedergegeben werden.
Jedes Ziel und jeder Controller wird im Editor mit einem gepunkteten oder gestrichelten Rahmen angezeigt. Die Rahmen werden nicht angezeigt, wenn Sie die gespeicherte Webseite sehen. Wenn Sie im HTMP-Popup einen ausklappbaren Text erstellt haben, helfen Ihnen diese Rahmen bei der späteren Bearbeitung des Inhalts, ohne dass Sie die HTML-Ansicht öffnen müssen.
Sobald Sie die Webseite aufrufen, wird der gesamte Text eingeklappt. Um ihn zu erweitern, drücken Sie auf die Überschrift des Controllers. Die Funktion zum Einklappen wurde auf Barrierefreiheit getestet. Sie funktioniert sowohl für Screenreader als auch für reine Tastaturbenutzer sehr gut.
Alle zuklappen
Wenn Sie möchten, können Sie Links einfügen, um die Texte auf einmal einzuklappen. Klicken Sie einfach auf den HTML-Editor und fügen Sie den Code vor dem ersten ausklappbaren Element ein.
Das sieht dann so aus:
Für jede Seite kann es nur einen einzigen Satz von Klapplinks geben.
Bearbeiten von faltbarem Text
Nachdem Sie einen ausklappbaren Text eingefügt haben, müssen Sie nicht mehr zu HTML zurückkehren, um ihn zu bearbeiten. Der WYSIWYG HTML-Editor bearbeitet sowohl den Inhalt Ihrer Überschrift als auch den ausklappbaren Text. Hier sehen Sie eine gestrichelte Zeichnung im Bereich der Überschrift sowie eine gepunktete Zeichnung um den ausklappbaren Text. Dies ist außerdem die Art und Weise, wie er in der öffentlichen Ansicht Ihrer Webseite erscheint, die je nach dem Thema, das Sie für Ihre Website verwenden, variieren wird. Anhand dieser Umrisse können Sie erkennen, ob sich der Text außerhalb oder innerhalb des klappbaren Bereichs befindet.
Achten Sie darauf, dass Ihr Überschriftentext kurz und prägnant ist.
Sobald der ausklappbare Text das letzte Element des Seiteninhalts ist, ist es schwierig, nicht ausklappbaren Text darunter einzufügen, ohne dass Sie den HTML-Code unterschreiben müssen. Achten Sie bei der Bearbeitung des HTML-Textes darauf, dass nach dem letzten ausklappbaren Steuer ein leeres
Tag folgt. Die gleichen Probleme können auftreten, wenn Sie versuchen, nicht faltbaren Text zwischen zwei faltbaren Elementen einzufügen oder wenn Sie versuchen, den faltbaren Text zu entfernen. Um diese Änderungen erfolgreich durchzuführen, sollten Sie den HTML-Modus aufrufen.
Für jede Seite gibt es nur ein einziges Set von „Ausklappen-alle“. Die Links funktionieren gut bei Texten, die zusammenklappbar sind, unabhängig davon, wo sie sich auf Ihrer Seite befinden. Aus diesem Grund sollten Sie es unbedingt vermeiden, ausklappbare Texte in vielen Bereichen auf einer Seite unterzubringen.
Pros Hinzufügen klappbarer Texte
Ein Vorteil des Zusammenklappens des Textes besteht darin, dass Ihre Überschrift zu Randelementen wird, so dass die Benutzer einen Eindruck von dem verfügbaren Text erhalten, ohne dass sie so viel scrollen müssen.
Das Hinzufügen von ausklappbarem Text zu Ihrer Seite bietet Interaktivität und ermöglicht es Ihnen, mehr Text auf Ihrer Website unterzubringen.
Ein weiterer Vorteil ist, dass diejenigen, die Tastaturen verwenden, nicht in die fokussierbaren Faktoren der Startseite treten müssen, um an die gewünschte Stelle zu gelangen.
Fazit
Ist faltbarer Text die beste und zuverlässigste Methode für die Hilfedokumentation oder wirft er nur weitere Probleme und Bedenken auf?
Insgesamt bietet der ausklappbare Text einen starken Vorteil bei der Sortierung von Text oder Inhalt und muss trotz einiger Mängel befolgt werden. Ein ausklappbarer Text kann Folgendes tun:
Dies komprimiert viele wichtige Informationen an einer kleinen Stelle, die der Leser schnell überfliegen kann.
Dadurch wird auch der Umfang der Informationen verborgen, so dass der Text für die Leser und Benutzer leichter und einfacher aussieht. Bis zu dem Zeitpunkt, an dem sie die Abschnitte vergrößern, um zu wissen, wie viel Text darin enthalten ist.
So können Sie den Text auch so einbinden, dass er sich den Bedürfnissen der Benutzer anpasst. Wenn die Leser mehr Details benötigen, können sie einfach den Link aufrufen, um mehr zu erfahren und zu lesen.
Dies ermöglicht es den Lesern auch, mit dem Text in Beziehung zu treten, so dass sie sich das heraussuchen, was sie wissen möchten.
Sobald Sie zu langen Seiten tendieren, kann das Zusammenklappen von Texten ein bemerkenswerter Gewinn für die Benutzerfreundlichkeit sowie die Navigation sein.
Es hat jedoch auch einige Nachteile. Wenn ein Leser nach einem Schlüsselbegriff sucht, der im eingeklappten Text vergraben ist, kann er verwirrt sein, weil er den hervorgehobenen Schlüsselbegriff auf der Webseite nicht findet, denn der eingeklappte Text bleibt auch in den Suchergebnissen eingeklappt.
