Kann Text nur mit CSS (kein JavaScript-Code) ausgeblendet und angezeigt werden? [geschlossen]

86

Ist es möglich, Text über einen Link nur mit CSS ein- und auszublenden - ohne JavaScript?

Zum Beispiel: Auf dieser Seite

Beachten Sie den Link "Mehr". Wenn Sie darauf klicken, wird der Text ausgeblendet. Dieses spezielle Beispiel ist JavaScript, aber ich bin nicht sicher, ob es mit reinem CSS möglich ist.

css user3188544
quelle

2

Ein weiteres Beispiel für eine reine CSS-Website (mit Menüs) ist grc.com (Steve Gibson von Security Now ).

Peter Mortensen

1

Mögliche Duplikate: 1 2

user202729

Mögliches Duplikat von Hide Inhaltsliste mit nur CSS

anzeigen

Schauen Sie dort nach: Seitenleiste nur mit CSS umschalten Es gibt zwei Beispiele, von denen eines einen Klick erfordert (mit verstecktem Kontrollkästchen) und eines mit Hover )

F. Hauri

@ Enge Wähler: Erklären Sie sich.

Boann

107

Es gibt das <details>Element , das noch nicht in Edge integriert ist:

<details>
  <summary>more <!-- a bad summary --></summary>
  <p>Some content</p>
</details>

Erweitern Sie das Snippet

Ich bin mir nicht sicher, wie schwierig es ist, über alle Browser hinweg einheitlich zu stylen.

Es gibt einen allgemeinen Checkbox-Hack (bei dem das Kontrollkästchen ausgeblendet und das Etikett so gestaltet werden kann, dass es wie alles aussieht):

#more:not(:checked) ~ #content {
  display: none;
}

<input id="more" type="checkbox" /> <label for="more">more</label>

<p id="content">Some content</p>

Erweitern Sie das Snippet

aber es ist nicht immer (vielleicht jemals? hmm) angemessen, es zu benutzen; Normalerweise können Sie einfach auf die Anzeige des Inhalts zurückgreifen, wenn JavaScript nicht geladen werden kann, und den Link "Mehr" darauf haben.

Es gibt auch :target, aber es ist wahrscheinlich noch weniger angemessen, da es schwieriger ist, den Schließmechanismus einzubauen.

#content {
  display: none;
}

#content:target {
  display: block;
}

#less {
  display: none;
}

#content:target ~ #less {
  display: block;
}

<a href="#content" id="more">More</a>
<p id="content">Lorem ipsum</p>
<a href="#" id="less">Less</a>

Erweitern Sie das Snippet

Ry-
quelle

8

Es gibt sehr legitime Verwendungsmöglichkeiten für die Checkbox-Methode. Betrachten Sie ein Formular wie dieses Beispiel, das ich verspottet habe .

MisterManSam

7

Verwirrt, warum Sie denken :checkedoder :targetniemals angemessen wären. Sie existieren schließlich.

Konrad Rudolph

@KonradRudolph Ich kann mir nur die idAnforderung vorstellen , die die Verwendung für dynamische Seiten erschwert. Kein guter Grund, obwohl IMO - dieses versteckte Kontrollkästchenmuster ist ziemlich alt, nicht schwer zu verstehen, und Sie können in dynamischen Situationen einfach einen Hash als Teil der ID verwenden.

Izkata

3

@KonradRudolph: Möglicherweise ist es niemals angebracht , Inhalte mit einem "Mehr" -Link zu erweitern . Insbesondere :target- der Inhalt verschwindet, wenn Sie irgendwo anders verlinken. :checkedbedeutet, dass Sie innerhalb der Erweiterung keine Verknüpfung herstellen können. Wenn Sie das Kontrollkästchen ausblenden, müssen Sie die Beschriftung tastaturfokussierbar machen. Da für beide Funktionen der Inhalt bereits vorhanden sein muss, würde ich ihn standardmäßig anzeigen und in den meisten Fällen JavaScript verwenden, um die Verbesserung bereitzustellen.

Ry-

