web-dev-qa-db-de.com

Hide Inhaltsliste nur mit CSS anzeigen, kein Javascript verwendet

Ich habe nach einem guten Trick gesucht, um einen Hide/Show-Inhalt oder eine Liste nur mit CSS und ohne Javascript zu erstellen ..__ Ich habe es geschafft, diese Aktion auszuführen:

<!DOCTYPE html>
<head>

   <style>
      #cont {display: none; }
      .show:focus + .hide {display: inline; }
      .show:focus + .hide + #cont {display: block;}
   </style>

</head>
<body>

   <div>
        <a href="#show"class="show">[Show]</a>
        <a href="#hide"class="hide">/ [Hide]</a>
        <div id="cont">Content</div>
   </div>

</body>
</html>

Demo hier: http://jsfiddle.net/6W7XD/ Und es funktioniert aber nicht so, wie es sollte. Hier ist das Problem: Wenn der Inhalt angezeigt wird, können Sie ihn ausblenden, indem Sie auf "irgendwo auf der Seite" klicken. Wie kann ich das deaktivieren? Wie kann der Inhalt "nur" durch Klicken auf "Ausblenden" ausgeblendet werden? Vielen Dank im Voraus!

25
Frederic Kizar

Ich würde keine Kontrollkästchen verwenden, ich würde den Code verwenden, den Sie bereits haben

DEMO http://jsfiddle.net/6W7XD/1/

CSS

body {
  display: block;
}
.span3:focus ~ .alert {
  display: none;
}
.span2:focus ~ .alert {
  display: block;
}
.alert{display:none;}

HTML

<span class="span3">Hide Me</span>
<span class="span2">Show Me</span>
<p class="alert" >Some alarming information here</p>

Auf diese Weise wird der Text nur durch Klicken auf das Hide-Element ausgeblendet

27
Kevin Lynch

Dies wird Sie umhauen: Versteckte Optionsfelder .

HTML:

<label for="show">
    <span>[Show]</span>
</label>
<input type=radio id="show" name="group">
<label for="hide">
    <span>[Hide]</span> 
</label>    
<input type=radio id="hide" name="group">
<span id="content">Content</span>

Und CSS:

input#show, input#hide {
    display:none;
}

span#content {
    display:none;
}
input#show:checked ~ span#content {
  display:block;
}

input#hide:checked ~ span#content {
    display:none;
}
13
Pat Lillis

Es gibt 3 schnelle Beispiele mit reinem CSS und ohne Javascript, bei denen der Inhalt "auf Klick", mit einem "gepflegten Klick" und einem dritten "Onhover" (alle nur in Chrome getestet) angezeigt wird. Entschuldigung für den Beitrag dieses Beitrags, aber diese Frage ist das erste SEO-Ergebnis und vielleicht kann mein Beitrag Anfängern wie mir helfen.

Ich denke (nicht getestet), aber den Vorteil des Arguments "Inhalt", dass Sie ein tolles Symbol wie Font Awesome (seinen\f-Code) oder ein Hexadezimal-Symbol anstelle von "Hide" und "Show" hinzufügen können "den Trick internationalisieren.

beispiellink http://jsfiddle.net/MonkeyTime/h3E9p/2/

<style>
label { position: absolute; top:0; left:0}

input#show, input#hide {
    display:none;
}

span#content {
    display: block;
    -webkit-transition: opacity 1s ease-out;
    transition: opacity 1s ease-out;
    opacity: 0; 
    height: 0;
    font-size: 0;
    overflow: hidden;
}

input#show:checked ~ .show:before {
    content: ""
}
input#show:checked ~ .hide:before {
    content: "Hide"
}

