How can I expand and collapse a div using javascript

Question

I have created a list on my site   This list is created by a foreach loop that builds with information from my database   Each item is a container with different sections  so this is not a list like 1  2  3    etc   I am listing repeating sections with information   In each section  there is a subsection   The general build is as follows    lt div gt       lt fieldset class  majorpoints  onclick  majorpointsexpand   this  find  legend   innerHTML   gt       lt legend class  majorpointslegend  gt Expand lt  legend gt       lt div style  display none   gt           lt ul gt               lt li gt  lt  li gt               lt li gt  lt  li gt           lt  ul gt       lt  div gt   lt  div gt    So  I am trying to call a function with onclick  majorpointsexpand   this  find  legend   innerHTML    The div I am trying to manipulate is style  display none  by default  and I want to use javascript to make it visible on click   The    this  find  legend   innerHTML  is attempting to pass  in this case   Expand  as an argument in the function   Here is the javascript   function majorpointsexpand expand                if  expand     Expand                                 document write   this  find  div   style    display inherit                   document write   this  find  legend   innerHTML    Collapse                         else                               document write   this  find  div   style    display none                   document write   this  find  legend   innerHTML    Expand                         I am almost 100  sure my problem is syntax  and I don t have much of a grasp on how javascript works   I do have jQuery linked to the document with    lt script src  http   code jquery com jquery-1 9 1 min js  gt  lt  script gt    In the  lt head gt  lt  head gt  section

User · Answer

try jquery      lt div gt           lt a href     class  majorpoints  onclick  majorpointsexpand         majorpointslegend   html          gt           lt legend class  majorpointslegend  gt Expand lt  legend gt           lt div id  data  style  display none   gt               lt ul gt                   lt li gt  lt  li gt                   lt li gt  lt  li gt               lt  ul gt           lt  div gt       lt  div gt    function majorpointsexpand expand                if  expand     Expand                                     data   css  display   inherit                        majorpointslegend   html  Collapse                          else                                   data   css  display   none                        majorpointslegend   html  Expand

User · Answer

Check out Jed Foster s Readmore js library   It s usage is as simple as    x000D   x000D    document  ready function     x000D       article   readmore  collapsedHeight  100    x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 10 0 jquery min js  gt  lt  script gt  x000D   lt script src  https   fastcdn org Readmore js 2 1 0 readmore min js  type  text javascript  gt  lt  script gt  x000D   x000D   lt article gt  x000D     lt p gt From this distant vantage point  the Earth might not seem of any particular interest  But for us  it s different  Consider again that dot  That s here  That s home  That s us  On it everyone you love  everyone you know  everyone you ever heard of  every human being who ever was  lived out their lives  The aggregate of our joy and suffering  thousands of confident religions  ideologies  and economic doctrines  every hunter and forager  every hero and coward  every creator and destroyer of civilization  every king and peasant  every young couple in love  every mother and father  hopeful child  inventor and explorer  every teacher of morals  every corrupt politician  every  superstar   every  supreme leader   every saint and sinner in the history of our species lived there     on a mote of dust suspended in a sunbeam  lt  p gt  x000D   x000D     lt p gt Space  the final frontier  These are the voyages of the starship Enterprise  Its five year mission  to explore strange new worlds  to seek out new life and new civilizations  to boldly go where no man has gone before  lt  p gt  x000D   x000D     lt p gt Here s how it is  Earth got used up  so we terraformed a whole new galaxy of Earths  some rich and flush with the new technologies  some not so much  Central Planets  them was formed the Alliance  waged war to bring everyone under their rule  a few idiots tried to fight it  among them myself  I m Malcolm Reynolds  captain of Serenity  Got a good crew  fighters  pilot  mechanic  We even picked up a preacher  and a bona fide companion  There s a doctor  too  took his genius sister out of some Alliance camp  so they re keeping a low profile  You got a job  we can do it  don t much care what it is  lt  p gt  x000D   x000D     lt p gt Space  the final frontier  These are the voyages of the starship Enterprise  Its five year mission  to explore strange new worlds  to seek out new life and new civilizations  to boldly go where no man has gone before  lt  p gt  x000D   lt  article gt  x000D   x000D   x000D    Here are the available options to configure your widget    x000D   x000D    x000D    speed  100  x000D    collapsedHeight  200  x000D    heightMargin  16  x000D    moreLink    lt a href     gt Read More lt  a gt    x000D    lessLink    lt a href     gt Close lt  a gt    x000D    embedCSS  true  x000D    blockCSS   display  block  width  100     x000D    startOpen  false  x000D   x000D       callbacks x000D    blockProcessed  function       x000D    beforeToggle  function       x000D    afterToggle  function      x000D     x000D   x000D   x000D    Use can use it like    x000D   x000D     article   readmore   x000D    collapsedHeight  100  x000D    moreLink    lt a href     class  you-can-also-add-classes-here  gt Continue reading    lt  a gt    x000D      x000D   x000D   x000D    I hope it helps