@misterManSam: Das ist kein "Mehr" -Link, das ist eine tatsächliche Form.

Ry-

39

Ja , das ist mit reinem CSS möglich. Sie können auf ein Element klicken, indem Sie das :checkedAttribut eines Kontrollkästchens in Kombination mit <label>dem forAttribut eines Elements verwenden .

Da das Kontrollkästchen kann nicht markiert , können Sie dies auf Sichtbarkeit ändern verwenden , indem Sie einfach visibility: hiddenauf ein Element sich aus :checked(sobald das Kontrollkästchen erneut angeklickt wird, diese Pseudo-Selektor ungültig sein, und der CSS - Selektor wird nicht mehr das Ziel übereinstimmen).

Dies kann <label>unter Verwendung des forAttributs auf a erweitert werden, sodass Sie das Kontrollkästchen selbst vollständig ausblenden und Ihr eigenes Styling <label>direkt auf das anwenden können .

Im Folgenden wird der benachbarte Geschwisterkombinator ( +) verwendet, um die Klasse umzuschalten, togglewenn auf das <label>Element geklickt wird:

input[type="checkbox"] {
  display: none; /* Hide the checkbox */
}

/* This is tied to the invisible checkbox */
label {
    background-color: #4CAF50;
    border: 2px solid black;
    border-radius: 20px;
    color: white;
    padding: 15px 32px;
    text-align: center;
    font-size: 16px;
    display: inline-block;
    margin-bottom: 20px;
    cursor: pointer;
    user-select: none;
}

/* The target element to toggle */
input[type="checkbox"]:checked + label + .toggle {
  visibility: hidden;
}

<input type="checkbox" id="checkbox" />
<label for="checkbox">Click me to toggle the content</label>
<div class="toggle">CONTENT</div>

Erweitern Sie das Snippet

Obsidianzeitalter
quelle

3

Dies ist es, was es CSS ermöglicht, Regel 110 zu bestehen und als vollständig eli.fox-epste.in/rule110

ESR

17

Ja, Sie können dies problemlos nur mit CSS tun. Bitte beachten Sie den folgenden Code:

* {
  box-sizing: border-box;
}

body {
  background-color: #646464;
  color: #fff;
}

header {
  background-color: rgba(0, 0, 0, 0.5);
  font-size: 1.5em;
  text-align: center;
  padding: 1em;
}

.panel-wrapper {
  position: relative;
}

.btn {
  color: #fff;
  background: #000;
  border-radius: 1.5em;
  left: 30%;
  padding: 1em;
  text-decoration: none;
  width: 40%;
}

.show,
.hide {
  position: absolute;
  bottom: -1em;
  z-index: 100;
  text-align: center;
}

.hide {
  display: none;
}

.show:target {
  display: none;
}

.show:target~.hide {
  display: block;
}

.show:target~.panel {
  max-height: 2000px;
}

.show:target~.fade {
  margin-top: 0;
}

.panel {
  position: relative;
  margin: 2em auto;
  width: 70%;
  max-height: 100px;
  overflow: hidden;
  transition: max-height .5s ease;
}

