<style>
div.container
{
display: flex;
flex-wrap: wrap;
width: 770px;
height: 90px;
background-color: green;
overflow: hidden;
}
div.container > div
{
width: 60px;
height: 25px;
background-color: #df1245;
text-align: center;
margin: 5px;
padding: 5px 0;
}
div.container > div:nth-child(n + 22) /*этим селекторам задаем свойство сортировки элементам, которые идут после кнопки "показать еще" если контейнер будет адаптивным, придется прописывать кучу вариантов nth-child */
{
order: 2;
}
div.container > label.more
{
display: block;
width: 130px;
height: 25px;
margin: 5px;
padding: 5px 0;
text-align: center;
order: 1; /* У кнопки стоит такой индекс сортировки чтобы оказаться между видимыми и невидимыми элементами */
background-color: #78d412;
}
div.container label.more span.less
{
display: none;
}
#show-more-state
{
display: none;
}
#show-more-state:checked ~ div.container
{
height: auto;
}
#show-more-state:checked ~ div.container label.more
{
order: 3;
margin-left: auto;
}
#show-more-state:checked ~ div.container label.more span.more
{
display: none;
}
#show-more-state:checked ~ div.container label.more span.less
{
display: initial;
}
</style>
<input id="show-more-state" type="checkbox"/> <!-- Этим чекбоксом запонимаем состояние кнопки, чтобы можно было оттолкнуться стилями от превдокласса :checked -->
<div class="container">
<label class="more" for="show-more-state"><span class="more">ПОКАЗАТЬ ЕЩЕ</span><span class="less">СВЕРНУТЬ</span></label>
<div>ITEM</div>
<div>ITEM</div>
<div>ITEM</div>
<div>ITEM</div>
<div>ITEM</div>
<div>ITEM</div>
<div>ITEM</div>
<div>ITEM</div>
<div>ITEM</div>
<div>ITEM</div>
<div>ITEM</div>
<div>ITEM</div>
<div>ITEM</div>
<div>ITEM</div>
<div>ITEM</div>
<div>ITEM</div>
<div>ITEM</div>
<div>ITEM</div>
<div>ITEM</div>
<div>ITEM</div>
<div>ITEM</div>
<div>ITEM</div>
<div>ITEM</div>
<div>ITEM</div>
<div>ITEM</div>
<div>ITEM</div>
<div>ITEM</div>
</div>$value = '<form method="post">
<button type="submit" onclick="return confirm(\'Вы уверены, что хотите сменить статус на \\\'Доставлен\\\' ?\')">Доставить</button>
</form>';$value = <<<ANY_RANDOM_SYMBOLS_FOR_BORDER
<form method="post">
<button type="submit" onclick="return confirm('Вы уверены, что хотите сменить статус на \'Доставлен\' ?')">Доставить</button>
</form>
ANY_RANDOM_SYMBOLS_FOR_BORDER;полоски прогресса и таймера в отдельный поток?
</li><!-- тут символ переноса строки, вносит свою лепту как текстовая нода, имеющая небольшие, но геометрические размеры -->
<li class="modules-card layout"><a\s.*?href="(.+?)".*?>\[photo-.+<\/a>div.top-left-container input[type="checkbox"]:checked ~ div.menu
{
/*анимация появления меню*/
}
div.top-left-container input[type="checkbox"]:not(:checked) ~ div.menu
{
/*анимация скрытия меню*/
}<form .... onsubmit="my_submit(e)">
...
<label>Имя</label>
<input id="field_name_showed" type="text" value=""> <!-- Поле, которое видит пользователь -->
<input id="field_name_hidden" type="hidden" value=""> <!-- Скрытое поле для отправки -->function my_submit(e)
{
e.preventDefault(); // останавливаете выполнение сабмита
document.getElementById("field_name_hidden").value = document.getElementById("field_name_showed").value + " (добавленный текст)"; // добавляете в скрытое поле формы имя и что хотели еще.
e.target.submit(); // перезапускаете сабмит формы
}[
{
header_title: "Название некоторого длительного процесса",
date_begin: , // начало процесса, вычисляется предварительной пробежкой по всем заявкам, поиск минимума
date_end: , // конец процесса, вычисляется предварительной пробежкой по всем заявкам, поиск максимума
appls: [
{title: "ЗАЯВКА", date_begin, date_end},
{title: "ЗАЯВКА", date_begin, date_end},
]
}
]var iframe = document.getElementById('fileUploadIframe');
iframe.width = iframe.contentWindow.document.body.scrollWidh + "px";
iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";table.white_border,
table.white_border th,
table.white_border td
{
border-color: ваш цвет;
}