28 октября 2013


Для начала необходимо подключить библиотеку к ваше странице.

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

HTML

<div class="moder">  
<div id="show_link" onclick="dip('#mp$ID$');return false;"></div>  
<div style="display:none;" id="mp$ID$" class="moder_a"> 
  Контент 
</div> 
</div> 

Вариант №1

В данном решении элементы открытия и закрытия разные. Здесь тег с индификатором hide_link можно стилизовать под кнопку закрытия в виде крестика.

JS

 
  $(function(){ 
  $('#show_link').click(function(){ 
  $('#mp$ID$').show("normal"); 
  }) 
  $('#hide_link').click(function(){ 
  $('#mp$ID$').hide("normal"); 
  }) 
  })

Вариант №2

В данном решении функиця открытия и закрытия происходит при нажатии на один и тот же элемент. Плавная анмация происходит в виде сворачивания по вертикали.

JS

 
  function dip (mp$ID$)  
  {  
  if ($(mp$ID$).css('display') == 'none')  
  {  
  $(mp$ID$).animate({height: 'show'}, 500);  
  }  
  else  
  {  
  $(mp$ID$).animate({height: 'hide'}, 500);  
  }}

Вариант №3

Данное решение похоже на предыдущее, отличается анимацией, которая происходит в виде сворачивания по горизонтали.

JS

 
  function dip (mp$ID$)  
  {  
  if ($(mp$ID$).css('display') == 'none')  
  {  
  $(mp$ID$).animate({width: 'show'}, 500);  
  }  
  else  
  {  
  $(mp$ID$).animate({width: 'hide'}, 500);  
  }}

Вариант №4

В данном случае при нажатии кнопки происходит плавное открытие или скрывание блока с контентом.

JS

 
  function dip (mp$ID$) 
  {  
  if ($(mp$ID$).css('display') == 'none')  
  {  
  $(mp$ID$).show("normal"); 
  }  
  else  
  {  
  $(mp$ID$).hide("normal"); 
  }}
Теги: скрипт