Show hide divs on click in HTML and CSS without jQuery

Question

I want something very similar to Theming collapsible headers located here   http   jquerymobile com demos 1 2 0-alpha 1 docs content content-collapsible html  Without using JQuery  is this possible   It s for a mobile site but the page is always going to be offline so I dont really want to use jquery  Also giving custom styling to jquery mobile is alot harder than using pure css and styling it yourself

User · Answer

I like Roko s answer  and added a few lines to it so that you get a triangle that points right when the element is hidden  and down when it is displayed    collapse   font-weight  bold  display  inline-block     collapse   input after   content     25b6   display  inline-block     collapse   input checked after   content     25bc   display  inline-block     collapse   input   display  inline-block  -webkit-appearance  none  -o-appearance none  -moz-appearance none      collapse   input       display  none     collapse   input checked       display  block

User · Answer

Using display none is not SEO-friendly  The following way allows the hidden content to be searchable  Adding the transition-delay ensures any links included in the hidden content is clickable   collapse  gt  p  cursor  pointer  display  block      collapse focus  outline  none      collapse  gt  div   height  0  width  0  overflow  hidden  transition-delay  0 3s      collapse focus div  display  block   height  100   width  100   overflow  auto      lt div class  quot collapse quot  tabindex  quot 1 quot  gt   lt p gt Question 1 lt  p gt   lt div gt     lt p gt Visit  lt a href  quot https   stackoverflow com  quot  gt Stack Overflow lt  a gt  lt  p gt   lt  div gt   lt  div gt   lt div class  quot collapse quot  tabindex  quot 2 quot  gt   lt p gt Question 2 lt  p gt   lt div gt     lt p gt Visit  lt a href  quot https   stackoverflow com  quot  gt Stack Overflow lt  a gt  lt  p gt   lt  div gt   lt  div gt

User · Answer

You can use a checkbox to simulate onClick with CSS   input type checkbox  checked   p       display  none      JSFiddle  Adjacent sibling selectors

User · Answer

Using label and checkbox input  Keeps the selected item opened and togglable    x000D   x000D   collapse  x000D    cursor  pointer  x000D    display  block  x000D    background   cdf  x000D    x000D   collapse   input  x000D    display  none     hide the checkboxes    x000D    x000D   collapse   input   div  x000D    display none  x000D    x000D   collapse   input checked   div  x000D    display block  x000D    x000D   lt label class  collapse  for   1  gt Collapse 1 lt  label gt  x000D   lt input id   1  type  checkbox  gt   x000D   lt div gt Content 1 lt  div gt  x000D   x000D   lt label class  collapse  for   2  gt Collapse 2 lt  label gt  x000D   lt input id   2  type  checkbox  gt  x000D   lt div gt Content 2 lt  div gt  x000D   x000D   x000D    Using label and named radio input  Similar to checkboxes  it just closes the already opened one  Use name  c1  type  radio  on both inputs    x000D   x000D   collapse  x000D    cursor  pointer  x000D    display  block  x000D    background   cdf  x000D    x000D   collapse   input  x000D    display  none     hide the checkboxes    x000D    x000D   collapse   input   div  x000D    display none  x000D    x000D   collapse   input checked   div  x000D    display block  x000D    x000D   lt label class  collapse  for   1  gt Collapse 1 lt  label gt  x000D   lt input id   1  type  radio  name  c1  gt   x000D   lt div gt Content 1 lt  div gt  x000D   x000D   lt label class  collapse  for   2  gt Collapse 2 lt  label gt  x000D   lt input id   2  type  radio  name  c1  gt  x000D   lt div gt Content 2 lt  div gt  x000D   x000D   x000D    Using tabindex and  focus  Similar to radio inputs  additionally you can trigger the states using the Tab key  Clicking outside of the accordion will close all opened items    x000D   x000D   collapse  gt  a  x000D    background   cdf  x000D    cursor  pointer  x000D    display  block  x000D    x000D   collapse focus  x000D    outline  none  x000D    x000D   collapse  gt  div  x000D    display  none  x000D    x000D   collapse focus div  x000D    display  block   x000D    x000D   lt div class  collapse  tabindex  1  gt  x000D     lt a gt Collapse 1 lt  a gt  x000D     lt div gt Content 1     lt  div gt  x000D   lt  div gt  x000D   x000D   lt div class  collapse  tabindex  1  gt  x000D     lt a gt Collapse 2 lt  a gt  x000D     lt div gt Content 2     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Using  target  Similar to using radio input  you can additionally use Tab and   9166  keys to operate   x000D   x000D   collapse a  x000D    display  block  x000D    background   cdf  x000D    x000D   collapse  gt  div  x000D    display none  x000D    x000D   collapse  gt  div target  x000D    display block   x000D    x000D   lt div class  collapse  gt  x000D     lt a href   targ 1  gt Collapse 1 lt  a gt  x000D     lt div id  targ 1  gt Content 1     lt  div gt  x000D   lt  div gt  x000D   x000D   lt div class  collapse  gt  x000D     lt a href   targ 2  gt Collapse 2 lt  a gt  x000D     lt div id  targ 2  gt Content 2     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Using  lt detail gt  and  lt summary gt  tags  pure HTML   You can use HTML5 s detail and summary tags to solve this problem without any CSS styling or Javascript  Please note that these tags are not supported by Internet Explorer     x000D   x000D   lt details gt  x000D     lt summary gt Collapse 1 lt  summary gt  x000D     lt p gt Content 1    lt  p gt  x000D   lt  details gt  x000D   lt details gt  x000D     lt summary gt Collapse 2 lt  summary gt  x000D     lt p gt Content 2    lt  p gt  x000D   lt  details gt  x000D   x000D   x000D

User · Answer

Of course  jQuery is just a library that utilizes javascript after all   You can use document getElementById to get the element in question  then change its height accordingly  through element style height   elementToChange   document getElementById  collapseableEl    elementToChange style height    100      Wrap that up in a neat little function that caters for toggling back and forth and you have yourself a solution

[javascript] Show hide divs on click in HTML and CSS without jQuery

Examples related to javascript

Examples related to html

Examples related to css