WEB-нотатки - записник он-лайн

Випадаючий текст на jQuery

Для початку на сторінці має бути підключена бібліотека jQuery.

Далі додамо стилі для випадаючого блоку, наприклад:

Code

#panel {
  background: #0099FF;
  color: #FFFFFF;
  height: 200px;
  width: 400px;
  padding: 5px;
  display: none;
}
.btn-slide {
  background: #CCCCCC;
  color: #0066FF;
}
.active {
  background: #FFFF99;
}

Ставимо посилання, яке буде відкривати текст по кліку, в необхідне вам місце:

Code

<a href="javascript://" class="btn-slide">Натисни на мене</a>

Тепер сам скрипт:

Code

І код блоку, який і буде відкриватися:

Code

<div id="panel">
текст, текст, текст.......
</div>

Все разом виглядатиме приблизно ось так:

Code

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<style type="text/css">
#panel {
  background: #0099FF;
  color: #FFFFFF;
  height: 200px;
  width: 400px;
  padding: 5px;
  display: none;
}
.btn-slide {
  background: #CCCCCC;
  color: #0066FF;
}
.active {
  background: #FFFF99;
}
</style>
</head>

<body>
<a href="" class="btn-slide">Натисни на мене</a>

<script type="text/javascript">
$(document).ready(function(){
  $(".btn-slide").click(function(){
  $("#panel").slideToggle("slow");
  $(this).toggleClass("active"); return false;
  });
});
</script>

<div id="panel">
текст, текст, текст.....
</div>

</body>
</html>

Приклад: ДЕМО