Показать сообщение отдельно
  #2 (permalink)  
Старый 31.01.2021, 22:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,077

lev90,
<!DOCTYPE html>

<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
<style type="text/css">
.collapsible {
    background-color: #777;
    color: white;
    cursor: pointer;
    padding: 2px 4px;
     margin: 6px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
}

.collapsible:hover {
    background-color: #555;
}
.content {
    padding: 0 18px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 1.2s ease-out;
    background-color: #f1f1f1;
}

.conteiner.active .collapsible:after {
    content: 'Скрыть';
}
.conteiner .collapsible:after {
    content: 'Показать';
}
.conteiner.active .content {
    max-height: var(--maxH);
}
.conteiner.active .collapsible {
    background-color: #555;
}
</style>
</head>

<body>
<div class="conteiner">
 <div>
  <div>
   <div>
    <div> Всего 4 </div>
   </div>
   <div>
    <div><span class="collapsible"></span></div>    <!-- Нажимаемая кнопка -->
   </div>
   <div>
    <div>
     <div><button color="white">Обзор</button>
      <div><button color="white">Подробнее</button></div>
     </div>
     <div>Текст</div>
    </div>
   </div>
  </div>
 </div>

 <div  class="content"> <!-- Показываемый блок -->
  <div>
   <div>
    <div>Текст</div>
   </div>
   <div>
    <div>
     <div>Текст<div>Текст</div></div>
    </div>
   </div>
  </div>
 </div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
    const on = (parent, event, selector, handler) =>
    parent.addEventListener(event, ({target}) => {
        if (target = target.closest(selector)) handler(target)
    })
    const fn = el => {
        let parent = el.closest('.conteiner');
        let content = parent.querySelector('.content');
        content.style.setProperty('--maxH', `${content.scrollHeight}px`);
        parent.classList.toggle('active');
    }
    on(document, "click", ".collapsible", fn);
});
</script>
</body>
</html>
Ответить с цитированием