3

Есть

<div class='open_some_block'>
  Открить
  <ul>
    <li>один</li>
    <li>два</li>
  </ul>
</div>
<div>Что то еще</div>

При нажатии на open_some_block список должен открываться. Как сделать это с помощью transform: translateY так, чтобы этот выпадающий список двинул второй блок в низ?

PS Знаю как это сделать с помощью heigth, вот пример http://jsfiddle.net/50gsLtL2/12/. Но мне этот вариант не подходит

5
  • jsfiddle.net/soledar10/bztbby67
    – soledar10
    25 сен 2015 в 14:04
  • К сожалению, transform не изменяет разметку, поэтому сдвинуть им другие элементы не получится.
    – Rolandius
    25 сен 2015 в 14:05
  • jsfiddle.net/soledar10/p6gf6jsj
    – soledar10
    25 сен 2015 в 14:07
  • Можете посмотреть этот мой ответ — может какие-нибудь идеи придут. P. S. Ну и сам там вопрос изучите, чтобы понять, что мы пытались сделать. 25 мар 2016 в 3:21
  • Не сочтите за рекламу, но может быть поможет. На ютубе видел пример с таким раздвигающимся списком, в поиске введи Уроки по CSS/CSS3. Часть 19. Анимации (animation) это вроде то что тебе нужно.
    – Bleser
    25 мар 2016 в 3:37

1 ответ 1

1

Как на счет такого варианта?

$(document).ready(function() {
  $('#opentext').click(function() {
    $('#text').slideToggle()
  });
});
#text {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="opentext">Показать текст полностью</div>
<div id="text">
  <p>Текст текст текст текст</p>
  <p>Текст текст текст текст</p>
  <p>Текст текст текст текст</p>
  <p>Текст текст текст текст</p>
</div>
<div>второй блок</div>

1
  • 2
    Просили на css же. Со скриптом и так везде полно примеров.
    – Qwertiy
    24 сен 2015 в 20:08

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.