.fade {
  background: linear-gradient(to bottom, rgba(100, 100, 100, 0) 0%, #646464 75%);
  height: 100px;
  margin-top: -100px;
  position: relative;
}

<!DOCTYPE html>
<html lang='en' class=''>

<head>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'>
</head>

<body>
  <header>CSS Only: Show More</header>
  <div class="panel-wrapper">
    <a href="#show" class="show btn" id="show">Show Full Article</a>
    <a href="#hide" class="hide btn" id="hide">Hide Full Article</a>
    <div class="panel">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra consectetur accumsan. Vestibulum vitae ipsum euismod, tempus ligula non, tempus lacus. Phasellus at pellentesque ex. Praesent at ipsum dui. Cras lectus neque, bibendum ac diam
        a, elementum tristique felis. Sed iaculis, diam at vehicula lacinia, odio urna tincidunt felis, sit amet scelerisque urna erat non leo. Pellentesque vel leo vitae tellus bibendum viverra.</p>
      <p>Donec id ultrices mi. Suspendisse potenti. Pellentesque cursus sagittis lacinia. Mauris elit sem, eleifend nec facilisis eget, fermentum sed odio. Nam aliquam massa nec leo tincidunt rhoncus. Integer tincidunt finibus tincidunt. Maecenas aliquam
        fermentum nisi, vitae mattis neque vehicula vitae.</p>
      <p>Nam orci purus, consequat sed lorem id, lacinia efficitur lorem. Vestibulum id quam ut elit congue varius. Donec justo augue, rhoncus non nisl ut, consectetur consequat velit. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Aliquam
        auctor sapien lorem, at vestibulum justo congue vel. Duis volutpat, lorem quis tincidunt ornare, felis tortor posuere tellus, nec pretium neque velit vulputate libero.</p>
      <p>Morbi tortor tortor, auctor porttitor felis in, eleifend cursus ante. Nullam pellentesque lorem ipsum, in fringilla enim suscipit cursus. Pellentesque feugiat volutpat congue. Donec ac ante elit. Quisque ornare lacus dui, id commodo tortor lacinia
        nec. Curabitur dignissim magna sagittis neque aliquam porttitor. Aenean sit amet tincidunt risus.</p>
      <p>Cras feugiat, sapien luctus congue gravida, enim enim tristique nisl, vel porta lacus ante vitae dolor. Duis at nisl sed lectus imperdiet congue. Vestibulum pellentesque finibus ligula, sit amet elementum enim dignissim eget. Nullam bibendum justo
        eros, in placerat est ullamcorper nec. Donec blandit accumsan venenatis. Vivamus nec elit arcu. Morbi ultrices blandit sapien eget aliquam. Pellentesque placerat et libero a sodales. Donec eget erat ac velit maximus ullamcorper. Nulla laoreet
        dolor in purus sollicitudin varius. Duis eu erat ut magna lobortis rhoncus ac at lacus. Nullam in mi sed sem porttitor molestie. Aenean auctor dui in neque vulputate, in mattis purus tristique. Aliquam egestas venenatis ultricies. Nam elementum
        ante libero, nec dictum erat mollis dapibus. Phasellus pharetra euismod nibh, sit amet lobortis odio.</p>
      <p>Sed bibendum dapibus leo eu facilisis. Cras interdum malesuada diam id lobortis. Phasellus tristique odio eget placerat ornare. Phasellus nisl nulla, auctor convallis turpis tempus, molestie blandit urna. Nullam accumsan tellus massa, at tincidunt
        metus imperdiet sed. Donec sed imperdiet quam, id dignissim dolor. Curabitur mollis ultricies tempor. Morbi porttitor, turpis et dignissim aliquam, nunc lacus dignissim massa, a consequat nibh est vel turpis. Pellentesque blandit, ante vehicula
        sollicitudin imperdiet, tellus urna fringilla diam, id tempor neque augue eu nisl. Quisque eu sem posuere, vehicula risus ut, ullamcorper massa. Fusce vulputate bibendum erat, vel dapibus dui consectetur nec. Donec mauris mauris, egestas non malesuada
        non, finibus nec lacus. Duis at mauris tincidunt, accumsan augue non, vestibulum libero.</p>
      <p>Vestibulum fermentum vulputate lectus, at sollicitudin diam laoreet vitae. Aliquam erat volutpat. Nulla condimentum, arcu nec suscipit ultrices, urna tortor rutrum purus, sed mollis lacus ligula vitae justo. Duis vitae malesuada sem, eget finibus
        nibh. Etiam facilisis, urna ac blandit molestie, quam velit congue nibh, ac.</p>

    </div>
    <!-- end panel -->
    <div class="fade"></div>
  </div>
  <!-- end panel-wrapper -->

</body>

</html>

Erweitern Sie das Snippet

Akash
quelle

14

Sie können ein Kontrollkästchen ausblenden, es jedoch über das zugehörige <label>Element aktivieren / deaktivieren .

Abhängig davon, ob das Kontrollkästchen aktiviert ist oder nicht, können Sie den zusätzlichen Text ausblenden / anzeigen und sogar den Text der Beschriftung von "Mehr" in "Weniger" ändern.

Ich habe einige zusätzliche Details in das CSS aufgenommen, damit die Absichten jeder Definition etwas klarer werden können.

1. Mit einem Schalter "Mehr" / "Weniger":

.more-text, #more-checkbox {          /* Hide the second paragraph and checkbox */
  display: none;
}

