Разборный вид больше и меньше вид кнопка

Question

У меня есть список из 10 предметов для показа. Я хочу, чтобы кнопка «Просмотреть больше» отображалась после того, как три из этих вопросов были отображены, и после нажатия на кнопку отображаются остальные, а кнопка «Просмотреть больше» меняет свое имя, чтобы просматривать меньше и наоборот. Я новичок в веб-разработке и не понимаю, как это реализовать. Любая помощь в этом отношении будет действительно полезна. Спасибо.

Текущий код:

<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

Это то, что вы хотите?

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>

Вы можете найти более подробную информацию на https://www.w3schools.com/bootstrap/bootstrap_collapse.asp

И этот код может быть усовершенствован и реорганизован различными способами.