Складной вид еще и просмотр меньше кнопки

У меня есть список из 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>

javascript,jquery,html,css,bootstrap-4,

0

Ответов: 1

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

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

JavaScript, JQuery, HTML, CSS, самозагрузки-4,
Похожие вопросы
Яндекс.Метрика