Hide Show content-list with only CSS no javascript used

Question

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    lt  DOCTYPE html gt   lt head gt       lt style gt         cont  display  none           show focus    hide  display  inline           show focus    hide    cont  display  block       lt  style gt    lt  head gt   lt body gt       lt div gt           lt a href   show class  show  gt  Show  lt  a gt           lt a href   hide class  hide  gt    Hide  lt  a gt           lt div id  cont  gt Content lt  div gt      lt  div gt    lt  body gt   lt  html gt    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

User · Answer

The answer below includes changing text for "show/hide", and uses a single checkbox, two labels, a total of four lines of html and five lines of css. It also starts out with the content hidden.

Try it 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;
}

User · Answer

Nowadays  2020  you can do this with pure HTML5 and you don t need JavaScript or CSS3    lt details gt   lt summary gt Put your summary here lt  summary gt   lt p gt Put your content here  lt  p gt   lt  details gt

User · Answer

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   lt span class  span3  gt Hide Me lt  span gt   lt span class  span2  gt Show Me lt  span gt   lt p class  alert   gt Some alarming information here lt  p gt    This way the text is only hidden on click of the hide element

User · Answer

Just wanted to illustrate  in the context of nested lists  the usefulness of the hidden checkbox  lt input gt  approach  jeffmcneill recommends     a context where each shown hidden element should hold its state independently of focus and the show hide state of other elements on the page   Giving values with a common set of beginning characters to the id attributes of all the checkboxes used for the shown hidden elements on the page lets you use an economical  id      selector scheme for the stylesheet rules that toggle your clickable element   s appearance and the related shown hidden element   s display state back and forth  Here  my ids are    expanded-1        expanded-2        expanded-3      Note that I   ve also used  Diepen   s  after selector idea in order to keep the  lt label gt  element free of content in the html   Note also that the  lt input gt   lt label gt   lt div class  collapsible  gt  sequence matters  and the corresponding CSS with   selector instead of     jsfiddle here   x000D   x000D   collapse-below   x000D      display  inline  x000D    x000D   x000D  p collapse-below  after   x000D      content    000A0 000A0   x000D    x000D   x000D  p collapse-below   label   x000D      display  inline  x000D    x000D   x000D  p collapse-below   label hover   x000D      color   ccc  x000D    x000D   x000D  input collapse-below  x000D  ul collapsible   x000D      display  none  x000D    x000D   x000D  input id   expanded   checked   label  after   x000D      content    025BE   x000D    x000D   x000D  input id   expanded   not  checked    label  after   x000D      content    025B8   x000D    x000D   x000D  input id   expanded   checked   label   ul collapsible   x000D      display  block  x000D    x000D   x000D  input id   expanded   not  checked    label   ul collapsible   x000D      display  none  x000D    x000D   lt ul gt  x000D     lt li gt single item a lt  li gt  x000D     lt li gt single item b lt  li gt  x000D     lt li gt  x000D       lt p class  collapse-below  title  this expands  gt multiple item a lt  p gt  x000D       lt input type  checkbox  id  expanded-1  class  collapse-below  name  toggle  gt  x000D       lt label for  expanded-1  title  click to expand  gt  lt  label gt  x000D       lt ul class  collapsible  gt  x000D         lt li gt sub item a 1 lt  li gt  x000D         lt li gt sub item a 2 lt  li gt  x000D       lt  ul gt  x000D     lt  li gt  x000D     lt li gt single item c lt  li gt  x000D     lt li gt  x000D       lt p class  collapse-below  title  this expands  gt multiple item b lt  p gt  x000D       lt input type  checkbox  id  expanded-2  class  collapse-below  name  toggle  gt  x000D       lt label for  expanded-2  title  click to expand  gt  lt  label gt  x000D       lt ul class  collapsible  gt  x000D         lt li gt sub item b 1 lt  li gt  x000D         lt li gt sub item b 2 lt  li gt  x000D       lt  ul gt  x000D     lt  li gt  x000D     lt li gt single item d lt  li gt  x000D     lt li gt single item e lt  li gt  x000D     lt li gt  x000D       lt p class  collapse-below  title  this expands  gt multiple item c lt  p gt  x000D       lt input type  checkbox  id  expanded-3  class  collapse-below  name  toggle  gt  x000D       lt label for  expanded-3  title  click to expand  gt  lt  label gt  x000D       lt ul class  collapsible  gt  x000D         lt li gt sub item c 1 lt  li gt  x000D         lt li gt sub item c 2 lt  li gt  x000D       lt  ul gt  x000D     lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

I know it s an old post but what about this solution  I ve made a JSFiddle to illustrate it     Solution that uses the  after pseudo elements of  lt span gt  to show hide the  lt span gt  switch link itself  in addition to the  alert message it must show hide   When the pseudo element loses it s focus  the message is hidden    The initial situation is a hidden message that appears when the  lt span gt  with the  after content    Show Me   is focused   When this  lt span gt  is focused  it s  after content becomes empty while the  after content of the second  lt span gt   that was initially empty  turns to  Hide Me   So  when you click this second  lt span gt  the first one loses it s focus and the situation comes back to it s initial state   I started on the solution offered by  Vector  I kept the DOM situation presented ky  Frederic Kizar   HTML    lt span class  span3  tabindex  0  gt  lt  span gt   lt span class  span2  tabindex  0  gt  lt  span gt   lt p class  alert   gt Some message to show here lt  p gt    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

