Collapsible view more and view less button

Question

I have a list of 10 items to show. I want a view more button after three of those questions are displayed and upon clicking the button the rest are displayed and the view more button changes it's name to view less and the reverse. I am new to web dev and confused about how to implement this. Any help in this regard will be really helpful. Thanks.

Current code:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button> <div id="demo" class="collapse"> Lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> 

Answer 1

Is this what you want?

 function changeName(){ if($("#collapseButton").html()=="View more"){ $("#collapseButton").html("View less"); } else{ $("#collapseButton").html("View more"); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <h2>Simple Collapsible</h2> <p>Click on the button to toggle between showing and hiding content.</p> <div> <li> 1 </li> <li> 2 </li> <li> 3 </li> </div> <div id="collapsible" class="collapse"> <li> 4... </li> <li> 5... </li> <li> 6... </li> <li> 7... </li> <li> 8... </li> <li> 9... </li> <li> 10... </li> </div> </div> <div align="right"> <button id="collapseButton" type="button" class="btn btn-info" data-toggle="collapse" data-target="#collapsible" onclick="changeName()">View more</button> </div> 

you can find more details at https://www.w3schools.com/bootstrap/bootstrap_collapse.asp

And this code can be perfected and refactored in many ways.