Pure CSS collapse expand div

Question

I have a pure CSS collapsable div which is based on someone else s code who uses the  target psuedoclass  What I am trying to set up is a page with 12  questions  and when you click on the   button the answer div expands beneath  I cannot figure out how to make multiple collapsing div elements on this page without writing a ton of extra CSS  Anyone have suggestions on how to write this so my CSS code is minimized   i e   so i dont have to input a bunch of unique selectors for each of the 12  questions    I cannot use Javascript since this is going on a wordpress com site which does not allow JS   Here is my jfiddle  http   jsfiddle net dmarvs 94ukA 4    lt div class  FAQ  gt       lt a href   hide1  class  hide  id  hide1  gt   lt  a gt       lt a href   show1  class  show  id  show1  gt - lt  a gt       lt div class  question  gt  Question Question Question Question Question Question Question Question Question Question Question   lt  div gt           lt div class  list  gt               lt p gt Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer  lt  p gt           lt  div gt   lt  div gt         source  http   www ehow com how 12214447 make-collapsing-lists-java html      FAQ        vertical-align  top       height auto  important      list       display none       height auto      margin 0      float  left     show       display  none      hide target    show       display  inline      hide target       display  none      hide target    list       display inline        style the     and  -      hide   show       width  30px      height  30px      border-radius  30px      font-size  20px      color   fff      text-shadow  0 1px 0  666      text-align  center      text-decoration  none      box-shadow  1px 1px 2px  000      background   cccbbb      opacity   95      margin-right  0      float  left      margin-bottom  25px      hide hover   show hover       color   eee      text-shadow  0 0 1px  666      text-decoration  none      box-shadow  0 0 4px  222 inset      opacity  1      margin-bottom  25px      list p      height auto      margin 0     question       float  left      height  auto      width  90       line-height  20px      padding-left  20px      margin-bottom  25px      font-style  italic

User · Answer

Using  lt summary gt  and  lt details gt   Using  lt summary gt  and  lt details gt  elements is the simplest but see browser support as current IE is not supporting it  You can polyfill though  most are jQuery-based   Do note that unsupported browser will simply show the expanded version of course  so that may be acceptable in some cases    x000D   x000D     Optional styling    x000D  summary  -webkit-details-marker   x000D    color  blue  x000D    x000D  summary focus   x000D    outline-style  none  x000D    x000D   lt details gt  x000D     lt summary gt Summary  caption  or legend for the content lt  summary gt  x000D    Content goes here  x000D   lt  details gt  x000D   x000D   x000D    See also how to style the  lt details gt  element  HTML5 Doctor   little bit tricky    Pure CSS3  The  target selector has a pretty good browser support  and it can be used to make a single collapsible element within the frame    x000D   x000D   details  x000D   show  x000D   hide target   x000D    display  none  x000D    x000D   hide target    show  x000D   hide target    details   x000D    display  block  x000D    x000D   lt div gt  x000D     lt a id  hide1  href   hide1  class  hide  gt   Summary goes here lt  a gt  x000D     lt a id  show1  href   show1  class  show  gt - Summary goes here lt  a gt  x000D     lt div class  details  gt  x000D      Content goes here  x000D     lt  div gt  x000D   lt  div gt  x000D   lt div gt  x000D     lt a id  hide2  href   hide2  class  hide  gt   Summary goes here lt  a gt  x000D     lt a id  show2  href   show2  class  show  gt - Summary goes here lt  a gt  x000D     lt div class  details  gt  x000D      Content goes here  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You just need to iterate the anchors in the two links     lt a href   hide2  class  hide  id  hide2  gt   lt  a gt   lt a href   show2  class  show  id  show2  gt - lt  a gt    See this jsfiddle http   jsfiddle net eJX8z   I also added some margin to the FAQ call to improve the format

User · Answer

gbtimmon s answer is great  but way  way too complicated  I ve simplified his code as much as I could   x000D   x000D   answer   show   hide target       display  none       hide target    show   hide target    answer       display  inherit     x000D   lt a href   hide  id  hide  gt Show lt  a gt   lt a href      id  show  gt Hide lt  a gt   lt div id  answer  gt  lt p gt Answer lt  p gt  lt  div gt  x000D   x000D   x000D

User · Answer

Or a super simple version with barely any css      lt style gt      faq ul li       display block      float left      padding 5px      faq ul li div       display none      faq ul li div target       display block       lt  style gt     lt div class  faq  gt      lt ul gt      lt li gt  lt a href   question1  gt Question 1 lt  a gt         lt div id  question1  gt Answer 1  lt  div gt      lt  li gt        lt li gt  lt a href   question2  gt Question 2 lt  a gt      lt div id  question2  gt Answer 2  lt  div gt      lt  li gt      lt li gt  lt a href   question3  gt Question 3 lt  a gt      lt div id  question3  gt Answer 3  lt  div gt      lt  li gt      lt li gt  lt a href   question4  gt Question 4 lt  a gt      lt div id  question4  gt Answer 4  lt  div gt      lt  li gt      lt li gt  lt a href   question5  gt Question 5 lt  a gt      lt div id  question5  gt Answer 5  lt  div gt      lt  li gt      lt li gt  lt a href   question6  gt Question 6 lt  a gt      lt div id  question6  gt Answer 6  lt  div gt      lt  li gt      lt  ul gt     lt  div gt    http   jsfiddle net ionko22 4sKD3

User · Answer

Depending on what browsers devices you are looking to support  or what you are prepared to put up with for non-compliant browsers you may want to check out the  lt summary gt  and  lt detail gt  tags   They are for exactly this purpose   No css is required at all as the collapsing and showing are part of the tags definition formatting   I ve made an example here    lt details gt   lt summary gt This is what you want to show before expanding lt  summary gt   lt p gt This is where you put the details that are shown once expanded lt  p gt   lt  details gt    Browser support varies  Try in webkit for best results  Other browsers may default to showing all the solutions   You can perhaps fallback to the hide show method described above

[css] Pure CSS collapse/expand div

Using `<summary>` and `<details>`

Pure CSS3

Examples related to css

Examples related to collapsable

[css] Pure CSS collapse/expand div

Using <summary> and <details>

Pure CSS3

Examples related to css

Examples related to collapsable

Using `<summary>` and `<details>`