Show hide div on click with CSS

Question

I have a menu and three hidden divs that show up depending on what option the user selects  I would like to show   hide them on click using only CSS   I have it working with jquery right now but I want it to be accessible with js disabled   Somebody here provided this code for someone else but it only works with div hover or div active  when I change it to div visited it doesn t work   Would I need to add something or perhaps this isn t the right way to do it   I appreciate any help     The thing is my client wants this particular divs to slide fade when the menu is selected  but I still want them to display correctly with javascript turned off   Maybe z-index could do the trick

User · Answer

You could do this with the CSS3  target selector   menu hover block       visibility  visible     block target       visibility hidden

User · Answer

CSS does not have an onlclick event handler   You have to use Javascript   See more info here on CSS Pseudo-classes  http   www w3schools com css css pseudo classes asp  a link  color  FF0000         unvisited link - link is untouched    a visited  color  00FF00      visited link - user has already been to this page    a hover  color  FF00FF        mouse over link - user is hovering over the link with the mouse or has selected it with the keyboard    a active  color  0000FF       selected link - the user has clicked the link and the browser is loading the new page

User · Answer

if  focus  works for you  i e  stay visible while element has focus after click  then see this existing SO answer   Hide Show content-list with only CSS  no javascript used

User · Answer

This can be achieved by attaching a  tabindex  to an element  This will make that element  clickable   You can then use  focus to select your hidden div as follows      x000D   x000D   clicker   x000D  width 100px  x000D  height 100px  x000D  background-color blue  x000D  outline none  x000D  cursor pointer  x000D    x000D   x000D   hiddendiv  x000D  display none  x000D  height 200px  x000D  background-color green  x000D    x000D   x000D   clicker focus    hiddendiv  x000D  display block  x000D    x000D   lt html gt  x000D   lt head gt  x000D   lt  head gt  x000D   lt body gt  x000D   x000D   lt div gt  x000D   lt div class  clicker  tabindex  1  gt Click me lt  div gt  x000D   lt div class  hiddendiv  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D    The   selector will select the nearest element AFTER the  clicker  div  You can use other selectors but I believe there is no current way to select an element that is not a sibling or child

User · Answer

You re going to have to either use JS or write a function method in whatever non-markup language you re using to do this   For instance you could write something that will save the status to a cookie or session variable then check for it on page load   If you want to do it without reloading the page then JS is going to be your only option

User · Answer

For a CSS-only solution  try using the checkbox hack  Basically  the idea is to use a checkbox and assign different styles based on whether the box is checked or not used the  checked pseudo selector  The checkbox can be hidden  if need be  by attaching it to a label   link to dabblet  not mine   http   dabblet com gist 1506530  link to CSS Tricks article  http   css-tricks com the-checkbox-hack

User · Answer

Fiddle to your heart s content  HTML   lt div gt   lt a tabindex  1  class  testA  gt Test A lt  a gt     lt a tabindex  2  class  testB  gt Test B lt  a gt   lt div class  hiddendiv  id  testA  gt 1 lt  div gt   lt div class  hiddendiv  id  testB  gt 2 lt  div gt   lt  div gt    CSS   hiddendiv  display  none     testA focus    testA  display  block     testB focus    testB  display  block      Benefits  You can put your menu links horizontally   one after the other in HTML code  and then you can put all the content one after another in the HTML code  after the menu   In other words - other solutions offer an accordion approach where you click a link and the content appears immediately after the link  The next link then appears after that content    With this approach you don t get the accordion effect  Rather  all links remain in a fixed position and clicking any link simply updates the displayed content  There is also no limitation on content height   How it works  In your HTML  you first have a DIV  Everything else sits inside this DIV  This is important - it means every element in your solution  in this case  A for links  and DIV for content   is a sibling to every other element   Secondly  the anchor tags  A  have a tabindex property  This makes them clickable and therefore they can get focus  We need that for the CSS to work  These could equally be DIVs but I like using A for links - and they ll be styled like my other anchors   Third  each menu item has a unique class name  This is so that in the CSS we can identify each menu item individually   Fourth  every content item is a DIV  and has the class  hiddendiv   However each each content item has a unique id   In your CSS  we set all  hiddendiv elements to display none  - that is  we hide them all   Secondly  for each menu item we have a line of CSS  This means if you add more menu items  ie  and more hidden content   you will have to update your CSS  yes   Third  the CSS is saying that when  testA gets focus   testA focus  then the corresponding DIV  identified by ID   testA  should be displayed   Last  when I just said  the corresponding DIV   the trick here is the tilde character     - this selector will select a sibling element  and it does not have to be the very next element  that matches the selector which  in this case  is the unique ID value   testA    It is this tilde that makes this solution different than others offered and this lets you simply update some  display panel  with different content  based on clicking one of those links  and you are not as constrained when it comes to where how you organise your HTML  All you need  though  is to ensure your hidden DIVs are contained within the same parent element as your clickable links    Season to taste

