• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Скрипт открыть/закрыть блок
Скрипт открыть/закрыть блок
workman
Среда, 03 Февраля 2016 | Сообщение 1
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Данный скрипт ставим на страницах где будут работать блоки между head
Код
<script>
    $(document).ready(function(){
  $('.show_form').click(function(){
   $(this).next('.hide_content').show(100);
   $(this).hide(100);
   
   return false;
  });
  
  $('.back').click(function(){
   $(this).parents('.hide_content').hide(100).prev('.show_form').show(100);
   return false;
  });
    });
</script>
Это ставим в стили CSS
Код
.hide_content {
    display: none;
}
Ну а это по месту Открыть форму 1
Код
<div class="hide_content">
    <img src="http://6.firepic.org/6/images/2016-02/03/tywr8uh1mrio.jpg" border="0"><br><br>
    <a href="#" class="back">закрыть спойлер</a>
</div>
<br>
<a href="#" class="show_form">Открыть форму 2</a>
<div class="hide_content">
    <img src="http://6.firepic.org/6/images/2016-02/03/6gety6d40nw8.jpg" border="0"><br><br>
    <a href="#" class="back">закрыть спойлер</a>
</div>
<br>
<a href="#" class="show_form">Открыть форму 3</a>
<div class="hide_content">
    <img src="http://6.firepic.org/6/images/2016-02/03/5v0c57o5yz43.jpg" border="0"><br><br>
    <a href="#" class="back">закрыть спойлер</a>

Для тех кто дружит с кодами и стилями может реализовать данное под себя.
Ссылок можно напихать сколько угодно на ваше усмотрение
Посмотреть пример демо можно по ссылке
Страна: (RU)
Nikas
Среда, 03 Февраля 2016 | Сообщение 2
Оффлайн
Проверенные
Сообщений:229
Награды: 3
круто было бы если-бы куки подключить)

вот тоже пример:

Код
<style type='text/css'>
.headline {border: 0px solid #000000; cursor: pointer; width: 150px; text-align: left;}
.hidden {display: none; border: 0px solid #000000; text-align: center; margin-top: 0px;}
</style>
<script type="text/javascript">
  function show(ele) {
      var srcElement = document.getElementById(ele);
      if(srcElement != null) {
          if(srcElement.style.display == "block") {
            srcElement.style.display= 'none';
          }
          else {
            srcElement.style.display='block';
          }
      }
  }
</script>
<!--  -->
<div class="headline" onclick="show('cat1')"><p style="text-align: left;"><img class="alignleft" src="http://..." alt="Узнать больше" width="15" height="15"/>Узнать больше</p></div>
<!--  -->
<div class="hidden" id="cat1">
<!--ТЕКСТ БЛОКА-->
</div>


Сообщение отредактировал
Dixes - Среда, 03 Февраля 2016, 01:12
Страна: (UA)
workman
Среда, 03 Февраля 2016 | Сообщение 3
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Цитата Dixes ()
круто было бы если-бы куки подключить)
А зачем? Ссылки то и так закрытыми стоят ... Это же своего рода спойлер. Или поясни для чего именно нужно ??
Страна: (RU)
workman
Среда, 03 Февраля 2016 | Сообщение 4
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Или в чем проблема то ?? Добавь в скрипт куки
Код
function getCookie(name) {
var matches = document.cookie.match(new RegExp(
"(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
));
return matches ? decodeURIComponent(matches[1]) : undefined;
}
!getCookie('rem') && window.setTimeout(function() {
var date = new Date(new Date().getTime() + 7 * 24 * 60 * 60 * 1000);
document.cookie = "rem=yes; path=/; expires=" + date.toUTCString();
d.classList.toggle("show_form");
window.setTimeout(function() {
d.classList.contains("show_form") && d.classList.toggle("show_form")
},5000) //open
},5000) //pause
});


Сообщение отредактировал
workman - Среда, 03 Февраля 2016, 01:18
Страна: (RU)
workman
Среда, 03 Февраля 2016 | Сообщение 5
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Dixes, Ну да. Тоже как вариант но вот только ссылка не исчезает песочник
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Скрипт открыть/закрыть блок
  • Страница 1 из 1
  • 1
Поиск: