ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Скрипт открытие закрытие блока на сайте

Скрипт открытие закрытие блока на сайте

Скрипт открытие закрытие блока на сайте
Это простой способ открытие и закрытие блога, который работает на JS. Который будет работать без библиотеки и переключать функцию. Здесь написана функция openblock, где заключается ее работа, это передавать id блоку, который как раз отвечает за открытие и также аналогично на закрытие. По своей работе не чем не отличается от этого материала, просто немного по другому сделан, это с применением библиотеке, что для кого важно не исключаю.

Здесь к примеру создали ссылку и также краткое описание на HTML кодах под основную работу открытия закрытия блока, и здесь соединим ей на событие onclick под работающий функционал. Как можно посмотреть, здесь все довольно просто, вам нужно прописать свой материал и есть редактирование под название, почему бы просто не написать "Далее" и также все будет понятно.

Приступаем к установке:

Код
<script>  
  function openblock(idblock){
if (document.getElementById(idblock).style.display == "none"){
/*Если свойство display равно none*/
  document.getElementById(idblock).style.display="block"; // переключаем свойство в block  
}
else{
/*Если свойство display не равно none*/
  document.getElementById(idblock).style.display="none"; // переключаем свойство в none
}
}
</script>

<a href="#" onclick="openblock('i1')">Открыть/закрыть на сайте ZORNET.RU</a>
  <div id="i1" style="display:none;"> <div align="center">Здесь вы можете скрывать текст статьи или описание, которое будет вашем материале, А также прикрепить изображение к нему.

<img border="0" align="absmiddle" src="http://zornet.ru/ZORNET/drental/OohSq3Z.png"></div> </div>


PS - в коде сделал отступы, это для того, чтоб понимали, где вы можете ставить описание свое или материал, там описание и еще картинка установлено для наглядности.

Посмотреть можете на Демонстраций как работает в реальности.
04 Февраля 2017 Просмотров: 2604 Комментариев: (24)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

Оставь свой отзыв

Комментарии: 24
FeStemBer
FeStemBer 04 Февраля 2017 21:041
0
Этот скрипт намного меньше и без библиотеки и работает также если судить по DEMO, что то напоминает как модальное окно по заполнению его информацией.
Kosten
Kosten 04 Февраля 2017 21:152
0
Там просто дописал, в материале похожем, который в статье на ссылку установлен. Там на конструктор не нужно библиотеку устанавливать, она должна по умолчанию уже быть.
Советник
Советник 04 Февраля 2017 21:233
0
Смодальным окном здесь не чего схожего, а так всегда пригодится.
steadrad
steadrad 04 Февраля 2017 21:284
0
Код
<script type="text/javascript">
$(document).ready(function(){$("#dos").click(function(){$("div#dos").show("slow"); $("div#user").hide("slow");});});
$(document).ready(function(){$("#bac").click(function(){$("div#user").show("slow"); $("div#dos").hide("slow");});});
</script>
Kosten
Kosten 04 Февраля 2017 21:335
0
А можете подробно описать для чего скрипт.
steadrad
steadrad 04 Февраля 2017 21:356
+1
Пример: мини профиль.
Kosten
Kosten 04 Февраля 2017 21:368
0
Но можно написать мини профиль и спрятать его, и от этого место больше будет.
Kosten
Kosten 04 Февраля 2017 21:357
0
Здесь же все равно нужно добавлять к скрипту.

Код
<a href="#" onclick="openblock('i1')">Открыть/закрыть</a>
  <div id="i1" style="display:none;"><img src="http://wemarus.ru/templates/ja_helio.v1.2.0/images/logo.gif" alt="Блог строго компьютера"></div>
csretven
csretven 04 Февраля 2017 21:489
0
А как на счет загрузки, сильно будет грузит сайт или не заметит.
steadrad
steadrad 04 Февраля 2017 21:5210
+1
Не совсем спрятать мини профиль Кнопка панель управления красиво открывает.

Kosten
Kosten 04 Февраля 2017 21:5711
0
Понятно, просто сделано под кнопку, а можно полный скрипт, который с кнопкой идет.
steadrad
steadrad 04 Февраля 2017 22:0112
0
Под спойлером выложил в предыдущем сообщении.
1 2 »
Войдите:
avatar