input#hide:checked ~ .hide:before {
    content: ""
}
input#hide:checked ~ .show:before {
    content: "Show"
}
input#show:checked ~ span#content {
    opacity: 1;
    font-size: 100%;
    height: auto;
}
input#hide:checked ~ span#content {
    display: block;
    -webkit-transition: opacity 1s ease-out;
    transition: opacity 1s ease-out;
    opacity: 0; 
    height: 0;
    font-size: 0;
    overflow: hidden;
}
</style>
<input type="radio" id="show" name="group">   
<input type="radio" id="hide" name="group" checked>
<label for="hide" class="hide"></label>
<label for="show" class="show"></label>
<span id="content">Lorem iupsum dolor si amet</span>


<style>
#show1 { position: absolute; top:20px; left:0}
#content1 {
    display: block;
    -webkit-transition: opacity 1s ease-out;
    transition: opacity 1s ease-out;
    opacity: 0; 
    height: 0;
    font-size: 0;
    overflow: hidden;
}
#show1:before {
    content: "Show"
}
#show1:active.show1:before {
    content: "Hide"
}
#show1:active ~ span#content1 {
    opacity: 1;
    font-size: 100%;
    height: auto;
}
</style>

<div id="show1" class="show1"></div>
<span id="content1">Ipsum Lorem</span>


<style>
#show2 { position: absolute; top:40px; left:0}
#content2 {
    display: block;
    -webkit-transition: opacity 1s ease-out;
    transition: opacity 1s ease-out;
    opacity: 0; 
    height: 0;
    font-size: 0;
    overflow: hidden;
}
#show2:before {
    content: "Show"
}
#show2:hover.show2:before {
    content: "Hide"
}
#show2:hover ~ span#content2 {
    opacity: 1;
    font-size: 100%;
    height: auto;
}

/* extra */
#content, #content1, #content2 {
    float: left;
    margin: 100px auto;
}
</style>

<div id="show2" class="show2"></div>
<span id="content2">Lorem Ipsum</span>
8
MonkeyTime

Das habe ich kürzlich verwendet.

CSS

div#tabs p{display:none;}

div#tabs p.tab1:target {display:block;}
div#tabs p.tab2:target {display:block;}
div#tabs p.tab3:target {display:block;}

HTML

<div id='tabs'>
  <h2 class="nav-tab-wrapper">
    <a href="#tab1" class="nav-tab tab1">Pages</a>
    <a href="#tab2" class="nav-tab nav-tab-active tab2">Email</a>
    <a href="#tab3" class="nav-tab tab3">Support</a>
  </h2>

  <p id='tab1' class='tab1'>Awesome tab1 stuff</p>
  <p id='tab2' class='tab2'>Tab2 stuff</p>
  <p id='tab3' class='tab3'>Tab3 stuff</p>

</div>

https://jsfiddle.net/hoq0djwc/1/

Hoffe es hilft irgendwo.

4
William

Zuerst danke ich an William.

Zweitens - ich brauchte eine dynamische Version. Und es funktioniert!

Ein Beispiel:

CSS:

p[id^="detailView-"]
{
    display: none;
}

p[id^="detailView-"]:target
{
    display: block;
}

HTML:

<a href="#detailView-1">Show View1</a>
<p id="detailView-1">View1</p>

<a href="#detailView-2">Show View2</a>
<p id="detailView-2">View2</p>
4
lsblsb

Ich habe ein ausgeblendetes Kontrollkästchen verwendet, um einige Nachrichten dauerhaft anzuzeigen. Das Kontrollkästchen kann ausgeblendet sein (Anzeige: keine) oder nicht. Dies ist ein winziger Code, den ich schreiben könnte.

Sie können die Demo auf JSFiddle sehen und testen.

HTML:

<input type=checkbox id="show">
<label for="show">Help?</label>
<span id="content">Do you need some help?</span>

CSS:

#show,#content{display:none;}
#show:checked~#content{display:block;}

Code-Snippet ausführen:

#show,#content{display:none;}
#show:checked~#content{display:block;}
<input id="show" type=checkbox>
<label for="show">Click for Help</label>
<span  id="content">Do you need some help?</span>

http://jsfiddle.net/9s8scbL7/