input:checked ~ .more-text {          /* Show the second paragraph when checked */
  display: block;
}

.more-label::after {                  /* Label underline, hand cursor, color */
  cursor: pointer;
  text-decoration: underline;
  color: #666;
}

input ~ .more-label::after {          /* Set label text to "More" by default */
  content: 'More';
}

input:checked ~ .more-label::after {  /* Set label text to "Less" when checked */
  content: 'Less';
}

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper, arcu ut facilisis interdum, lacus felis fringilla nulla, vel scelerisque massa quam vel leo.
</p>

<input type="checkbox" id="more-checkbox" />
<label class="more-label" for="more-checkbox"></label>

<p class="more-text">
  Sed a ullamcorper ex. In elementum purus ullamcorper justo gravida aliquet. Aliquam erat volutpat. Maecenas in ante quam.
</p>

Erweitern Sie das Snippet

2. Mit der Schaltfläche "Mehr" oben und der Schaltfläche "Weniger" unten:

.more-text, #more-checkbox, .less-label {
  display: none;
}

.more-label, .less-label {          
  cursor: pointer;
  text-decoration: underline; 
  color: #666;
}

input:checked ~ .more-text, input:checked ~ .less-label {
  display: block;
}

input:checked ~ .more-label {
  display: none;
}

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper, arcu ut facilisis interdum, lacus felis fringilla nulla, vel scelerisque massa quam vel leo.</p>

<input type="checkbox" id="more-checkbox" />
<label class="more-label" for="more-checkbox">More</label>

<p class="more-text">
  Sed a ullamcorper ex. In elementum purus ullamcorper justo gravida aliquet. Aliquam erat volutpat. Maecenas in ante quam.
</p>

<label class="less-label" for="more-checkbox">Less</label>

Erweitern Sie das Snippet

Tyler Roper
quelle

11

Technisch gesehen ist es möglich, die Sichtbarkeit von Text basierend auf dem Klicken auf eine Schaltfläche oder einen Link umzuschalten, wie unten gezeigt:

.hidden-text {
  display: none;
}

.toggle-text:focus + .hidden-text {
  display: block;
}

<p>
  This is an example with no hidden content until you... <a href="#" class="toggle-text">read more</a>!
  <span class="hidden-text">Now I'm visible!!!</span>
</p>

Erweitern Sie das Snippet

Trotzdem empfehle ich dringend, dass Sie sich mit JavaScript vertraut machen, da die Lösung mit JavaScript für so etwas viel einfacher ist und zusätzliche Flexibilität ermöglicht.

Adam Chubbuck
quelle

Dies hängt davon ab, ob der Browser den Link fokussiert, wenn Sie darauf klicken, was der Standard nicht erfordert (zumindest das letzte Mal, als ich es überprüft habe) und was nicht alle Browser tun (z. B. funktioniert dies nicht in Safari). Die Verwendung von: checked oder: target wäre wahrscheinlich besser.

Chridd

10

Ja, Sie können dies nur mit HTML und CSS tun.

body { padding: 20px; }

div { margin-top: 10px; border: 1px solid black; width: 200px; height: 100px;
    padding: 5px;
}
input:checked + label + div { display: none; }
input + label:after { content: " To Hide"; }
input:checked + label:after { content: " To Show"; }

label {
    background-color: yellow;
    box-shadow: inset 0 2px 3px rgba(255,255,255,0.2), inset 0 -2px 3px rgba(0,0,0,0.2);
    border-radius: 4px;
    font-size: 16px;
    display: inline-block;
    padding: 2px 5px;
    cursor: pointer;
}