User · Answer

Take a look at toggle   jQuery function     http   api jquery com toggle   Also  innerHTML jQuery Function is  html

User · Answer

Since you have jQuery on the page  you can remove that onclick attribute and the majorpointsexpand function  Add the following script to the bottom of you page or  preferably  to an external  js file     function           majorpointslegend   click function          this  next   toggle   text    this  is   visible    Collapse   Expand                  This solutionshould work with your HTML as is but it isn t really a very robust answer  If you change your fieldset layout  it could break it  I d suggest that you put a class attribute in that hidden div  like class  majorpointsdetail  and use this code instead     function           majorpoints   on  click     majorpointslegend   function event         event currentTarget  find   majorpointsdetail   toggle          this  text    this  is   visible    Collapse   Expand                  Obs  there s no closing  lt  fieldset gt  tag in your question so I m assuming the hidden div is inside the fieldset

User · Answer

Many problems here  I ve set up a fiddle that works for you  http   jsfiddle net w9kSU       majorpointslegend   click function        if   this  text     Expand                mylist   show              this  text  Colapse         else              mylist   hide              this  text  Expand

User · Answer

So  first of all  your Javascript isn t even using jQuery   There are a couple ways to do this  For example   First way  using the jQuery toggle method    lt div class  expandContent  gt           lt a href     gt Click Here to Display More Content lt  a gt    lt  div gt   lt div class  showMe  style  display none  gt          This content was hidden  but now shows up  lt  div gt    lt script gt            expandContent   click function                showMe   toggle             lt  script gt    jsFiddle   http   jsfiddle net pM3DF   Another way is simply to use the jQuery show method    lt div class  expandContent  gt           lt a href     gt Click Here to Display More Content lt  a gt    lt  div gt   lt div class  showMe  style  display none  gt          This content was hidden  but now shows up  lt  div gt    lt script gt          expandContent   click function                showMe   show             lt  script gt    jsFiddle  http   jsfiddle net Q2wfM   Yet a third way is to use the slideToggle method of jQuery which allows for some effects   Such as     showMe   slideToggle  slow    which will slowly display the hidden div

User · Answer

how about   jQuery       majorpoints   click function          this  find   hider   toggle          HTML   lt div gt     lt fieldset class  majorpoints  gt       lt legend class  majorpointslegend  gt Expand lt  legend gt       lt div class  hider  style  display none   gt           lt ul gt               lt li gt cccc lt  li gt               lt li gt  lt  li gt           lt  ul gt       lt  div gt   lt  div gt    Fiddle  This way you are binding the click event to the  majorpoints class an you don t have to write it in the HTML each time

User · Answer

If you used the data-role collapsible e g        lt div id  selector  data-role  collapsible  data-collapsed  true  gt      html            lt  div gt    then it will close the the expanded div          selector   collapsible   collapsible  collapse

User · Answer

You might want to give a look at this simple Javascript method to be invoked when clicking on a link to make a panel div expande or collapse    lt script language  javascript  gt   function toggle elementId        var ele   document getElementById elementId       if ele style display     block                 ele style display    none             else           ele style display    block             lt  script gt    You can pass the div ID and it will toggle between display  none  or  block    Original source on snip2code - How to collapse a div in html

User · Answer

Okay  so you ve got two options here     Use jQuery UI s accordion - its nice  easy and fast  See more info here Or  if you still wanna do this by yourself  you could remove the fieldset  its not semantically right to use it for this anyway  and create a structure by yourself    Here s how you do that  Create a HTML structure like this     lt div class  container  gt       lt div class  header  gt  lt span gt Expand lt  span gt        lt  div gt       lt div class  content  gt           lt ul gt               lt li gt This is just some random content  lt  li gt               lt li gt This is just some random content  lt  li gt               lt li gt This is just some random content  lt  li gt               lt li gt This is just some random content  lt  li gt           lt  ul gt       lt  div gt   lt  div gt    With this CSS   This is to hide the  content stuff when the page loads    container  content       display  none      padding   5px      Then  using jQuery  write a click event for the header       header   click function            header     this         getting the next element      content    header next          open up the content needed - toggle the slide- if visible  slide up  if not slidedown       content slideToggle 500  function                execute this after slideToggle is done           change text of header based on visibility of content div          header text function                    change text based on condition             return  content is   visible      Collapse     Expand                              Here s a demo   http   jsfiddle net hungerpain eK8X5 7

User · Answer

