Как бы вы создали нумерацию страниц, которая действует динамически на основе разборного контента? Когда пользователь нажимает стрелку на одной из строк, отображается содержимое. Тем не менее, можно открыть столько контента, пока не будет достигнута заданная высота окна. В этом случае автоматически должна быть создана новая страница, где теперь будет отображаться весь контент, который не уместился.
https://jsfiddle.net/fq2zegL0/
$(document).ready(function () {
$('.collapsible').on('click', function(event){
event.preventDefault();
// create accordion variables
var accordion = $(this);
var accordionContent = accordion.closest('.verticalmenu-auto').next('.content');
// toggle accordion link open class
accordion.toggleClass("active");
// toggle accordion content
accordionContent.slideToggle(250);
accordionContent.toggleClass("active");
});
});
:root {
--colorbggray: rgb(65,65,65);
--colorlightgray: rgb(150,150,150);
--colorcyan: rgb(0, 229, 255);
--colorgreen: rgb(0, 255, 0);
--colorUpGrey: rgb(135,135,135);
--colorLowGrey: rgb(38,38,38);
--colorMidGrey: rgb(95,95,95);
--colorGreen: rgb(11,69,2);
--colorAmber: orange;
--colorRed: red;
}
.body{
width: 600px;
height: 400px;
background-color: black;
}
.verticalmenu-auto {
display: flex;
align-items: stretch;
background-color: #f1f1f1;
}
.verticalmenu-auto > div {
border-top: 2px solid var(--colorUpGrey);
border-bottom: 2px solid var(--colorLowGrey);
border-left: 2px solid var(--colorUpGrey);
border-right: 2px solid var(--colorLowGrey);
background: var(--colorMidGrey); color: white;
width: 100px;
padding-top: 8px;
padding-bottom: 8px;
padding-right: 16px;
padding-left: 16px;
margin: 0.5px;
text-align: left;
font-size: 16px;
}
.verticalmenu-auto li, {
border-top: 2px solidauto var(--colorUpGrey);
border-bottom: 2px solid var(--colorLowGrey);
border-left: 2px solid var(--colorUpGrey);
border-right: 2px solid var(--colorLowGrey);
background: var(--colorMidGrey);
}
.collapsible {
background: var(--colorMidGrey); color: white;
cursor: pointer;
width: 100%;
border: none;
text-align: center;
outline: none;
}
.collapsible:after {
content: '\1433';
float: center;
transform: scale(.7, 1);
}
.collapsible.active:after {
content: "\142F";
transform: scale(1, .7);
}
.content {
display: none;
overflow: hidden;
transition: max-height 0.0s ease-out;
grid-column-start: -1;
grid-column-end: 1;
background-color: #BFBFBF;
padding: 10px;
color: #fff;
height: 200px;
}
.content.active {
height: auto;
display: block !important;
height: 200px;
}
.pagination {
display: inline-block;
}
.pagination a {
float: left;
padding: 4px 16px;
text-decoration: none;
border: 2px solid var(--colorMidGrey);
margin: 0 4px;
color: white;
}
.pagination a.active {
background-color: var(--colorGreen);
color: white;
border: 2px solid var(--colorGreen);
}
.pagination a:hover:not(.active) {
border-top: 2px solid var(--colorLowGrey);
border-bottom: 2px solid var(--colorUpGrey);
border-left: 2px solid var(--colorLowGrey);
border-right: 2px solid var(--colorUpGrey);
box-shadow: inset 0 0 0 2px magenta;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class = "body">
<div style =" height: 10px"></div>
<div class="pagination">
<a href="#">«</a>
<a href="#" class="active">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">»</a>
</div>
<ul style="list-style:none;padding-left:0;">
<li>
<div class="verticalmenu-auto">
<div style="flex-grow: 10">Name</div>
<div style="flex-grow: 1; text-align: center">
<button class="collapsible"></button>
</div>
</div>
<div class='content'>
<p> content</p>
</div>
</li>
<li>
<div class="verticalmenu-auto">
<div style="flex-grow: 10">Name</div>
<div style="flex-grow: 1; text-align: center">
<button class="collapsible"></button>
</div>
</div>
<div class='content'>
<p> content</p>
</div>
</li>
<li>
<div class="verticalmenu-auto">
<div style="flex-grow: 10">Name</div>
<div style="flex-grow: 1; text-align: center">
<button class="collapsible"></button>
</div>
</div>
<div class='content'>
<p> content</p>
</div>
</li> <li>
<div class="verticalmenu-auto">
<div style="flex-grow: 10">Name</div>
<div style="flex-grow: 1; text-align: center">
<button class="collapsible"></button>
</div>
</div>
<div class='content'>
<p> content</p>
</div>
</li>
</ul>
</div>