Створюємо акордеон для сайту, xozblog - уроки і статті по створенню сайту, блогу
- за допомогою jQuery;
- за допомогою CSS3;
- за допомогою HTML5.
Якщо Ви ще не стикалися з таким елементом на сайті, то це обов'язково станеться рано чи пізно. Насправді дуже проста концепція, яка вимагає невеликого скрипта для функціонування. Акордеони, як правило, використовується для організації додаткової інформації. Ви можете використовувати акордеон як:
- меню з випадають підпунктами;
- відповіді на питання (FAQ сторінку).
Насправді застосувань можна знайти багато. Таким чином мета даної статті розглянути три способи створення акордеона. Почнемо з самого вірного способу, вірного в тому сенсі, що працювати буде у всіх браузерах.
Спосіб 1: jQuery
Базова розмітка HTML і CSS стилі
Тема 1
Тут знаходиться контент.
Тема 2
Тут знаходиться контент.
Тема 3
Тут знаходиться контент.
Тут знаходиться контент.
h2 # 123;
color. # 002850; font-size. 30px; font-weight. normal;
padding. 45px 0 15px; cursor. pointer;
# 125;
.accordion # 123;
border. 1px solid #ddd; border-top. none; margin. 10px 0;
float. left; width. 470px; position. relative;
# 125;
.accordion a # 123;
display. block; text-decoration. none;
# 125;
.accordion h2. accordion a # 123;
background-color. #fff;
background-image. url # 40; gradient.jpg # 41; ;
background-image. -moz-linear-gradient # 40; bottom. # F1f1f1. #fff # 41; ;
background-image. -ms-linear-gradient # 40; bottom. # F1f1f1. #fff # 41; ;
background-image. -o-linear-gradient # 40; bottom. # F1f1f1. #fff # 41; ;
background-image. -webkit-linear-gradient # 40; bottom. # F1f1f1. #fff # 41; ;
background-image. linear-gradient # 40; bottom. # F1f1f1. #fff # 41; ;
border-top. 1px solid #ddd;
color. # 222; font. 14px / 30px 'Verdana'. sans-serif;
height. 30px; margin. 0; padding. 0; text-indent. 10px;
# 125;
p # 123;
color. # 555; font. 12px / 18px 'Verdana'. sans-serif;
padding. 20px 10px;
# 125;
За допомогою цих правил створюємо загальні для всіх способів, основні стилі «кнопки» акордеона. В якості фону використовується CSS3 градієнт, само собою в старих браузерах працювати не буде, тому має сенс підстрахуватися фоновим зображенням.
Найважливіший момент - jQuery:
$ # 40; document # 41 ;. ready # 40; function # 40; # 41; # 123;
$ # 40; '# Accordion-js' # 41 ;. find # 40; 'H2' # 41 ;. click # 40; function # 40; # 41; # 123;
$ # 40; this # 41 ;. next # 40; # 41 ;. stop # 40; # 41 ;. slideToggle # 40; # 41; ;
# 125; # 41 ;. next # 40; # 41 ;. stop # 40; # 41 ;. hide # 40; # 41; ;
# 125; # 41; ;
Завдяки селектору знаходимо по id контейнер accordion-js. а в ньому елемент h2. Відстежуємо клік по цьому елементу і методом .next () вибираємо наступний елемент після h2. в нашому випадку параграф p. і відкриваємо або приховуємо його після другого клацання.
Спосіб 2: CSS3
розмітка HTML
Тут знаходиться контент.
Тут знаходиться контент.
h2 # 123;
color. # 002850; font-size. 30px; font-weight. normal;
padding. 45px 0 15px; cursor. pointer;
# 125;
.accordion # 123;
border. 1px solid #ddd; border-top. none; margin. 10px 0;
float. left; width. 470px; position. relative;
# 125;
.accordion a # 123;
display. block; text-decoration. none;
# 125;
.accordion h2. accordion a # 123;
background-color. #fff;
background-image. url # 40; gradient.jpg # 41; ;
background-image. -moz-linear-gradient # 40; bottom. # F1f1f1. #fff # 41; ;
background-image. -ms-linear-gradient # 40; bottom. # F1f1f1. #fff # 41; ;
background-image. -o-linear-gradient # 40; bottom. # F1f1f1. #fff # 41; ;
background-image. -webkit-linear-gradient # 40; bottom. # F1f1f1. #fff # 41; ;
background-image. linear-gradient # 40; bottom. # F1f1f1. #fff # 41; ;
border-top. 1px solid #ddd;
color. # 222; font. 14px / 30px 'Verdana'. sans-serif;
height. 30px; margin. 0; padding. 0; text-indent. 10px;
# 125;
p # 123;
color. # 555; font. 12px / 18px 'Verdana'. sans-serif;
padding. 20px 10px;
# 125;
За допомогою цих правил створюємо загальні для всіх способів, основні стилі «кнопки» акордеона. В якості фону використовується CSS3 градієнт, само собою в старих браузерах працювати не буде, тому має сенс підстрахуватися фоновим зображенням.
Найважливіший момент - jQuery:
$ # 40; document # 41 ;. ready # 40; function # 40; # 41; # 123;
$ # 40; '# Accordion-js' # 41 ;. find # 40; 'H2' # 41 ;. click # 40; function # 40; # 41; # 123;
$ # 40; this # 41 ;. next # 40; # 41 ;. stop # 40; # 41 ;. slideToggle # 40; # 41; ;
# 125; # 41 ;. next # 40; # 41 ;. stop # 40; # 41 ;. hide # 40; # 41; ;
# 125; # 41; ;
Завдяки селектору знаходимо по id контейнер accordion-js. а в ньому елемент h2. Відстежуємо клік по цьому елементу і методом .next () вибираємо наступний елемент після h2. в нашому випадку параграф p. і відкриваємо або приховуємо його після другого клацання.