javascript - Expand and collapse a DIV -


this question has answer here:

i trying make content div expand , collapse according contents.

before expand should - enter image description here

after expand should - enter image description here

i not sure how use jquery this. tried toggle class couldn't work.

this code far - http://jsbin.com/bicenomi/1/edit

hope me.

thank you.

you may put content in div. , make display: none @ beginning, , once user clicks on view details toggle display display:block.

and if user clicks on collapse, make div display:none again.

<html> <head>     <script type="text/javascript">         function hideinfo() {              var chck = document.getelementbyid('viewcollapse');             alert(chck.innerhtml);             if (chck.innerhtml == "collapse") {                  document.getelementbyid('moreinfo').style.display = 'none';                 chck.innerhtml = "view";              }             else if (chck.innerhtml == "view") {                 alert('view');                 document.getelementbyid('moreinfo').style.display = 'block';                 chck.innerhtml = "collapse";              }         }     </script>   <meta charset="utf-8">   <title>js bin</title> </head> <body>           <div class="timetable">                     <h5><i class="icon fa fa-circle"></i><strong>xxxxxxxxxx</strong></h5>                   <h6><small>no words</small></h6>                   <h5><small>no words found in this</small></h5>                     <h5><strong>xxxxxxxxxx</strong></h5>                   <h6><small>no words</small></h6>                   <h5><small>no words found in this</small></h5>               <div id="moreinfo">                   <h5><i class="icon fa fa-circle"></i><strong>xxxxxxxxxx</strong></h5>                   <h6><small>no words</small></h6>                   <h5><small>no words found in this</small></h5>                     <h5><strong>xxxxxxxxxx</strong></h5>                   <h6><small>no words</small></h6>                   <h5><small>no words found in this</small></h5>            </div>           </div>          <div class="viewmore">              <p class="small"><span>medium:</span> no words</p>              <p onclick="hideinfo();" id="viewcollapse" class="small">collapse</p>          </div>  </body>  </html> 

i create small demo. works me, please try , tell me solves problem


Comments

Popular posts from this blog

commonjs - How to write a typescript definition file for a node module that exports a function? -

openid - Okta: Failed to get authorization code through API call -

thorough guide for profiling racket code -