4
lynx_74

Ich weiß, es ist ein alter Beitrag, aber was ist mit dieser Lösung ( Ich habe ein JSFiddle gemacht, um es zu veranschaulichen ) ... Lösung, die die :after-Pseudoelemente von <span> verwendet, um den <span>-Switch-Link selbst anzuzeigen/auszublenden (zusätzlich zur .alert-Nachricht muss sie ein-/ausblenden). Wenn das Pseudoelement seinen Fokus verliert, wird die Nachricht ausgeblendet. 

Die Ausgangssituation ist eine versteckte Nachricht, die angezeigt wird, wenn der <span> mit dem :after content : "Show Me"; fokussiert ist. Wenn dieser <span> fokussiert ist, wird er :after content leer, während der :after content des zweiten <span> (der anfangs leer war) zu "Hide Me" wechselt. Wenn Sie also auf diesen zweiten <span> klicken, verliert der erste seinen Fokus und die Situation kehrt zu ihrem ursprünglichen Zustand zurück.

Ich begann mit der von @Vector angebotenen Lösung. Ich behielt die DOM-Situation bei ky @Frederic Kizar bei 

HTML:

<span class="span3" tabindex="0"></span>
<span class="span2" tabindex="0"></span>
<p class="alert" >Some message to show here</p>

CSS:

body {
    display: inline-block;
}
.span3 ~ .span2:after{
    content:"";
}
.span3:focus ~ .alert  {
    display:block;
}
.span3:focus ~ .span2:after  {
    content:"Hide Me";
}
.span3:after  {
    content: "Show Me";
}
.span3:focus:after  {
    content: "";
}
.alert  {
    display:none;
}
1
Diepen

Ich habe eine andere einfache Lösung:

HTML:

<a href="#alert" class="span3" tabindex="0">Hide Me</a>
<a href="#" class="span2" tabindex="0">Show Me</a>
<p id="alert" class="alert" >Some alarming information here</p>

CSS:

body { display: block; }
p.alert:target { display: none; }

Quelle: http://css-tricks.com/off-canvas-menu-with-css-target/

1
Miguel Garrido

Eine sehr einfache Lösung von cssportal.com

Wenn Sie [Anzeigen] drücken, wird der Text [Anzeigen] ausgeblendet und umgekehrt.

Dieses Beispiel funktioniert nicht in Chrome, ich weiß nicht warum ...

.show {
	display: none;
}
.hide:focus + .show {
	display: inline;
}
.hide:focus {
	display: none;
}
.hide:focus ~ #list { display:none; }
@media print {
.hide, .show {
	display: none;
}
}
<div><a class="hide" href="#">[hide]</a> <a class="show" href="#">[show]</a>
<ol id="list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
</div>

1
user2422690

Die Antwort unten beinhaltet das Ändern von Text für "show/hide" und verwendet ein einzelnes Kontrollkästchen, zwei Labels, insgesamt vier HTML-Zeilen und fünf CSS-Zeilen. Es beginnt auch mit dem verborgenen Inhalt. 

Versuchen Sie es in JSFiddle

HTML

<input id="display-toggle" type=checkbox>
<label id="display-button" for="display-toggle"><span>Display Content</span></label>
<label id="hide-button" for="display-toggle"><span>Hide Content</span></label>    
<div id="hidden-content"><br />Hidden Content</div>

CSS

label {
  background-color: #ccc;
  color: brown;
  padding: 15px;
  text-decoration: none;
  font-size: 16px;
  border: 2px solid brown;
  border-radius: 5px;
  display: block;
  width: 200px;
  text-align: center;
}

input,
label#hide-button,
#hidden-content {
  display: none;
}

input#display-toggle:checked ~ label#display-button {
  display: none;
}

input#display-toggle:checked ~ label#hide-button {
  display: block;
  background-color: #aaa;
  color: #333
}

input#display-toggle:checked ~ #hidden-content {
  display: block;
} 
0
jeffmcneill