Участник: TFMB: различия между версиями

Версия от 21:29, 11 сентября 2024

Глава Службы Безопасности

Отдел:

Отдел Службы Безопасности

Обязанности:

Обеспечить порядок на станции

Уровень доступа:

бриг

Необходимое время:

пока не настроено

Руководства:

Ваши срп

todo:

сделать раскрывающийся акордион в Шаблон:Blockbtn

   Раскрыть аккордеон

       Это содержимое аккордеона. Оно появится при фокусировке на заголовке.

@@ Строка 11: / Строка 11: @@
 сделать раскрывающийся акордион в [[Шаблон:Blockbtn]]
 {{#css:
-.blockbtn {
+.accordion-content {
-    position: relative;
+     display: none;
-    background: #121212;
-    text-align: center;
-    border: 1px solid black;
-    border-radius: 8px;
-    flex-basis: 230px;
-    font-size: 0.8em;
-    flex-grow: 1;
-     display: flex;
-    padding: 6px 2px 6px 2px;
-    justify-content: center;
-    flex-direction: column;
 }
-.blockbtn:hover{
-background:hsl(220, 25%,calc(13% - 4%));
-}
-.blockbtn a{
-color:lightgray;
-}
-.StupidButton {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0
-}
-.header:hover, .content:hover & .header:hover {
-    border-bottom: 0;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-}
-.accordion .content {
-  max-height: 0;
-  overflow: hidden;
-  transition: max-height 0.3s ease;
-  font-size: 0.8em;
-  text-align: center;
-  background: #121212;
-  border-bottom-left-radius: 8px;
-  border-bottom-right-radius: 8px;
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-}
-.accordion .header:hover + .content,
-.accordion .content:hover {
-    max-height: 100px;
-    font-size: 0.8em;
-    text-align: center;
-    border: 1px solid black;
+.accordion-toggle:focus + .accordion-content {
-    border-bottom-left-radius: 8px;
+     display: block;
-    border-bottom-right-radius: 8px;
-     display: flex;
-    padding: 6px 2px 6px 2px;
-    justify-content: center;
-    flex-direction: column;
 }
-.accordion .content:hover {
+.accordion-toggle {
-     background: #11151d;
+    cursor: pointer;
+     outline: none;
 }
 }}
-<div class="accordion">
+<div>
-  <div class="blockbtn header">{{{текст}}}[[{{{ссылка}}}|<span class="StupidButton" style="z-index:100;"role="button"></span>]]</div>
+    <span tabindex="0" class="accordion-toggle">Раскрыть аккордеон</span>
-  <div class="content"><span>Контент 3: Текст для третьего аккордеона.</span></div>
+    <div class="accordion-content">
+        <span>Это содержимое аккордеона. Оно появится при фокусировке на заголовке.</span>
+    </div>
 </div>