Show Hide Multiple Divs with Jquery

Question

I want to use some buttons to show hide multiple divs using jquery   The page will initially show all divs  The idea then is that there will be a button to reset  show all  and then separate buttons to show a particular div while hiding the rest   Any help would be much appreciated    lt div class  buttons  gt   lt a class  button  id  showall  gt All lt  a gt   lt a class  button  id  showdiv1  gt Div 1 lt  a gt   lt a class  button  id  showdiv2  gt Div 2 lt  a gt   lt a class  button  id  showdiv3  gt Div 3 lt  a gt   lt a class  button  id  showdiv4  gt Div 4 lt  a gt   lt  div gt    lt div id  div1  gt Lorum Ipsum lt  div gt   lt div id  div2  gt Lorum Ipsum lt  div gt   lt div id  div3  gt Lorum Ipsum lt  div gt   lt div id  div4  gt Lorum Ipsum lt  div gt

User · Accepted Answer

x000D   x000D  jQuery function     x000D    jQuery   showall   click function     x000D      jQuery   targetDiv   show    x000D        x000D    jQuery   showSingle   click function     x000D      jQuery   targetDiv   hide    x000D      jQuery   div      this  attr  target    show    x000D        x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   lt div class  buttons  gt  x000D     lt a id  showall  gt All lt  a gt  x000D     lt a class  showSingle  target  1  gt Div 1 lt  a gt  x000D     lt a class  showSingle  target  2  gt Div 2 lt  a gt  x000D     lt a class  showSingle  target  3  gt Div 3 lt  a gt  x000D     lt a class  showSingle  target  4  gt Div 4 lt  a gt  x000D   lt  div gt  x000D   x000D   lt div id  div1  class  targetDiv  gt Lorum Ipsum1 lt  div gt  x000D   lt div id  div2  class  targetDiv  gt Lorum Ipsum2 lt  div gt  x000D   lt div id  div3  class  targetDiv  gt Lorum Ipsum3 lt  div gt  x000D   lt div id  div4  class  targetDiv  gt Lorum Ipsum4 lt  div gt  x000D   x000D   x000D    http   jsfiddle net XwN2L

User · Answer

If you want to be able to show   hide singular divs and   or groups of divs with less code  just apply several classes to them  to insert them into groups if needed   Example     group1     group2     group3      lt div class  group3  gt  lt  div gt   lt div class  group1 group2  gt  lt  div gt   lt div class  group1 group3 group2  gt  lt  div gt    Then you just need to use an identifier to link the action to he target  and with 5 6 lines of jquery code you have everything you need

User · Answer

Just a small side-note    If you are using this with other scripts  the   on the last line will cause a conflict  Just replace it with jQuery and you re good   jQuery function         jQuery   showall   click function               jQuery   targetDiv   show                jQuery   showSingle   click function              jQuery   targetDiv   hide              jQuery   div  jQuery this  attr  target    show                  http   jsfiddle net XwN2L 4764

User · Answer

simple but stupid approach       showall   click function           div id  div    show             showdiv1   click function            div1   show           div id  div    not   div1   show          as for better one - add common class to all div s  and use some attribute in buttons with id of target divs

User · Answer

If they fall into logical groups  I would probably go with the class approach already listed here    Many people seem to forget that you can actually select several items by id in the same jQuery selector  as well       div1   div2   div3   show      Where  div1    div2   and  div3  are all id attributes on various divs you want to show at once

User · Answer

I had this same problem  read this post  but ended building this solution that selects the divs dynamically by fetching the ID from a custom class on the href using JQuery s attr   function   Here s the JQuery      a custom class   click function e      var div     this  attr  href        div  toggle  fast      e preventDefault        And you just have to create a link like this then in the HTML    lt a href     class   1  gt Link Text lt  a gt   lt div id  1  gt Div Content lt  div gt

User · Answer

Assign each div a class  Then you can perform actions on all of them       divClass   hide      So each button can do       divClass   hide       specificDiv   show      You can make this more generic  and use the obvious convention - the button and the div with the same number in the id are related  So       button   click function       var divId     div      this  attr  id   replace  showdiv              divClass   hide         divId  show

User · Answer

Check This Example  Html    lt div class  buttons  gt   lt a class  button  id  showall  gt All lt  a gt   lt a class  button  id  showdiv1  gt Div 1 lt  a gt   lt a class  button  id  showdiv2  gt Div 2 lt  a gt   lt a class  button  id  showdiv3  gt Div 3 lt  a gt   lt a class  button  id  showdiv4  gt Div 4 lt  a gt   lt  div gt    lt div id  div1  gt 1 lt  div gt   lt div id  div2  gt 2 lt  div gt   lt div id  div3  gt 3 lt  div gt   lt div id  div4  gt 4 lt  div gt    Javascript       showall   click function           div   show             showdiv1   click function           div id  div    hide            div1   show            showdiv2   click function           div id  div    hide            div2   show             showdiv3   click function           div id  div    hide            div3   show             showdiv4   click function           div id  div    hide            div4   show

[jquery] Show/Hide Multiple Divs with Jquery

Examples related to jquery