Показать сообщение отдельно
  #5 (permalink)  
Старый 11.07.2016, 15:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,539

Открывашка 257 со скролингом к заголовку отрытого блока
morzer,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .accordion {
    margin: 1000px 0;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

</head>

<body>
<script>
$(function() {
    $(".accordion h3:first").addClass("slow");
    $(".accordion ul").hide();
    $(".accordion h3").click(function(event) {
        event.preventDefault();
        var h3 = $(this);
        h3.next("ul").slideToggle("slow").toggleClass("active")
        .siblings("ul").removeClass("active")
        .slideUp("slow", function() {
            var scrollTop = h3.offset().top;
            $("html, body").stop().animate({
                scrollTop: scrollTop
            }, 500)
        })
    })
});
</script>

<div class="accordion">
  <h3><a href="#" >Ссылка 1</a></h3>
  <ul>Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1
  </ul>

  <h3><a href="#" >Ссылка 2</a></h3>
  <ul>Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2
  </ul>

</div>


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