User · Answer

Although a bit unstandard  a possible solution is to contain the content you want to show hide inside the  lt a gt  so it can be reachable through CSS   http   jsfiddle net Jdrdh 2    x000D   x000D  a  hidden   x000D    visibility  hidden  x000D    x000D   x000D  a visited  hidden   x000D    visibility  visible  x000D    x000D   lt div id  container  gt  x000D     lt a href     gt  x000D          A x000D           lt div class  hidden  gt hidden content lt  div gt  x000D       lt  a gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You can find  lt div gt  by id  look at it s style display property and toggle it from none to block and vice versa    x000D   x000D  function showDiv Div    x000D      var x   document getElementById Div   x000D      if x style display   none     x000D          x style display    block   x000D        else   x000D          x style display    none   x000D        x000D    x000D   lt div id  welcomeDiv  style  display none   class  answer list  gt WELCOME lt  div gt  x000D   lt input type  button  name  answer  value  Show Div  onclick  showDiv  welcomeDiv      gt  x000D   x000D   x000D

User · Answer

A little hack-ish but it works  Note that the label tag can be placed any where  The key parts are    The css input checked div selects the div immediately next to after the input The label for said checkbox  or hey leave out the label and just have the checkbox  display none hides stuff   Code    lt head gt       lt style gt           sidebar  height 100   background blue  width 200px  clear none  float left            content  height 100   background green  width 400px  clear none  float left           label  background yellow float left           input display none           input checked  sidebar display none        lt  style gt   lt  head gt   lt body gt   lt div gt   lt label for  hider  gt Hide lt  label gt   lt input type  checkbox  id  hider  gt   lt div id  sidebar  gt foo lt  div gt    lt div id  content  gt hello lt  div gt    lt  div gt   lt  body gt    EDIT  Sorry could have read the question better   One could also use css3 elements to create the slide fade effect  I am not familiar enough with them to be much help with that aspect but they do exist  Browser support is iffy though    You could combine the above effect with javascript to use fancy transitions and still have a fall back  jquery has a css method to override the above and slide and fade for transitions    Tilda    mean some sibling after  not next sibling like plus      key  value   is an attribute selector  Radio buttons must have same name   To string tabs together one could use    lt html gt   lt head gt   lt style gt  input value  1   checked   div id  1    display none    input value  2   checked   div id  2    display none     lt  style gt   lt  head gt   lt body gt   lt input type  radio  name  hider  value  1  gt   lt input type  radio  name  hider  value  2  gt   lt div id  1  gt div 1 lt  div gt   lt div id  2  gt div 2 lt  div gt   lt  body gt   lt  html gt

User · Answer

HTML  lt input type  quot text quot  value  quot CLICK TO SHOW CONTENT quot  gt   lt div id  quot content quot  gt  and the content will show   lt  div gt   CSS  x000D   x000D   content     display  none    input type  text        color  transparent      text-shadow  0 0 0  000      padding  6px 12px      width  150px      cursor  pointer    input type  text   focus      outline  none    input focus   div content     display  block    x000D   lt input type  text  value  CLICK TO SHOW CONTENT  gt   lt div id  content  gt  and the content will show   lt  div gt  x000D   x000D   x000D

[css] Show / hide div on click with CSS

Examples related to css