Показать сообщение отдельно
  #1 (permalink)  
Старый 05.06.2018, 15:28
Аватар для madeas
Профессор
Отправить личное сообщение для madeas Посмотреть профиль Найти все сообщения от madeas
 
Регистрация: 13.04.2018
Сообщений: 232

Details Summary button:active
Добрый день!
Подскажите, как настроить скрипт, чтобы помимо функции скрытия деталей, стрелка на кнопке меняла наклон? Аналогично работе summary. Через css не получается. Может быть лучше реализовать саму через ::before ::after?

<style>
summary {
  color: #3b393d;
}

.dclose {
  background-color: transparent;
  background-clip: padding-box;
  border: none;
  color: #333;
  line-height: 1.5;
  margin-top: .2em;
  margin-bottom: .2em;
  padding: .375rem .75rem;
}
</style>

<details id="details">
  <summary> open details</summary>
  Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя
  Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах
  и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
</details>

<button class="text-right dclose" onclick="closeDetails()"><span class="en" lang="en">▲ Close details</span></button>
<script>
  function closeDetails() {
    document.getElementById("details").open = false;
  }

</script>
Ответить с цитированием