» »

Создать открытие и скрытие блока div на jQuery

Создать открытие и скрытие блока div на jQuery

Думаю каждый мог увидеть на любом интернет ресурсе кнопку открыть и закрыть, а также подробнее, где открывается блок содержимого. Теперь вы можете сделать на своем сайте также, где будет плавное раскрытие блога с его содержимым, а основном это идет информация, хотя в немо можно поставить все что вам нужно, до изображение. Иногда можно увидеть, что идет описание, и здесь потом стоит этот скрипт, где по клику открываете и продолжается дальше описание. На любом ресурсе может пригодится, как статьи или кино сайт, где описывают подробно, и чтоб сохранить место, как раз разработан этот блок.

Теперь как все это создать, где при помощи JS (библиотеки jQuery) будем делать.

Первое что нужно сделать, это подключение с сервера Google:

Код
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>


Потом нужно подключить скрипт, где вы будете оставлять информацию при раскрытие.

Код
<script type='text/javascript'>  
  $(document).ready(function() {  
  $("A#trigger").toggle(function() {  
  // Отображаем скрытый блок  
  $("DIV#box").fadeIn(); // fadeIn - плавное появление
  return false; // не производить переход по ссылке
  },  
  function() {  
  // Скрываем блок  
  $("DIV#box").fadeOut(); // fadeOut - плавное исчезновение  
  return false; // не производить переход по ссылке
  }); // end of toggle()  
  }); // end of ready()  
  </script>  

</head>  
<body>  

  <a href='#' id='trigger'>Открыть/скрыть информацию</a> <!-- Всё происходит при нажатии на ссылку -->
  <div id='box' style='display: none;padding:10px;background-color:#f1f1f1;margin:10px;width:210px;'>Содержимое и опять сайт ZORNET.RU</div>


Такой скрипт скрываем информацию, а значит остается больше места и сильно его экономит, а значит он информационно не перезагружен и вы в любой время можете открыть.

Здесь Демонстрация этого материала, где можете посмотреть визуально как работает.

На конструкторе uCoz уже библиотека подключена, и на этом хостинг не нужно ее устанавливать.

Источник: Tradebenefit.ru
04.02.2017 Загрузок: 5 Просмотров: 1378 Комментарий: (10)

Поделиться в социальных сетях

Материал разместил

Комментарий: 10
Kosten
Kosten 04.02.2017 19:221
0
Здесь вы сами можете написать, или открыть, или продолжение, смотря на ваше усмотрение.

tsakonter
tsakonter 04.02.2017 19:292
0
Так у системы идет своя библиотека, или здесь не в этом случай, так как от гугл.
Сафрон
Сафрон 04.02.2017 19:313
0
Здесь забыли написать, что можно под темные сайты поставить, там же идет обвод color:#f1f1f1, который можно сменить, он как раз на текст будет.
Kosten
Kosten 04.02.2017 19:444
0
waak, здесь нужно обязательно библиотеку подключать, то постоянно вижу, что пишут, оно по умолчанию на сайте есть, ну типа подходит.
waak
waak 04.02.2017 20:445
+1
Если она уже подключена на сайте то нет не обязательно
Kosten
Kosten 04.02.2017 21:137
0
waak, от души, просто догадывался сам, но нужно было утвердить свои предположение.) В материале по этому поводу указал в заметке.
FeStemBer
FeStemBer 04.02.2017 21:056
0
Так это нужно в материале написать, то начнут устанавливать.
avatar
vortexweb 03.04.2017 19:368
0
Говно скрипт, поддерживает только 1 тогл а если дополняешь пару тройку открывает все.
Tergran
Tergran 03.04.2017 19:569
0
Подключи нормально, так как сделан для одного блока.
avatar
vortexweb 29.04.2017 11:3010
0
Уже нашел нормальный, толково написанный и сделанный сразу для нормального ипользование а не демо версию.
avatar