Here there is my example of animation a staff list with expand a description    lt html gt     lt head gt       lt style gt         staff              margin 10px 0          staff-block        float  left  width 48   padding-left  10px  padding-bottom  10px          staff-title        font-family  Verdana  Tahoma  Arial  Serif  background-color   1162c5  color  white  padding 4px  border  solid 1px  2e3d7a  border-top-left-radius 3px  border-top-right-radius  6px  font-weight  bold          staff-name         font-family  Myriad Web Pro  font-size  11pt  line-height 30px  padding  0 10px          staff-name hover   background-color  silver  important  cursor  pointer          staff-section      display inline-block  padding-left  10px          staff-desc         font-family  Myriad Web Pro  height  0px  padding  3px  overflow hidden  background-color  def  display  block  border  solid 1px silver          staff-desc p       text-align  justify  margin-top  5px          staff-desc img     margin  5px 10px 5px 5px  float left  height  185px         lt  style gt     lt  head gt   lt body gt   lt  -- START STAFF SECTION -- gt   lt div class  staff  gt     lt div class  staff-block  gt       lt div  class  staff-title  gt Staff lt  div gt       lt div class  staff-section  gt           lt div class  staff-name  gt Maria Beavis lt  div gt           lt div class  staff-desc  gt             lt p gt  lt img src  http   www craigmarlatt com canada images security amp defence coulombe jpg    gt Maria earned a Bachelor of Commerce degree from McGill University in 2006 with concentrations in Finance and International Business  She has completed her wealth Management Essentials course with the Canadian Securities Institute and has worked in the industry since 2007  lt  p gt           lt  div gt           lt div class  staff-name  gt Diana Smitt lt  div gt           lt div class  staff-desc  gt             lt p gt  lt img src  http   www craigmarlatt com canada images security amp defence coulombe jpg    gt Diana joined the Diana Smitt Group to help contribute to its ongoing commitment to provide superior investement advice and exceptional service  She has a Bachelor of Commerce degree from the John Molson School of Business with a major in Finance and has been continuing her education by completing courses  lt  p gt           lt  div gt           lt div class  staff-name  gt Mike Ford lt  div gt           lt div class  staff-desc  gt             lt p gt  lt img src  http   www craigmarlatt com canada images security amp defence coulombe jpg    gt Mike  A graduate of   cole des hautes   tudes commerciales  HEC Montreal   Guillaume holds the Chartered Investment Management designation  CIM   After having been active in the financial services industry for 4 years at a leading competitor he joined the Mike Ford Group  lt  p gt           lt  div gt       lt  div gt     lt  div gt      lt div class  staff-block  gt       lt div  class  staff-title  gt Technical Advisors lt  div gt       lt div class  staff-section  gt           lt div class  staff-name  gt TA Elvira Bett lt  div gt           lt div class  staff-desc  gt             lt p gt  lt img src  http   www craigmarlatt com canada images security amp defence coulombe jpg    gt Elvira has completed her wealth Management Essentials course with the Canadian Securities Institute and has worked in the industry since 2007  Laura works directly with Caroline Hild  aiding in revising client portfolios  maintaining investment objectives  and executing client trades  lt  p gt           lt  div gt           lt div class  staff-name  gt TA Sonya Rosman lt  div gt           lt div class  staff-desc  gt             lt p gt  lt img src  http   www craigmarlatt com canada images security amp defence coulombe jpg    gt Sonya has a Bachelor of Commerce degree from the John Molson School of Business with a major in Finance and has been continuing her education by completing courses through the Canadian Securities Institute  She recently completed her Wealth Management Essentials course and became an Investment Associate  lt  p gt           lt  div gt           lt div class  staff-name  gt TA Tim Herson lt  div gt           lt div class  staff-desc  gt             lt p gt  lt img src  http   www craigmarlatt com canada images security amp defence coulombe jpg    gt Tim joined his father amp  8217 s group in order to continue advising affluent families in Quebec  He is currently President of the Mike Ford Professionals Association and a member of various other organisations  lt  p gt           lt  div gt       lt  div gt     lt  div gt   lt  div gt   lt  -- STOP STAFF SECTION -- gt    lt script src  http   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt     lt script language  javascript  gt  lt  --    lt   CDATA      staff-name   hover function           this  toggleClass  hover        var lastItem          staff-name   click function currentItem            var currentItem     this         if    this  next   height      0                lastItem  css   font-weight   normal                 lastItem  next   animate  height   0px   400  swing                this  css   font-weight   bold                 this  next   animate  height   300px  opacity  1  400  swing            else               this  css   font-weight   normal                 this  next   animate  height   0px  opacity  1  400  swing                  lastItem     this                gt  -- gt  lt  script gt    lt  body gt  lt  html gt    Fiddle

[javascript] How can I expand and collapse a <div> using javascript?

Examples related to javascript

Examples related to jquery