Версия для слабовидящих
Тестоввая — различия между версиями
Материал из Ярославский педагогический университет
Ya.repin (обсуждение | вклад) (Новая страница: «<!-- Информация о численности обучающихся по реализуемым образовательным программам --> <di…») |
Ya.repin (обсуждение | вклад) |
||
| Строка 1: | Строка 1: | ||
<!-- Информация о численности обучающихся по реализуемым образовательным программам --> | <!-- Информация о численности обучающихся по реализуемым образовательным программам --> | ||
| + | <html> | ||
| + | <head> | ||
| + | <style> | ||
| + | .content { | ||
| + | padding: 0 18px; | ||
| + | max-height: 0; | ||
| + | overflow: hidden; | ||
| + | transition: max-height 0.2s ease-out; | ||
| + | background-color: white; | ||
| + | } | ||
| + | |||
| + | .tr,td { | ||
| + | border: 1px solid #ddd; | ||
| + | text-align: center; | ||
| + | padding: 11px; | ||
| + | } | ||
| + | |||
| + | th { | ||
| + | border: 1px solid #ddd; | ||
| + | padding-top: 8px; | ||
| + | padding-bottom: 8px; | ||
| + | text-align: center; | ||
| + | background-color: #EEEEFF; | ||
| + | color: black; | ||
| + | } | ||
| + | |||
| + | .del { display: none; } | ||
| + | .del:not(:checked) + label + * { display: none; | ||
| + | } | ||
| + | |||
| + | .del:not(:checked) + label, | ||
| + | .del:checked + label { | ||
| + | display: inline-block; | ||
| + | padding: 2px 10px; | ||
| + | border-radius: 2px; | ||
| + | color: #fff; | ||
| + | background: #59698d; | ||
| + | cursor: pointer; | ||
| + | } | ||
| + | .del:checked + label { | ||
| + | background: #a7d7f9; | ||
| + | } | ||
| + | |||
| + | .scrollable { | ||
| + | height: 900px; | ||
| + | overflow-y: scroll; | ||
| + | border-bottom: 1px solid #ddd; | ||
| + | } | ||
| + | |||
| + | .table-sticky thead th{ | ||
| + | position:sticky; | ||
| + | top:0; | ||
| + | } | ||
| + | |||
| + | |||
| + | </style> | ||
| + | </head> | ||
| + | |||
| + | <body> | ||
<div class="block"> | <div class="block"> | ||
<h2 class="extremum-click">Информация о численности обучающихся по реализуемым образовательным программам</h2> | <h2 class="extremum-click">Информация о численности обучающихся по реализуемым образовательным программам</h2> | ||
| Строка 56: | Строка 115: | ||
</div> | </div> | ||
</div> | </div> | ||
| + | </body> | ||
| + | |||
| + | |||
| + | <script> | ||
| + | var coll = document.getElementsByClassName("collapsible"); | ||
| + | var i; | ||
| + | |||
| + | for (i = 0; i < coll.length; i++) { | ||
| + | coll[i].addEventListener("click", function() { | ||
| + | this.classList.toggle("active"); | ||
| + | var content = this.nextElementSibling; | ||
| + | if (content.style.maxHeight){ | ||
| + | content.style.maxHeight = null; | ||
| + | } else { | ||
| + | content.style.maxHeight = content.scrollHeight + "px"; | ||
| + | } | ||
| + | }); | ||
| + | } | ||
| + | $(document).ready(function() { | ||
| + | $('.block').on('click', '.extremum-click', function() { | ||
| + | $(this).toggleClass('red').siblings('.extremum-slide').slideToggle(0); | ||
| + | }); | ||
| + | }); | ||
| + | |||
| + | </script> | ||
Версия 08:41, 5 октября 2022
