21.04.11

Показати/сховати DIV з допомогою Jquery

Невеликий приклад як зробити скрипт з використанням Jquery який показує чи ховає div. Для початку нам потрібно поставити саме посилання на Google Jquery, а далі просто функція яка ховає або показує наш div з id’ішкою slidingDiv. Наш div буде рухатись по вертикалі, якщо вам потрібно щоб він рухався в горизонтальній площині то ‘height’ замініть на ‘width’. Також вставляємо час за який він має заховатись, в нашім випадку це 1 сек.


Сам JavaScript:




І HTML:
Show/hide
Fill this space with really interesting content that you can hide




Буде цікавіше якщо ми будемо натискати не на текс “Показати/Сховати” а на картинку яка буде мінятись відносно того відкритий div чи закритий. Для цього ми трішки проміняємо наш код.

JavaScript:

HTML:
Текст...

В даному випадку в якості посиланя в нас є div з класом 'button' і коли ми на нього натискаєм то клас міняється на 'button_up'.
  • rss
  • Del.icio.us
  • Digg
  • Twitter
  • StumbleUpon
  • Reddit
  • Share this on Technorati
  • Post this to Myspace
  • Share this on Blinklist
  • Submit this to DesignFloat

0 коментар(ів):

Дописати коментар

 
Copyright 2011 St@sDesign