Подняться наверх

Добавить новый отзыв

You are here

Раскрывающийся вертикальный блок на JQuery

Далее читателям представлен пошаговый пример по созданию раскрывающегося горизонтального (не вертикального) блока с контентом. Стоит отметить, что текущий пример корректно работает с браузерами Internet Explore, Chrome, Firefox и Opera.

JQuery пример: раскрывающийся горизонтальный блок

1. Создайте заготовку тела HTML документа, по следующему шаблону. Идентификатор CSS more-content будет содержать дополнительный блок содержимого страницы, который у меня и вас будет прятаться или появляться по нажатию на кнопку:

<div id="container">
  <div id="content">
    <p><!-- Контент 1--></p>
    <a  class="view-source" href="#">Раскрыть &rarr;</a>
  </div> <!-- /#content -->
  <div id="more-content">
    <p><!-- Контент 2--></p>
  </div> <!-- /#more-content -->
</div> <!-- /#container -->

P.S. Фактически это обычная двухколоночная верстка веб-страницы у которой просто правый блок по умолчанию скрыт.

2. Все содержание стилей выкладывать не буду, т.к. к этой инструкции я прилагаю ZIP-архив с рабочим примером. Ниже представлены основные моменты - общий блок страницы container, а также основной блок content и скрываемый more-content. Последний я для наглядности и большей визуальной так сказать "красоты" выделил синим цветом (здесь не показано):

#container {
  margin: 0 auto;
  width: 600px;
}
  #content{
    width: 600px;
    float: left;
  }
  #more-content {
    display: none;
    margin-left: 610px;
    width: 350px;
  }

3. Подключите JQuery версии ниже 1.9.x, далее вставьте на вашу веб-страницу следующий клиентский скрипт в котором я по клику с помощью toggle() просто меняю CSS свойства элементов HTML:

$(document).ready(function(){
 
  $('a.view-source').toggle(
    function() { // Раскрываем дополнительный блок контента:
      $('#more-content').show(10)
      $('#container').animate({'width':'960px'})
      $(this).html('Скрыть &rarr;')
    },
    function() { // Скрываем дополнительный блок контента:
      $('#container').animate({'width':'600px'})
      $('#more-content').hide()
      $(this).html('&larr; Раскрыть')
    }
  );
 
});
К статье прилагаю: 
AttachmentSize
jquery-horizotal-collapsible.zip1.23 KB

Спонсоры

У нас Вы можете заказать индивидуальные трудовые споры по лучшей цене.
Яндекс.Метрика

Использовано памяти на 4.612mb