<input type='checkbox' style='display: none' id=cb>
<label for=cb>Click Here</label>
<div>
    Hello. This is some stuff.
</div>

Erweitern Sie das Snippet

Monir alhussini
quelle

4

Hallo monir alhussini, willkommen bei Stack Overflow. Kann ich einen Kommentar dazu abgeben, wie Sie Ihre Antwort verbessern können? Ihr Code funktioniert sehr gut (zumindest in meinem Browser), aber mit einem gewissen Kontext wäre er eine bessere Antwort. Sie könnten beispielsweise erklären, wie und warum diese vorgeschlagene Änderung das Problem des Fragestellers lösen würde, möglicherweise einschließlich eines Links zu der entsprechenden Dokumentation. Dies würde es für sie nützlicher machen und auch für andere Site-Leser, die nach Lösungen für ähnliche Probleme suchen.

Vince Bowdren

3

Jetzt können Sie Text auch nur mit CSS ein- und ausblenden! Wenn Sie eine Texteingabe verwenden und Text basierend auf dem Status des Eingabefelds anzeigen / ausblenden möchten, können Sie die neue CSS-Pseudoklasse :placeholder-shownfür <input>oder verwenden <textarea>. Hier ist ein Beispiel / eine Demo der oben genannten Pseudoklasse!:

/* Some base style  */
.app {
  margin: 10px auto;
  padding: 10px;
}

code {
  background-color: lightgray;
  padding: 4px;
}

input {
  padding: 5px 10px;
}

input:focus {
  outline: none;
}

/* When there is something in input box give 
  it a solid blue border */

input:not(:placeholder-shown) {
  border: solid 2px #42A5F5
}

/* Hide the p initially */
p {
  background-color: #F0F4C3;
  padding: 5px;
  opacity: 0;
  transition: all 300ms ease-in-out;
}


/* Show the p when the placeholder is not shown. 
  i.e. Something is in the input box and placeholder is gone */
input:not(:placeholder-shown)+p {
  opacity: 1
}

<div class="app">
  <h1>Hide/Show Text using input's <code>:placehoder-shown</code> psuedo class!</h1>
  <label for="name">Enter your name</label>
  <input type="text" id="name" placeholder="Your Name">
  <p class="msg">Well done!</p>
</div>

Erweitern Sie das Snippet

Hier ist der Link zu MDN-Dokumenten.

Dies ist eine experimentelle Technologie. Überprüfen Sie die Browserkompatibilitätstabelle sorgfältig, bevor Sie sie in der Produktion verwenden.

Hiren
quelle

-1

Vielleicht findet jemand diese Lösung intuitiver und einfacher zu implementieren. Die Mechanik dabei ist, dass der Link auf sich selbst abzielt und in diesem Fall einfach alles auswählen kann, was als nächstes im DOM kommt.

.toggle-hide,
.toggle-content {
  display: none;
}
.toggle-show:target + .toggle-hide,
.toggle-show:target + .toggle-hide + .toggle-content {
  display: block;
}
.toggle-show:target {
  display: none;
}

<a id="target" class="toggle-show" href="#target">Show</a>
<a class="toggle-hide" href="#" >Hide</a>
<p class="toggle-content">Lorem ipsum</p>

Erweitern Sie das Snippet

Mirous
quelle

-3

Verwenden "display: none;" attribute.

Ajay Munugala
quelle

Hallo @Ajay, danke für deinen Beitrag. Sie scheinen jedoch nur die Hälfte der Frage beantwortet zu haben: Sie haben gezeigt, wie man es versteckt, aber nicht wie man es einblendet und mit CSS zwischen den beiden Zuständen wechselt

Charlie Harding

Bildschirmsperre; wird es einblenden.

Ajay Munugala

Und wie verwenden Sie CSS, um mit einem Klick umzugehen und zwischen den Status zu wechseln, während die Frage gestellt wird?

Charlie Harding

Kann Text nur mit CSS (kein JavaScript-Code) ausgeblendet und angezeigt werden? [geschlossen]

Antworten: