jQuery hide and show toggle div with plus and minus icon

Question

I have the code working for the show and hide the div  How would I add two different icons as a sprite image for when the show and hide are active   For example    icon for show me  then a - icon for hide me   Here is the code  I have   http   jsfiddle net BLkpG     document  ready function           slidingDiv   hide           show hide   show             show hide   click function            slidingDiv   slideToggle                Need to change image to the above when toggled to a   or -   Thanks

User · Accepted Answer

Try something like this  jQuery      toggle icon   toggle function              toggle icon   text  -            toggle text   slideToggle        function              toggle icon   text               toggle text   slideToggle           HTML   lt a href     id  toggle icon  gt   lt  a gt    lt div id  toggle text  style  display  none  gt      Lorem Ipsum is simply dummy text of the printing and typesetting industry  Lorem Ipsum has been the industry s standard dummy text ever since the 1500s  lt  div gt    DEMO

User · Answer

this works   http   jsfiddle net UhEut   CSS    show hide       display none     plus after       content          minus after       content   -       jQuery     document  ready function          slidingDiv   hide          show hide   addClass  plus   show          show hide   toggle        function                  slidingDiv   slideDown                this  addClass  minus                this  removeClass  plus                   function                  slidingDiv   slideUp                this  addClass  plus                this  removeClass  minus                       HTML    lt a href     class  show hide  gt Show hide lt  a gt    lt div class  slidingDiv  style  display  block   gt  Check out the updated jQuery plugin for doing this   lt a href  http   papermashup com jquery-show-hide-plugin   class  show hide  target   blank  style  display  inline   gt jQuery Show   Hide Plugin lt  a gt   lt  div gt    in the CSS  instead of content       You can put an background-image  with background-position right center  and background-repeat no-repeat and maybe making the  show hide displayed as block and give him a width  so that the bg-image is not overlayed by the link-text itself

User · Answer

Here is an example of how to do it with an arrow instead of a   and -  This uses jQuery to change classes on the element  and CSS to style the arrow    x000D   x000D      toggleHide   click function     x000D        elementToHide   slideToggle  fast    x000D      this  find  i   toggleClass  down up    x000D      x000D  i   x000D    border  solid black  x000D    border-width  0 5px 5px 0  x000D    display  inline-block  x000D    padding  5px  x000D    -webkit-transition-duration  1s  x000D       Safari    x000D    transition-duration  1s  x000D    x000D   x000D   up   x000D    transform  rotate -135deg   x000D    -webkit-transform  rotate -135deg   x000D    x000D   x000D   down   x000D    transform  rotate 45deg   x000D    -webkit-transform  rotate 45deg   x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt h3 class  toggleHide  gt  lt i class  down  gt  lt  i gt  lt  h3 gt  x000D   lt aside class  elementToHide  gt  x000D    Content to hide x000D   lt  aside gt  x000D   x000D   x000D

User · Answer

Here is a quick edit of Enve s answer  I do like roXor s solution  but background images are not necessary  And everbody seems to forgot a preventDefault as well    x000D   x000D    document  ready function     x000D        slidingDiv   hide    x000D   x000D        show hide   click function e    x000D          slidingDiv   slideToggle  fast    x000D      var val     this  text       -           -   x000D        this  hide   text val  fadeIn  fast    x000D      e preventDefault    x000D        x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt a href     class  show hide  gt   lt  a gt  x000D   x000D   lt div class  slidingDiv  gt  x000D     lt p gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  Integer nec odio  Praesent libero  Sed cursus ante dapibus diam  Sed nisi  Nulla quis sem at nibh elementum imperdiet  Duis sagittis ipsum  Praesent mauris  Fusce nec tellus sed augue semper porta  x000D      Mauris massa  Vestibulum lacinia arcu eget nulla   lt  p gt  x000D   x000D     lt p gt Class aptent taciti sociosqu ad litora torquent per conubia nostra  per inceptos himenaeos  Curabitur sodales ligula in libero  Sed dignissim lacinia nunc  Curabitur tortor  Pellentesque nibh  Aenean quam  In scelerisque sem at dolor  Maecenas mattis  x000D      Sed convallis tristique sem  Proin ut ligula vel nunc egestas porttitor  Morbi lectus risus  iaculis vel  suscipit quis  luctus non  massa  Fusce ac turpis quis ligula lacinia aliquet  Mauris ipsum   lt  p gt  x000D   x000D   lt  div gt  x000D   x000D   x000D

User · Answer

HTML    lt div class  Settings  id  GTSettings  gt     lt h3 class  SettingsTitle  gt  lt a class  toggle   gt  lt img src    appThemePath  images toggle-collapse-light gif  alt      gt  lt  a gt General Theme Settings lt  h3 gt     lt div class  options  gt       lt table gt         lt tr gt           lt td gt             lt h4 gt Back-Ground Color lt  h4 gt           lt  td gt           lt td gt             lt input type  text  id  body-backGroundColor  class  themeselector  readonly  readonly  gt           lt  td gt         lt  tr gt         lt tr gt           lt td gt             lt h4 gt Text Color lt  h4 gt           lt  td gt           lt td gt             lt input type  text  id  body-fontColor  class  themeselector  readonly  readonly  gt           lt  td gt         lt  tr gt       lt  table gt     lt  div gt   lt  div gt    lt div class  Settings  id  GTSettings  gt     lt h3 class  SettingsTitle  gt  lt a class  toggle   gt  lt img src    appThemePath  images toggle-collapse-light gif  alt      gt  lt  a gt Content Theme Settings lt  h3 gt     lt div class  options  gt       lt table gt         lt tr gt           lt td gt             lt h4 gt Back-Ground Color lt  h4 gt           lt  td gt           lt td gt             lt input type  text  id  body-backGroundColor  class  themeselector  readonly  readonly  gt           lt  td gt         lt  tr gt         lt tr gt           lt td gt             lt h4 gt Text Color lt  h4 gt           lt  td gt           lt td gt             lt input type  text  id  body-fontColor  class  themeselector  readonly  readonly  gt           lt  td gt         lt  tr gt       lt  table gt     lt  div gt   lt  div gt    JavaScript     document  ready function            options   hide          SettingsTitle   click function e        var appThemePath       appThemePath   text         var closeMenuImg   appThemePath     images toggle-collapse-light gif       var openMenuImg   appThemePath     images toggle-collapse-dark gif        var elem     this  next   options            options   not elem  hide  fast            SettingsTitle   not   this   parent   children  h3   children  a toggle   children  img   attr  src   closeMenuImg       elem toggle  fast        var targetImg     this  parent   children  h3   children  a toggle   children  img   attr  src       closeMenuImg   openMenuImg   closeMenuImg        this  parent   children  h3   children  a toggle   children  img   attr  src   targetImg

User · Answer

I would say the most elegant way is this    lt div class  toggle  gt  lt  div gt   lt div class  content  gt     lt  div gt    then css    toggle   display inline-block  height 48px  width 48px   background url  http   icons iconarchive com icons pixelmixer basic 48 plus-icon png       toggle expanded    background url  http   cdn2 iconfinder com data icons onebit PNG onebit 32 png        and js     document  ready function      var  content       content   hide          toggle   on  click   function e         this  toggleClass  expanded         content slideToggle                FIDDLE

User · Answer

Toggle the text Show and Hide and move your backgroundPosition Y axis  LIVE DEMO     function       DOM READY shorthand          slidingDiv   hide             show hide   click function  e               e preventDefault       If you use anchors         var SH   this SH  1      Simple toggler            this  text SH  Hide   Show                   css  backgroundPosition  0     SH -18 0    px                    next   slidingDiv   slideToggle                   CSS    show hide    background url plusminus png  no-repeat    padding-left 20px

[jquery] jQuery hide and show toggle div with plus and minus icon

Examples related to jquery

Examples related to html

Examples related to css

Examples related to hide

Examples related to show