Скрипт за сгъване на съдържание на клик, Webmaster’s Cabinet - Създаване и поддръжка на сайтове
Днес ще научим как да свиваме съдържание при щракване върху заглавката (или бутона). Нека създадем прост jQuery скрипт за това.
Основното предимство на нашия скрипт ще бъде, че е универсален. Като го вмъкнете веднъж в страницата, можете да добавяте такива блокове толкова пъти, колкото искате, където трябва да свиете съдържанието. И като щракнете върху заглавието - желаното ще се свие!
Първо, нека създадем html маркирането:
Тук няма нищо особено. Родителският елемент е .block. Заглавието h1 с класа .extremum-click, върху който ще кликнем, и самото съдържание с класа .extremum-slide, който ще се свие и разшири.
Сега нека зададем стиловете за по-добро визуално възприемане на нашия пример:
И сега най-интересното - нашият скрипт:
Това е всичко - толкова прост скрипт! Единственото условие е скриптът да бъде поставен в края на страницата. Не забравяйте, че това е JQuery, което означава, че първо трябва да включите нова библиотека! Какво има в сценария? Щраквайки върху елемент с клас .extremum-click, трябва да скриете блока .extremum-slide, който е на 1-во ниво с .extremum-click (точно този, върху който е направен клик - това е необходимо, за да можете да добавите няколко блока към 1 страница). Скорост на сгъване/разгъване - ниска (600 ms). Можете да го промените на бързо (200 ms) или да зададете стойността в милисекунди. Наслади се!