User · Answer

There is 3 rapid examples with pure CSS and without javascript where the content appears  on click   with a  maintained click  and a third  onhover   all only tested in Chrome   Sorry for the up of this post but this question are the first seo result and maybe my contribution can help beginner like me  I think  not tested  but the advantage of argument  content  that you can add great icon like from Font Awesome  its  f-Code  or an hexadecimal icon in place of the text  Hide  and  Show  to internationalize the trick   example link http   jsfiddle net MonkeyTime h3E9p 2    lt style gt  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     lt  style gt   lt input type  radio  id  show  name  group  gt      lt input type  radio  id  hide  name  group  checked gt   lt label for  hide  class  hide  gt  lt  label gt   lt label for  show  class  show  gt  lt  label gt   lt span id  content  gt Lorem iupsum dolor si amet lt  span gt     lt style gt   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     lt  style gt    lt div id  show1  class  show1  gt  lt  div gt   lt span id  content1  gt Ipsum Lorem lt  span gt     lt style gt   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     lt  style gt    lt div id  show2  class  show2  gt  lt  div gt   lt span id  content2  gt Lorem Ipsum lt  span gt

User · Answer

A very easy solution from cssportal com  If pressed  show   the text  show  will be hidden and other way around      This example does not work in Chrome  I don t why       x000D   x000D   show   x000D   display  none  x000D    x000D   hide focus    show   x000D   display  inline  x000D    x000D   hide focus   x000D   display  none  x000D    x000D   hide focus    list   display none    x000D   media print   x000D   hide   show   x000D   display  none  x000D    x000D    x000D   lt div gt  lt a class  hide  href     gt  hide  lt  a gt   lt a class  show  href     gt  show  lt  a gt  x000D   lt ol id  list  gt  x000D   lt li gt item 1 lt  li gt  x000D   lt li gt item 2 lt  li gt  x000D   lt li gt item 3 lt  li gt  x000D   lt  ol gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I used a hidden checkbox to persistent view of some message  The checkbox could be hidden  display none  or not  This is a tiny code that I could write   You can see and test the demo on JSFiddle  HTML    lt input type checkbox id  show  gt   lt label for  show  gt Help  lt  label gt   lt span id  content  gt Do you need some help  lt  span gt    CSS    show  content display none    show checked  content display block     Run code snippet    x000D   x000D   show  content display none   x000D   show checked  content display block   x000D   lt input id  show  type checkbox gt  x000D   lt label for  show  gt Click for Help lt  label gt  x000D   lt span  id  content  gt Do you need some help  lt  span gt  x000D   x000D   x000D    http   jsfiddle net 9s8scbL7

User · Answer

This is what I ve used recently   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   lt div id  tabs  gt     lt h2 class  nav-tab-wrapper  gt       lt a href   tab1  class  nav-tab tab1  gt Pages lt  a gt       lt a href   tab2  class  nav-tab nav-tab-active tab2  gt Email lt  a gt       lt a href   tab3  class  nav-tab tab3  gt Support lt  a gt     lt  h2 gt      lt p id  tab1  class  tab1  gt Awesome tab1 stuff lt  p gt     lt p id  tab2  class  tab2  gt Tab2 stuff lt  p gt     lt p id  tab3  class  tab3  gt Tab3 stuff lt  p gt    lt  div gt    https   jsfiddle net hoq0djwc 1   Hope it helps somewhere

User · Answer

I ve got another simple solution   HTML    lt a href   alert  class  span3  tabindex  0  gt Hide Me lt  a gt   lt a href     class  span2  tabindex  0  gt Show Me lt  a gt   lt p id  alert  class  alert   gt Some alarming information here lt  p gt    CSS   body   display  block    p alert target   display  none      Source  http   css-tricks com off-canvas-menu-with-css-target

User · Answer

First  thanks to William   Second - i needed a dynamic version  And it works   An example   CSS   p id   detailView-         display  none     p id   detailView-   target       display  block      HTML    lt a href   detailView-1  gt Show View1 lt  a gt   lt p id  detailView-1  gt View1 lt  p gt    lt a href   detailView-2  gt Show View2 lt  a gt   lt p id  detailView-2  gt View2 lt  p gt

User · Answer

This is going to blow your mind  Hidden radio buttons    x000D   x000D  input show  input hide   x000D      display none  x000D    x000D   x000D  span content   x000D      display none  x000D    x000D  input show checked   span content   x000D    display block  x000D    x000D   x000D  input hide checked   span content   x000D      display none  x000D    x000D   lt label for  show  gt  x000D       lt span gt  Show  lt  span gt  x000D   lt  label gt  x000D   lt input type radio id  show  name  group  gt  x000D   lt label for  hide  gt  x000D       lt span gt  Hide  lt  span gt   x000D   lt  label gt      x000D   lt input type radio id  hide  name  group  gt  x000D   lt span id  content  gt Content lt  span gt  x000D   x000D   x000D

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

Examples related to list

Examples related to css

Examples related to hide

Examples related to show