Как сделать сворачивающейся-разворачивующейся список?

Question

[Александр]

Здравствуйте. Подскажите как сделать кнопку развернуть - свернуть список, при достижение его максимальной высоты 500px?

<div class="container">
  <ul class="facts">
    <li><a href="#">Название 1</a></li>
    <li><a href="#">Название 2</a></li>
    <li><a href="#">Название 3</a></li>
    <li><a href="#">Название 4</a></li>
    <li><a href="#">Название 5</a></li>
    <li><a href="#">Название 6</a></li>
    <li><a href="#">Название 7</a></li>
    <li><a href="#">Название 8</a></li>
  </ul>
</div>

Answer 1

[true]

тут кроме html и javascript надо еще знать css

придется изучить
перед тем как делать приложения

Comments

[Александр]

css такой

.container {
  max-width: 1440px;
  height: 500px;
  margin: 0 auto;
}

.fact {
   margin-bottom: 25px;
}

.facts {
   line-height: 22px;
   font-size: 15px;
   color: #929394;
   font-weight: 600;
   font-family: iviSans,Arial,Helvetica,Helvetica Neue,FreeSans,sans-serif;
}

ul{
    list-style-type: circle;
}

.facts {
  list-style-position: Outside;
}
.factsr ::marker {
  color: red;
}

.facts {
  list-style: none;
  list-style-position: Outside;
}
.facts li::before {
  content: "•";
  font-size: 130%;
  line-height: 0;
  margin: 0 0.3rem 0 -0.25rem;
  position: relative;
  top: 0.08rem;
  color: red;
}

.facts {
  list-style: none;
}
.facts li::before {
  content: "";
  width: 1em;
  height: 1em;
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='gray'/%3E%3C/svg%3E");
  background-size: 38%;
  background-repeat: no-repeat;
  background-position: left center;
  position: relative;
  top: 0.08rem;
}

[true]

а..

я просто думал что ты css не знаешь ))

тогда просто измеряй высоту контейнера внутри которого элементы списка
и когда будет достигнуто определенное значение - делай что надо

добавил элемент - проверил высоту

[Александр]

true, поставив overflow: hidden;, конечно скроется то что не влезло), но как сделать кнопку развернуть - свернуть я не пойму. тут js нужен

[true]

создай кнопку Светруть/развернуть
назначь ей функцию при нажатии

чтобы скрыть/показать список - изменяй свойство списка display на none и наоборот

Answer 2

[kryamk]

тык
клик
бам