Inhalt in der Mitte eines Absatzes anzeigen / ausblenden

Ich muss in der Lage sein, willkürlichen Inhalt (Absätze, Listen, vielleicht Bilder) zu verbergen / anzuzeigen, basierend auf einem Benutzer, der auf einen Link klickt. Das ist leicht genug, aber ich stoße auf viele Probleme, wenn ich versuche, dies mitten in einem Absatz hinzuzufügen.

Wir versuchen, in bestimmten Bereichen der Seite einen Link “mehr lesen” zu haben. Es muss irgendwo in einem Textabschnitt beginnen können. Ich habe dies mit einem -Tag versucht, aber es verursachte Probleme, weil die zu verbergende Inhaltsspanne möglicherweise mehrere Absätze, Listen usw. enthalten musste, sodass WordPress den Bereich am Ende des ersten Absatzes schloss, um ihn als HTML gültig zu machen , das macht Sinn.

Als nächstes habe ich versucht, ein

-Tag hinzuzufügen, dann das Div in meinem Stylesheet inline, aber WordPress schloss den Absatz direkt bevor ich den Div-Text hinzufüge, was auch als gültiges HTML Sinn macht.

Hat jemand eine Empfehlung, wie man das macht? Ich möchte WordPresss natürlichen Zusatz von

-Tags lieber nicht entfernen, da ich davon ausgehe, dass Leute, die die Website aktualisieren werden, nicht in die Codeansicht gehen und Absatz-Tags hinzufügen wollen.

Der HTML-Code, den ich verwende, ist:

 What is community acupuncture? Here is the text that will show before the hidden section
Here is the rest of the paragraph in the hidden section.

Here is another paragraph of text that needs to be hidden. I realize that it is not valid HTML to have a div tag start in the middle of one paragraph and then encase a couple more paragraphs or a list or whathaveyou, which is why I am wondering how anyone else handled this issue.

Ich habe das als mein CSS:

 .hidden-text { display: inline; } 

und die kleine jquery, die ich bis jetzt habe, ist wie folgt:

 $('.hidden-text').before("...").hide().after("Read More"); 

Ich bin mir nicht sicher, ob es für mich besser ist, dies hier zu posten, da das Problem direkt mit den hinzugefügten

-Tags zusammenhängt, oder wenn es besser wäre, es in einem Frontend-Designabschnitt der Site zu veröffentlichen.

Solutions Collecting From Web of "Inhalt in der Mitte eines Absatzes anzeigen / ausblenden"

Das Problem mit dem, was Sie zu tun versuchen, ist, dass Sie ein Blocktyp-HTML-Element

teilen. In Ihrem Beispiel haben Sie effektiv

, was einfach nicht gut ist. Sie können also

und

auf diese Weise mischen. Sie können jedoch eine Kombination aus Absätzen und classn verwenden:

 

Text

More text

Wo es sinnvoll ist,

von einem Shortcode zu erweitern. Sie können Ihren Link auch mit demselben Shortcode generieren. Sie können sicherstellen, dass sich der Absatz mit der hide-from-here class so verhält, als ob er nicht mit CSS verwendet wird.

Jetzt müssen Sie noch die restlichen Absätze ausblenden. Hier hilft jquery’s .nextAll , allen verbleibenden Absätzen die class zu geben

 $("p:hide-from-here").nextAll().addClass( "following-paragraphs" ); 

In dieser class definieren Sie display:hidden , die Sie mit dem Link umschalten (oder Sie entfernen die class).