Hide Show content-list with only CSS, no javascript used

Question

Welcome To Ask or Share your Answers For Others

Hide Show content-list with only CSS, no javascript used

posted Oct 7, 2021 in Technique[技术] by 深蓝 (71.8m points)

Hide Show content-list with only CSS, no javascript used

I've been searching for a good trick to make a Hide/Show content or a list with only CSS and no javascript. I've managed to make this action:

<!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 here: http://jsfiddle.net/6W7XD/ And it's working but not as it should. Here is the problem: When the content is shown, you can hide it by clicking "anywhere on the page". How to disable that? how to hide content "only" by clicking hide? Thank you in advance!

question from:https://stackoverflow.com/questions/17731457/hide-show-content-list-with-only-css-no-javascript-used

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-06T17:30:07+0000

I wouldn't use checkboxes, i'd use the code you already have

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>

This way the text is only hidden on click of the hide element

Categories

Hide Show content-list with only CSS, no javascript used

Hide Show content-list with only CSS, no javascript used

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags