ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ jquery: ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ (ΡΠ°Π±Ρ) Π½Π° jQuery
Π‘ΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅
ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ ΠΌΠ΅Π½Ρ Π½Π° jQuery | Frontips.ru
ΠΠ°ΠΏΠΈΡΠ΅ΠΌ ΠΏΡΠΎΡΡΠΎΠ΅ ΠΈ ΡΠ½ΠΈΠ²Π΅ΡΡΠ°Π»ΡΠ½ΠΎΠ΅ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ ΠΌΠ΅Π½Ρ Π½Π° jQuery
extension
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur blanditiis doloribus odio, voluptas vero perferendis assumenda quaerat rem quibusdam repudiandae eaque sed sapiente officia expedita eligendi, minima iste libero impedit natus maxime fugit totam! Expedita, rerum necessitatibus sint adipisci architecto harum, sequi perferendis voluptatum temporibus ipsa nam dignissimos iure minus.
Consectetur blanditiis doloribus odio, voluptas vero perferendis assumenda quaerat rem quibusdam repudiandae eaque sed sapiente officia expedita eligendi, minima iste libero impedit natus maxime fugit totam! Expedita, rerum necessitatibus sint adipisci architecto harum, sequi perferendis voluptatum temporibus ipsa nam dignissimos iure minus.
fingerprint
Rerum necessitatibus
Consectetur blanditiis doloribus odio, voluptas vero perferendis assumenda quaerat rem quibusdam repudiandae eaque sed sapiente officia expedita eligendi
ΠΡΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ Π½Π° Codepen
Π‘ΠΎΠ·Π΄Π°ΡΠΌ HTML ΠΎΡΠ½ΠΎΠ²Ρ
ΠΡΠ½ΠΊΡΡ ΠΌΠ΅Π½Ρ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π² ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΌ Π±Π»ΠΎΠΊΠ΅ <div></div>
ΠΠ°ΠΆΠ΄ΡΠΉ ΠΏΡΠ½ΠΊΡ ΠΌΠ΅Π½Ρ <div></div>
ΠΈΠΌΠ΅Π΅Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ <div></div>
ΠΈ ΠΎΠ±Π»Π°ΡΡΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° <div></div>
<section>
<div> <!-- ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ Π±Π»ΠΎΠΊ -->
<div> <!-- Π±Π»ΠΎΠΊ ΠΏΡΠ½ΠΊΡΠ° ΠΌΠ΅Π½Ρ -->
<div> <!-- Π±Π»ΠΎΠΊ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° -->
<div><span>extension</span></div>
<div>Lorem ipsum dolor sit amet.</div>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur blanditiis doloribus odio, voluptas vero perferendis assumenda quaerat rem quibusdam repudiandae eaque sed sapiente officia expedita eligendi, minima iste libero impedit natus maxime fugit totam! Expedita, rerum necessitatibus sint adipisci architecto harum, sequi perferendis voluptatum temporibus ipsa nam dignissimos iure minus.</div> <!-- Π±Π»ΠΎΠΊ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° -->
</div>
<div>
<div>
<div><span>eco</span></div>
<div>Dolor sit amet.</div>
</div>
<div>Consectetur blanditiis doloribus odio, voluptas vero perferendis assumenda quaerat rem quibusdam repudiandae eaque sed sapiente officia expedita eligendi, minima iste libero impedit natus maxime fugit totam! Expedita, rerum necessitatibus sint adipisci architecto harum, sequi perferendis voluptatum temporibus ipsa nam dignissimos iure minus.</div>
</div>
<div>
<div>
<div><span>fingerprint</span></div>
<div>Rerum necessitatibus</div>
</div>
<div>Consectetur blanditiis doloribus odio, voluptas vero perferendis assumenda quaerat rem quibusdam repudiandae eaque sed sapiente officia expedita eligendi</div>
</div>
</div>
</section>
ΠΠΏΠΈΡΠ΅ΠΌ ΡΡΠΈΠ»ΠΈ CSS
ΠΡΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ Π°ΠΊΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΊΠ»Π°ΡΡΠ° .about-item_active
Π±Π»ΠΎΠΊΡ .about-item
Π·Π°Π΄Π°Π΄ΠΈΠΌ ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ Π΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² .about-item__head
ΠΈ .about-item__icon
.about {
padding: 60px 0;
}
.about__item:not(:last-child) {
margin-bottom: 15px;
}
.about-item__head {
background: #283845;
padding: 15px 30px;
color: #fff;
font-size: 18px;
border-radius: 8px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; /* ΠΎΡΠΊΠ»ΡΡΠ°Π΅ΠΌ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π½Π° Π±Π»ΠΎΠΊ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° */
display: flex;
align-items: center;
transition: 0.3s ease;
}
.about-item__head:hover {
background: #24323e;
}
.about-item__title {
font-weight: 700;
}
.about-item__icon {
margin-right: 15px;
line-height: 1;
transition: 0.3s ease;
}
.about-item__body {
padding: 30px;
font-size: 16px;
background: #fff;
border-radius: 8px;
color: #283845;
display: none;
margin-top: 10px;
}
.about-item_active .about-item__head {
background: #22303b; /* Π² Π°ΠΊΡΠΈΠ²Π½ΠΎΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ Π±Π»ΠΎΠΊΠ° .about__item ΡΠΎΠ½ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° .about-item__head ΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ²Π΅Ρ */
}
.about-item_active .about-item__icon {
color: #8cb369; /* Π² Π°ΠΊΡΠΈΠ²Π½ΠΎΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ Π±Π»ΠΎΠΊΠ° .about__item ΠΈΠΊΠΎΠ½ΠΊΠ° .about-item__icon ΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ²Π΅Ρ */
}
ΠΠΈΡΠ΅ΠΌ jQuery ΠΊΠΎΠ΄
jQuery ΠΊΠΎΠ΄ Ρ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΡΠΌΠΈ
$(document).ready(function(){ // DOM Π³ΠΎΡΠΎΠ² Π΄Π»Ρ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ Ρ Π½ΠΈΠΌ
function accordion(parentSelector, itemSelector, itemActiveClass, headSelector, contentSelector, duration) { // ΠΎΠ±ΡΡΠ²Π»ΡΠ΅ΠΌ ΡΡΠ½ΠΊΡΠΈΡ ΠΈ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅ΠΌ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ
let locked = false // ΠΎΠ±ΡΡΠ²Π»ΡΠ΅ΠΌ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ Π΄Π»Ρ Π±Π»ΠΎΠΊΠΈΡΠΎΠ²ΠΊΠΈ ΠΊΠ»ΠΈΠΊΠ° ΠΏΡΠΈ Π°ΠΊΡΠΈΠ²Π½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ
$(parentSelector).click(function(e){ // ΠΏΡΠΈ ΠΊΠ»ΠΈΠΊΠ΅ Π½Π° ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ Π±Π»ΠΎΠΊ, ΡΠ΅Π»Π΅ΠΊΡΠΎΡ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΏΠ΅ΡΠ΅Π΄Π°Π΅ΠΌ ΠΏΠ΅ΡΠ²ΡΠΌ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠΌ (parentSelector)
const target = $(e.target) // Π·Π°ΠΏΠΈΡΡΠ²Π°Π΅ΠΌ Π² ΠΊΠΎΠ½ΡΡΠ°Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Π³Π΄Π΅ Π±ΡΠ» ΠΊΠ»ΠΈΠΊ
const item = target.closest(itemSelector) // ΠΈΡΠ΅ΠΌ Π±Π»ΠΈΠΆΠ°ΠΉΡΠΈΠΉ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ Π±Π»ΠΎΠΊ, Π³Π΄Π΅ Π±ΡΠ» ΠΊΠ»ΠΈΠΊ, ΠΏΠΎ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠ΅ΡΠ΅Π΄Π°Π΅ΠΌ Π²ΡΠΎΡΡΠΌ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠΌ (itemSelector)
const itemHead = item.find(headSelector) // ΠΈΡΠ΅ΠΌ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ (4ΠΉ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ) Π² Π±Π»ΠΎΠΊΠ΅, Π³Π΄Π΅ Π±ΡΠ» ΠΊΠ»ΠΈΠΊ
const itemContent = item.find(contentSelector) // ΠΈΡΠ΅ΠΌ Π±Π»ΠΎΠΊ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° Π² Π±Π»ΠΎΠΊΠ΅ (5ΠΉ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ), Π³Π΄Π΅ Π±ΡΠ» ΠΊΠ»ΠΈΠΊ
const siblings = item.siblings() // ΠΈΡΠ΅ΠΌ ΡΠΎΡΠ΅Π΄Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠΈ, ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ Π½Π° ΡΠΎΠΌ ΠΆΠ΅ ΡΡΠΎΠ²Π½Π΅, ΡΡΠΎ ΠΈ Π±Π»ΠΎΠΊ, Π³Π΄Π΅ Π±ΡΠ» ΠΊΠ»ΠΈΠΊ
const siblingsContent = siblings.find(contentSelector) // ΠΈΡΠ΅ΠΌ Π±Π»ΠΎΠΊ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°(5ΠΉ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ) Ρ ΡΠΎΡΠ΅Π΄ΡΠΊΠΈΡ
Π±Π»ΠΎΠΊΠΎΠ²
if (!target.closest(headSelector).length) return // Π΅ΡΠ»ΠΈ ΠΊΠ»ΠΈΠΊ Π±ΡΠ» Π½Π΅ Π½Π° Π±Π»ΠΎΠΊΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°, ΠΏΡΠ΅ΡΡΠ²Π°Π΅ΠΌ ΡΡΠ½ΠΊΡΠΈΡ, ΡΠΎ Π΅ΡΡΡ Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅ Π΄Π΅Π»Π°Π΅ΠΌ
if (locked) return // Π΅ΡΠ»ΠΈ ΠΊΠ»ΠΈΠΊ Π·Π°Π±Π»ΠΎΠΊΠΈΡΠΎΠ²Π°Π½, ΡΠΎΠΆΠ΅ ΠΏΡΠ΅ΡΡΠ²Π°Π΅ΠΌ ΡΡΠ½ΠΊΡΠΈΡ
if (!item.hasClass(itemActiveClass)) { // Π΅ΡΠ»ΠΈ Π±Π»ΠΎΠΊ, Π³Π΄Π΅ Π±ΡΠ» ΠΊΠ»ΠΈΠΊ, Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ Π°ΠΊΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΊΠ»Π°ΡΡΠ°
locked = true // Π±Π»ΠΎΠΊΠΈΡΡΠ΅ΠΌ ΠΊΠ»ΠΈΠΊ
siblings.removeClass(itemActiveClass) // ΡΠ΄Π°Π»ΡΠ΅ΠΌ Ρ ΡΠΎΡΠ΅Π΄ΡΠΊΠΈΡ
Π±Π»ΠΎΠΊΠΎΠ² Π°ΠΊΡΠΈΠ²Π½ΡΠΉ ΠΊΠ»Π°ΡΡ
siblingsContent.slideUp(duration) // ΡΠ²ΠΎΡΠ°ΡΠΈΠ²Π°Π΅ΠΌ Π±Π»ΠΎΠΊ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° Ρ ΡΠΎΡΠ΅Π΄ΡΠΊΠΈΡ
Π±Π»ΠΎΠΊΠΎΠ² (6 ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ - duration - ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΡΠ½ΠΎΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ)
item.addClass(itemActiveClass) // Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ Π°ΠΊΡΠΈΠ²Π½ΡΠΉ ΠΊΠ»Π°ΡΡ Π±Π»ΠΎΠΊΡ, Π³Π΄Π΅ Π±ΡΠ» ΠΊΠ»ΠΈΠΊ
itemContent.slideDown(duration, function(){ // ΡΠ°Π·Π²ΠΎΡΠ°ΡΠΈΠ²Π°Π΅ΠΌ Π±Π»ΠΎΠΊ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° Ρ Π±Π»ΠΎΠΊΠ°, Π³Π΄Π΅ Π±ΡΠ» ΠΊΠ»ΠΈΠΊ, ΠΏΠΎΡΠ»Π΅ ΠΎΠΊΠΎΠ½ΡΠ°Π½ΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π·Π°ΠΏΡΡΠΊΠ°Π΅ΠΌ Π΄ΡΡΠ³ΡΡ ΡΡΠ½ΠΊΡΠΈΡ, ΡΡΠΎΠ±Ρ ΡΠ½ΡΡΡ Π±Π»ΠΎΠΊΠΈΡΠΎΠ²ΠΊΡ ΠΊΠ»ΠΈΠΊΠ°
locked = false
})
} else { // Π΅ΡΠ»ΠΈ Π±Π»ΠΎΠΊ, Π³Π΄Π΅ Π±ΡΠ» ΠΊΠ»ΠΈΠΊ, ΠΈΠΌΠ΅Π΅Ρ Π°ΠΊΡΠΈΠ²Π½ΡΠΉ ΠΊΠ»Π°ΡΡ
locked = true // Π±Π»ΠΎΠΊΠΈΡΡΠ΅ΠΌ ΠΊΠ»ΠΈΠΊ
item.removeClass(itemActiveClass) // ΡΠ΄Π°Π»ΡΠ΅ΠΌ Π°ΠΊΡΠΈΠ²Π½ΡΠΉ ΠΊΠ»Π°ΡΡ Π±Π»ΠΎΠΊΡ, Π³Π΄Π΅ Π±ΡΠ» ΠΊΠ»ΠΈΠΊ
itemContent.slideUp(duration, function(){ // ΡΠ²ΠΎΡΠ°ΡΠΈΠ²Π°Π΅ΠΌ Π±Π»ΠΎΠΊ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° Ρ Π±Π»ΠΎΠΊΠ°, Π³Π΄Π΅ Π±ΡΠ» ΠΊΠ»ΠΈΠΊ, ΠΏΠΎΡΠ»Π΅ ΠΎΠΊΠΎΠ½ΡΠ°Π½ΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π·Π°ΠΏΡΡΠΊΠ°Π΅ΠΌ Π΄ΡΡΠ³ΡΡ ΡΡΠ½ΠΊΡΠΈΡ, ΡΡΠΎΠ±Ρ ΡΠ½ΡΡΡ Π±Π»ΠΎΠΊΠΈΡΠΎΠ²ΠΊΡ ΠΊΠ»ΠΈΠΊΠ°
locked = false
})
}
})
}
accordion('.about-items', '.about-item', 'about-item_active', '.about-item__head', '.about-item__body', 300) // Π·Π°ΠΏΡΡΠΊΠ°Π΅ΠΌ ΡΡΠ½ΠΊΡΠΈΡ Ρ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ°ΠΌΠΈ
accordion('.briefly-cards', '.briefly-card', 'briefly-card_active', '.briefly-card__head', '.briefly-card__text', 600) // Π΅ΡΠ»ΠΈ Π±ΡΠ΄ΡΡ Π΅ΡΠ΅ ΠΏΠΎΡ
ΠΎΠΆΠΈΠ΅ ΠΌΠ΅Π½Ρ, Π½ΠΎ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ Π½Π°Π·Π²Π°Π½ΠΈΡΠΌΠΈ ΠΊΠ»Π°ΡΡΠΎΠ², ΡΠΎ Π·Π°ΠΏΡΡΠΊΠ°Π΅ΠΌ ΡΡΡ ΠΆΠ΅ ΡΠ°ΠΌΡΡ ΡΡΠ½ΠΊΡΠΈΡ, ΠΏΠ΅ΡΠ΅Π΄Π°Π²Π°Ρ Π΅ΠΉ ΠΏΡΠΎΡΡΠΎ Π΄ΡΡΠ³ΠΈΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ
})
ΠΠ΅ΡΠ΅Π΄Π°Π²Π°Π΅ΠΌΡΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ
- parentSelector — ΡΠ΅Π»Π΅ΠΊΡΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° —
'.about-items'
- itemSelector — ΡΠ΅Π»Π΅ΠΊΡΠΎΡ Π±Π»ΠΎΠΊΠ° ΠΏΡΠ½ΠΊΡΠ° ΠΌΠ΅Π½Ρ —
'.about-item'
- itemActiveClass — Π°ΠΊΡΠΈΠ²Π½ΡΠΉ ΠΊΠ»Π°ΡΡ Π±Π»ΠΎΠΊΠ° ΠΏΡΠ½ΠΊΡΠ° ΠΌΠ΅Π½Ρ —
'about-item_active'
- headSelector — ΡΠ΅Π»Π΅ΠΊΡΠΎΡ Π±Π»ΠΎΠΊΠ° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° —
'.about-item__head'
- contentSelector — ΡΠ΅Π»Π΅ΠΊΡΠΎΡ Π±Π»ΠΎΠΊΠ° ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° —
'.about-item__body'
- duration — ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΡΠ°Π·Π²ΠΎΡΠ°ΡΠΈΠ²Π°Π½ΠΈΡ/ΡΠ²ΠΎΡΠ°ΡΠΈΠ²Π°Π½ΠΈΡ Π±Π»ΠΎΠΊΠ° ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° — 300
ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ Π½ΡΠ°Π½ΡΠΎΠ²
- ΠΠ»ΠΎΠΊΠΈΡΠΎΠ²ΠΊΠ° ΠΊΠ»ΠΈΠΊΠ° Π½ΡΠΆΠ½Π° Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΏΡΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠΊΡΠ°ΡΠ½ΠΎΠΌ ΠΊΠ»ΠΈΠΊΠ΅ Π½Π° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π½Π΅ Π·Π°ΠΏΡΡΠΊΠ°Π»Π°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π·. ΠΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π·Π°ΠΏΡΡΠΊΠ°Π΅ΡΡΡ, Π±Π»ΠΎΠΊΠΈΡΡΠ΅ΠΌ ΠΊΠ»ΠΈΠΊ, ΠΊΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π·Π°ΠΊΠ°Π½ΡΠΈΠ²Π°Π΅ΡΡΡ, ΡΠ½ΠΈΠΌΠ°Π΅ΠΌ Π±Π»ΠΎΠΊΠΈΡΠΎΠ²ΠΊΡ
- ΠΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΠΏΠ΅ΡΠ΅Π΄Π°Π΅ΠΌ Π² ΡΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅ Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΎΠ½ΠΈ Π·Π°ΠΏΠΈΡΠ°Π½Ρ. Π Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΠΏΠ΅ΡΠ΅Π΄Π°Π΅ΠΌ ΡΡΡΠΎΠΊΠ°ΠΌΠΈ Π² ΠΊΠ°Π²ΡΡΠΊΠ°Ρ
. ΠΡΠ»ΠΈ ΡΡΠΎ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ, Π½Π΅ Π·Π°Π±ΡΠ²Π°Π΅ΠΌ ΡΡΠ°Π²ΠΈΡΡ ΡΠΎΡΠΊΡ (
'.about-item'
). ΠΡΠ»ΠΈ ΡΡΠΎ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΊΠ»Π°ΡΡΠ°, ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ Π±Π΅Π· ΡΠΎΡΠΊΠΈ ('about-item_active'
) - ΠΠΎΡΠ»Π΅Π΄Π½ΠΈΠΌ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠΌ ΠΏΠ΅ΡΠ΅Π΄Π°Π΅ΠΌ ΡΠΈΡΠ»ΠΎ Π±Π΅Π· ΠΊΠ°Π²ΡΡΠ΅ΠΊ — ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΡΠ°Π·Π²ΠΎΡΠ°ΡΠΈΠ²Π°Π½ΠΈΡ/ΡΠ²ΠΎΡΠ°ΡΠΈΠ²Π°Π½ΠΈΡ Π±Π»ΠΎΠΊΠ° ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°
ΠΠΎΠ»Π΅Π·Π½ΡΠ΅ ΡΡΡΠ»ΠΊΠΈ
ΠΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ Π³ΠΎΡΠΎΠ²Π½ΠΎΡΡΠΈ Π΄Π΅ΡΠ΅Π²Π° DOM — .ready()
ΠΠ±ΡΠ΅ΠΊΡ event — function(e){}
ΠΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΠΈ ΠΊΠΎΠ½ΡΡΠ°Π½ΡΡ — let ΠΈ const
ΠΠ»ΠΈΠΆΠ°ΠΉΡΠΈΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΠΈΠΉ ΠΏΡΠ΅Π΄ΠΎΠΊ — .closest()
ΠΠΎΠΈΡΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²Π½ΡΡΡΠΈ Π²ΡΠ±ΡΠ°Π½Π½ΡΡ — .find()
ΠΠΎΠΈΡΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π»Π΅ΠΆΠ°ΡΠΈΡ Π½Π° ΠΎΠ΄Π½ΠΎΠΌ ΡΡΠΎΠ²Π½Π΅ — .siblings()
ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΊΠ»Π°ΡΡΠ° — .addClass()
Π£Π΄Π°Π»Π΅Π½ΠΈΠ΅ ΠΊΠ»Π°ΡΡΠ° — .removeClass()
Π Π°Π·Π²ΠΎΡΠ°ΡΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈ ΡΠ²ΠΎΡΠ°ΡΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² — .slideDown() .slideUp()
ΠΡΠΎΡΡΠΎΠΉ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ Π΄Π»Ρ ΡΠ°ΠΉΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ jQuery
ΠΡΠΌΠ°Ρ Π½Π΅ ΡΠ°Π· ΠΡ Π²ΡΡΡΠ΅ΡΠ°Π»ΠΈ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΠΉ ΡΡΡΠ΅ΠΊΡ Π½Π° ΡΠ°ΠΉΡΠ°Ρ , ΡΡΠΎ Π²Π΅ΡΡΠΌΠ° ΡΠ΄ΠΎΠ±Π½ΠΎ, Π²Π΅Π΄Ρ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΡΠΊΠΎΠ½ΠΎΠΌΠΈΡΡ ΠΌΠ΅ΡΡΠΎ, ΠΏΡΠΈ ΡΡΠΎΠΌ Π½Π΅ ΠΎΡΠ²Π»Π΅ΠΊΠ°ΡΡ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠ΅ΠΉ, ΠΊΠΎΡΠΎΡΠ°Ρ Π΅ΠΌΡ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²ΠΎΠΎΠ±ΡΠ΅ Π½Π΅ ΠΏΡΠΈΠ³ΠΎΠ΄ΠΈΡΡΡ. Π Π΄Π°Π½Π½ΠΎΠΌ ΡΡΠΎΠΊΠ΅ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΏΡΠΎΡΡΠΎΠΉ ΡΡΡΠ΅ΠΊΡ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π° Π΄Π»Ρ ΡΠ°ΠΉΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ΄Π΅Ρ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΠΎΠ±ΡΠ°Π½ ΠΈ ΡΠΊΡΡΡ, Π½ΠΎ ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ ΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΡΠ°Π·Π΄Π²ΠΈΠ³Π°ΡΡΡΡ ΠΈ Π½Π΅ΡΡΠΈ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Ρ ΡΠ΅Π»Π΅Π²ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ. Π’Π°ΠΊΠΈΠ΅ ΡΠΏΠΎΠΉΠ»Π΅ΡΡ Π±ΡΠ΄ΡΡ ΡΠ΄ΠΎΠ±Π½Ρ Π½Π° ΡΠ°ΠΉΡΠ°Ρ , Π³Π΄Π΅ ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΠΈ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΎΠ½Π° Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ.
Β
ΠΠ½ΠΎΠ³ΠΎ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΡ ΡΠ°Π±Π»ΠΎΠ½ΠΎΠ² Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΠΉΡΠΈ Π½Π° ΡΠ°ΠΉΡΠ΅ Π½Π°ΡΠΈΡ ΠΏΠ°ΡΡΠ½Π΅ΡΠΎΠ², ΡΠ°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅ΡΡΡΡ ΠΈ ΠΏΡΠ΅ΠΌΠΈΡΠΌ ΡΠ°Π±Π»ΠΎΠ½Ρ Ρ ΠΊΡΡΠ³Π»ΠΎΡΡΡΠΎΡΠ½ΠΎΠΉ ΡΠ΅Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΎΠΉ ΠΈ ΠΏΠΎΠΌΠΎΡΡΡ Π² Π½Π°ΡΡΡΠΎΠΉΠΊΠ΅:
Π£ Π½Π°Ρ Π±ΡΠ΄Π΅Ρ ΡΠ΅ΡΡΡΠ΅ Π±Π»ΠΎΠΊΠ°, ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· ΠΊΠΎΡΠΎΡΡΡ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ ΠΈ ΠΏΠ»ΡΡΠΎΠΌ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΠ½ΡΠΎΡΠΌΠΈΡΡΠ΅Ρ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ Ρ Π½Π°Ρ ΡΠΊΡΡΡΠ° Π½Π΅ΠΊΠ°Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ, ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈΒ ΠΊΡΡΡΠΎΡΠΎΠΌ, ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΡΠ°Π·Π²ΠΎΡΠ°ΡΠΈΠ²Π°ΡΡΡΡ, ΠΏΡΠΈ ΡΡΠΎ Π°ΠΊΡΠΈΠ²Π½ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠΈΠ²Π°ΡΡΡΡ, ΠΈ ΡΠ°ΠΊ, Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΡΠΈΡΡΡΠΏΠΈΠΌ.
Π¨Π°Π³ 1.Β HTML
Π Π°Π·ΠΌΠ΅ΡΠΊΠ° Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΡΡΠ°, Ρ Π½Π°Ρ Π±ΡΠ΄Π΅Ρ ΠΎΠ±ΡΠΈΠΉ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π±ΡΠ΄Π΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡΡΡ Π²ΡΡ Π½Π°ΡΠ° ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ°, Π΄Π»Ρ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΈ ΠΌΡ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π½Π°ΡΠ΅ΠΉ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π°:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <div> <h3>ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ</h3> <div> <a href=»#»> Π’Π΅ΠΊΡΡ <i></i> </a> <div> <p>Π’Π΅ΠΊΡΡ</p> </div> </div> <div> <a href=»#»> Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ <i></i> </a> <div> <p> Π’Π΅ΠΊΡΡ.</p> </div> </div> <div> <a href=»#»> ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ <i></i> </a> </div> |
ΠΠ°ΡΠ΅ΠΌ Ρ Π½Π°Ρ Π±ΡΠ΄Π΅Ρ ΠΊΠ»Π°ΡΡΒ setΒ ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ΄Π΅Ρ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ°ΡΡ Π½Π°Ρ ΠΎΠ΄ΠΈΠ½ ΠΏΠΎΠ΄Π²ΠΈΠ΄ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, Π² Π½Π΅Π³ΠΎ ΠΌΡ ΠΏΠΎΠ³ΡΡΠΆΠ°Π΅ΠΌ ΠΊΠ»Π°ΡΡΒ contentΒ Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π±ΡΠ΄Π΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡΡΡ Π²ΡΠ΅ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ Π² Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π΅.
Π¨Π°Π³ 2.Β CSS
Π’Π΅ΠΏΠ΅ΡΡ Π²ΡΠ΅ ΡΡΠΎ Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ, Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ Π½Π°ΠΌ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΏΡΠΎΡΡΡΡ ΠΏΡΠ°Π²ΠΈΠ», Π² ΠΊΠΎΡΠΎΡΡΡ ΠΌΡ ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ ΡΡΠΈΠ»ΠΈΠ·ΡΠ΅ΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ-Β accordion-container, Π·Π°ΡΠ΅ΠΌ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Ρ Π½Π°Ρ Π±ΡΠ΄ΡΡ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ°ΡΡΡΡ h3:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | .accordion-container{ position: relative; width: 500px; height: auto; margin: 20px auto; } .accordion-container > h3{ text-align: center; color: #fff; padding-bottom: 5px; margin-bottom: 30px; border-bottom: 1px solid #ddd; } .set{ position: relative; width: 100%; height: auto; background-color: #f5f5f5; } .set > a{ display: block; padding: 10px 15px; text-decoration: none; color: #555; font-weight: 600; border-bottom: 1px solid #ddd; -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; transition:all 0.2s linear; } .set > a i{ position:relative; float: right; margin-top:4px; color: #666; } .set > a.active{ background-color:#3399cc; color: #fff; } .set > a.active i{ color: #fff; } .content{ position:relative; width: 100%; height: auto; background-color: #fff; border-bottom: 1px solid #ddd; display:none; } .content p{ padding: 10px 15px; margin: 0; color: #333; } |
ΠΠ°ΡΠ΅ΠΌ ΠΌΡ ΡΡΠΈΠ»ΠΈΠ·ΡΠ΅ΠΌ ΡΠ°ΠΌ Π±Π»ΠΎΠΊ, ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ Π½Π°ΡΠ΅Π³ΠΎ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π°, ΠΎΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ Π΄Π»Ρ ΠΊΠ»Π°ΡΡΠ°Β setΒ Ρ Π½Π°Ρ Π±ΡΠ΄Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π°ΠΊΡΠΈΠ²Π½ΠΎΠ΅ ΠΈ ΠΏΠ°ΡΡΠΈΠ²Π½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅, ΡΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ Π½Π°ΠΌ Π²ΡΠ΄Π΅Π»ΡΡΡ Π²ΡΠ±ΡΠ°Π½Π½ΡΠΉ Π½Π°ΠΌΠΈ ΠΏΡΠ½ΠΊΡ.
Π¨Π°Π³ 3. JS
Π’Π΅ΠΏΠ΅ΡΡ Π²ΡΡ Π½Π°ΡΡ Π·Π°Π΄ΡΠΌΠΊΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΠΆΠΈΠ²ΠΈΡΡ, Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΡΠΎΡΠ΅ΠΊ ΡΠΊΡΠΈΠΏΡΠ°, Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΡΠΎΡΡΡ ΠΌΡ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠΌ ΡΠ°Π±ΠΎΡΠΎΡΠΏΠΎΡΠΎΠ±Π½ΠΎΡΡΡ Π°ΠΊΡΠΈΠ²Π½ΡΡ ΠΈ ΠΏΠ°ΡΡΠΈΠ²Π½ΡΡ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ, Π° ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΠΈΠΊΠΎΠ½ΠΊΡ Β«ΠΏΠ»ΡΡΒ» ΠΈ Β«ΠΌΠΈΠ½ΡΡΒ»:
$(document).ready(function(){ $(«.set > a»).on(«click», function(){ if($(this).hasClass(‘active’)){ $(this).removeClass(«active»); $(this).siblings(‘.content’).slideUp(200); $(«.set > a i»).removeClass(«fa-minus»).addClass(«fa-plus»); }else{ $(«.set > a i»).removeClass(«fa-minus»).addClass(«fa-plus»); $(this).find(«i»).removeClass(«fa-plus»).addClass(«fa-minus»); $(«.set > a»).removeClass(«active»); $(this).addClass(«active»); $(‘.content’).slideUp(200); $(this).siblings(‘.content’).slideDown(200); } }); }); |
Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΠΌΡ ΠΏΠΎΠ»ΡΡΠ°Π΅ΠΌ Π·Π°ΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½, ΠΊΠΎΡΠΎΡΡΠΉ Π»Π΅Π³ΠΊΠΎ Π²Π½Π΅Π΄ΡΠΈΡΡ Π½Π° ΡΠ°ΠΉΡ ΠΈ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΏΡΠΎΡΡΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΏΠΎΠ΄ ΡΠ²ΠΎΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΠ°ΠΉΡΠ°.
ΠΠΎΡ ΠΈ Π²ΡΠ΅. ΠΠΎΡΠΎΠ²ΠΎ!
Π§ΠΈΡΠ°ΠΉΡΠ΅ ΡΠ°ΠΊΠΆΠ΅:
ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ jquery Β· GitHub
ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ jquery Β· GitHub
Instantly share code, notes, and snippets.
ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ jquery
// Accordeon jquery | |
$(«.js-faq-title»).on(«click», function(e) { // .on ΠΏΡΠΈcΠΎΠ΅Π΄ΠΈΠ½ΡΠ΅Ρ Π΄Π»Ρ Π²ΡΠ±ΡΠ°Π½Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΡΠ½ΠΊΡΠΈΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ° ΡΠΎΠ±ΡΡΠΈΡ | |
e.preventDefault(); // ΠΎΡΠΌΠ΅Π½Π° ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΡ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡ ΡΡΡΠ»ΠΎΠΊ | |
var $this = $(this); // $this — ΡΡΠΎ ΠΏΠ΅ΡΠΌΠ΅Π½Π½Π°Ρ // this — ΡΡΠΎ ΡΡΡΠ»ΠΊΠ° Π½Π° ΠΎΠ±ΡΠ΅ΠΊΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ» Π²ΡΠ±ΡΠ°Π½ -> («.js-faq-title») | |
if (!$this.hasClass(«active»)) { | |
$(«.js-faq-content»).slideUp(); // .slideUp() ΠΏΠ»Π°Π²Π½ΠΎ ΡΠΊΡΡΠ²Π°Π΅Ρ Π²ΡΠ±ΡΠ°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ | |
$(«.js-faq-title»).removeClass(«active»); // .removeClass() ΡΠ΄Π°Π»ΡΠ΅Ρ ΠΎΠ΄ΠΈΠ½ ΠΈΠ»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΈΠΌΠ΅Π½ ΠΊΠ»Π°ΡΡΠΎΠ² Π΄Π»Ρ Π²ΡΠ±ΡΠ°Π½Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² | |
} | |
$this.toggleClass(«active»); // .toggleClass() Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ ΠΈΠ»ΠΈ ΡΠ΄Π°Π»ΡΠ΅Ρ ΠΎΠ΄ΠΈΠ½, ΠΈΠ»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΊΠ»Π°ΡΡΠΎΠ² ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ Π²ΡΠ±ΡΠ°Π½Π½ΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ | |
$this.next().slideToggle(); // .slideToggle() ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΠ»Π°Π²Π½ΠΎ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ ΠΈΠ»ΠΈ ΡΠΊΡΡΡΡ Π²ΡΠ±ΡΠ°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΊΠΎΠ»ΡΠ·ΡΡΠΈΠΌ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ΠΌ | |
}); | |
// Accordeon Pug | |
.faq__item | |
a(href=’#’).faq-title.js-faq-title Question 1 // .js-faq-title Π΄Π»Ρ ΠΎΡΠ»Π°Π²Π»ΡΠ²Π°Π½ΠΈΡ ΠΊΠ»ΠΈΠΊΠΎΠ² | |
.faq-content.js-faq-content // .js-faq-content Π΄Π»Ρ ΠΎΡΠ»Π°Π²Π»ΡΠ²Π°Π½ΠΈΡ ΠΊΠ»ΠΈΠΊΠΎΠ² | |
p Lorem ipsum dolor sit amet | |
// Accordeon sass | |
.js-faq-content | |
display: none |
You canβt perform that action at this time.
You signed in with another tab or window. Reload to refresh your session.
You signed out in another tab or window. Reload to refresh your session.
Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ Β» Π‘ΠΊΡΠΈΠΏΡΡ Π΄Π»Ρ ΡΠ°ΠΉΡΠΎΠ²
13 586
Π‘ΠΊΡΠΈΠΏΡΡ / Accordion
ΠΠ΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ accordion ΠΌΠ΅Π½Ρ
ΠΠ΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ½ΠΎΠ³ΠΎΡΡΠΎΠ²Π½Π΅Π²ΠΎΠ΅ ΠΌΠ΅Π½Ρ ΡΠΈΠΏΠ° Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½, ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π΅ΡΡ ΠΏΠΎ ΠΊΠ»ΠΈΠΊΡ Π½Π° ΡΡΡΠ΅Π»ΠΊΠ΅. Β
5 038
Π‘ΠΊΡΠΈΠΏΡΡ / Accordion
Flat accordion menu — Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½
ΠΠ΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π΅ΡΡ ΠΌΠ΅Π½Ρ ΡΠΈΠΏΠ° Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ Π² ΡΡΠΈΠ»Π΅ flat design. ΠΡΠΎΡΡΠΎΠ΅ Π² ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠΈ ΠΈ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ.
4 586
Π‘ΠΊΡΠΈΠΏΡΡ / Accordion
Akordeon — ΠΏΠ»Π°Π³ΠΈΠ½ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π°
Akordeon — jQuery ΠΏΠ»Π°Π³ΠΈΠ½ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡΠΈΠΉ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ ΡΡΠΈΠ»ΡΠ½ΠΎ ΠΎΡΠΎΡΠΌΠ»Π΅Π½Π½ΡΠΉ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½. ΠΠΎΠ»Π½ΠΎΡΡΡΡ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΠΉ Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ ΠΎΠ±ΡΠ΅ΠΌΠ° ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ Π² ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΠΎΠΌ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π΅.
5 036
Π‘ΠΊΡΠΈΠΏΡΡ / Menu & Nav
ΠΠ΅Π½Ρ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ Π½Π° CSS3
ΠΠ΅Π½Ρ Π² ΡΡΠΈΠ»Π΅ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π° ΡΠ΄Π΅Π»Π°Π½Π½ΠΎΠ΅ Π½Π° CSS3 Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΊ ΠΏΡΠ½ΠΊΡΠ°ΠΌ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ.
5 419
Π‘ΠΊΡΠΈΠΏΡΡ / Accordion
ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ Π½Π° CSS3
Π’ΠΈΠΏΠΈΡΠ½ΡΠΉ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½, Π½ΠΎ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠΎΠ»ΡΠΊΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS3 ΡΠ²ΠΎΠΉΡΡΠ².
6 667
Π‘ΠΊΡΠΈΠΏΡΡ / Accordion
Π‘ΠΏΠΎΠΉΠ»Π΅Ρ — spoiler
Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ toggleClass Π°ΡΡΠΈΠ±ΡΡ jquery Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠΏΠΎΠΉΠ»Π΅ΡΠ° ΠΈΠ»ΠΈ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π°.
3 506
Π‘ΠΊΡΠΈΠΏΡΡ / Accordion
ΠΠΈΠ±ΠΊΠΈΠΉ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½
Π‘ΠΎΠ·Π΄Π°Π΄ΠΈΠΌ ΠΏΡΠΎΡΡΠΎΠΉ Π±ΡΡΡΡΠΎΡΠ΅Π°Π³ΠΈΡΡΡΡΠΈΠΉ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠΈ ΡΠ°ΡΠΊΡΡΡΠΈΠΈ Π±ΡΠ΄Π΅Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ ΠΊ Π²Π΅ΡΡ Π½Π΅ΠΉ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. Π’Π°ΠΊΠΆΠ΅ Π±ΡΠ΄Π΅Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΎΠ² CSS3 Π΄Π»Ρ ΡΡΡΠ΅Π»ΠΊΠΈ. ΠΠΈΠ±ΠΊΠΎΡΡΡ Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΡΠΈΡΠΈΠ½Π° Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π° Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ΄ΡΡΡΠ°ΠΈΠ²Π°ΡΡΡΡ ΠΏΠΎΠ΄ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠΊΡΠ°Π½Π°.
2 629
Π‘ΠΊΡΠΈΠΏΡΡ / Slider
Slidorion — ΡΠ»Π°ΠΉΠ΄Π΅Ρ ΠΈ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ Π² ΠΎΠ΄Π½ΠΎΠΌ
ΠΠ°Π½Π½ΡΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ Π΄Π»Ρ jquery ΡΠΎΠ²ΠΌΠ΅ΡΠ°Π΅Ρ Π² ΡΠ΅Π±Π΅ ΠΈ ΡΠ»Π°ΠΉΠ΄Π΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ ΠΈΠ· ΠΎΠΏΠΈΡΠ°Π½ΠΈΡ ΠΊ Π½ΠΈΠΌ.
4 302
Π‘ΠΊΡΠΈΠΏΡΡ / Accordion
ΠΡΡΠ΅ΠΊΡ ΡΠ°Π·Π΄Π²ΠΈΠΆΠ½ΡΡ ΡΡΠΎΡΠΎΠΊ
ΠΠΎΡ ΠΎΠΆΠ΅ Π½Π° Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ — ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ, ΠΊΠ°ΠΊ Π±Ρ ΡΠ°Π·Π΄Π²ΠΈΠ³Π°Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠΊ ΠΈ ΠΌΡ Π²ΠΈΠ΄ΠΈΠΌ ΠΏΠΎΠ»Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅.
2 232
Π‘ΠΊΡΠΈΠΏΡΡ / Slider
ΠΠ΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ ΡΠ°Π·Π΄Π²ΠΈΠΆΠ½ΠΎΠΉ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½
Π ΡΡΠΎΠΉ ΡΡΠΎΠΊΠ΅ ΡΠ΅ΡΡ ΠΏΠΎΠΉΠ΄Π΅Ρ ΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΌ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π΅ Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΡ ΡΠ»Π°ΠΉΠ΄Π΅ΡΠ° ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ ΠΆΠ΅ Π½Π° jQuery. ΠΡΡΠΎΡΠ΅ΠΊ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π° ΡΠ°Π·Π΄Π²ΠΈΠ³Π°Π΅ΡΡΡ ΠΏΡΠΈ ΠΊΠ»ΠΈΠΊΠ΅ ΠΈ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ ΡΠ΅ΠΊΡΡ, Π° Π΄ΡΡΠ³ΠΈΠ΅ ΠΊΡΡΠΎΡΠΊΠΈ ΡΡΠ°Π½ΡΡ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½Π΅Π΅ ΠΈ ΡΠΎΠΆΠΌΡΡΡΡ. ΠΠ΅ΡΠ΅Ρ ΠΎΠ΄ ΠΊ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌΡ ΡΠ»Π°ΠΉΠ΄Ρ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΡΠ΅Π»ΠΎΡΠ΅ΠΊ ΠΈΠ»ΠΈ ΠΆΠ΅ ΠΊΠΎΠ»Π΅ΡΠΈΠΊΠΎΠΌ ΠΌΡΡΠΊΠΈ (ΠΏΠ»Π°Π³ΠΈΠ½ jQuery Mousewheel ΠΎΡ Brandon Aaron).
3 164
Π‘ΠΊΡΠΈΠΏΡΡ / Accordion
ΠΠ»Π°Π³ΠΈΠ½ zAccordion — ΡΠ»Π°ΠΉΠ΄Π΅Ρ
ΠΡΠΎΡΡΠΎΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ zAccordion — ΡΠ»Π°ΠΉΠ΄Π΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. ΠΠ°ΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½ΠΎ Π²ΠΏΠΈΡΠ΅ΡΡΡ Π² Π»ΡΠ±ΠΎΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΠ°ΠΉΡΠ°.
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ»Π΅Π³Π°Π½ΡΠ½ΡΠΉ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ Ρ JQUERY ΠΈ CSS3
Π‘Π΅Π³ΠΎΠ΄Π½Ρ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠ»Π΅Π³Π°Π½ΡΠ½ΡΠΉ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ Π΄Π»Ρ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°. ΠΠ΄Π΅Ρ ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎΠ±Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΡ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ Ρ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ ΡΠ°Π·Π΄Π²ΠΈΠ³Π°Π»ΠΈΡΡ Π² ΡΡΠΎΡΠΎΠ½Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΎΠ΄Π½Ρ ΠΈΠ·Β Π½ΠΈΡ ΠΊΡΡΡΠΎΡΠΎΠΌ ΠΌΡΡΠΈ. ΠΠ»Ρ ΡΠ»ΡΡΡΠ΅Π½ΠΈΡ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ Π²ΠΈΠ΄Π° Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π° Π±ΡΠ΄ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° CSS3. ΠΠ°Π²Π°ΠΉΡΠ΅Β ΠΏΡΠΈΡΡΡΠΏΠΈΠΌ!
Β
Β
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΠΆΠ°ΡΡ Π½Π° ΡΡΡΠ»ΠΊΡ ΠΏΠΎΠ΄ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π΄Π»Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Π΄Π΅ΠΌΠΎΒ ΠΈΠ»ΠΈ ΠΆΠ΅ Π΄Π»Ρ ΡΠΊΠ°ΡΠΈΠ²Π°Π½ΠΈΡ ΠΈΡΡ ΠΎΠ΄Π½ΡΡ Β Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠ².
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β ΠΠ΅ΠΌΠΎΒ Β Β Β Β Β Β Β ΠΠ°Π³ΡΡΠ·ΠΈΡΡΒ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Ρ
ΠΠ°ΡΠ½Π΅ΠΌ Π² ΠΏΠ΅ΡΠ²ΡΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ ΡΒ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ.
Π ΠΠΠΠΠ’ΠΠ
HTML Π±ΡΠ΄Π΅Ρ ΡΠΎΡΡΠΎΡΡΡ ΠΈΠ· ΡΠΏΠΈΡΠΊΠ°, Π³Π΄Π΅ ΠΊΠ°ΠΆΠ΄Π°Ρ Π²ΠΊΠ»Π°Π΄ΠΊΠ° Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π°Β β ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΏΠΈΡΠΊΠ°. ΠΠ½ΡΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠΏΠΈΡΠΊΠ° Π±ΡΠ΄Π΅Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΡΡΠ΅Π·Π°Π΅Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ Π±ΡΠ΄Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π΄Π»Ρ ΡΠΎΠ½Π° Ρ Π±Π΅Π»ΡΠΌ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠΎΠΌ ΠΈ Π±Π»ΠΎΠΊ Π΄Π»ΡΒ ΠΎΠΏΠΈΡΠ°Π½ΠΈΡ.
<ul> <li> <div>Heading</div> <div></div> <div> <h3>Heading</h3> <p>Some descriptive text</p> <a href="#">more ?</a> </div> </li> </ul>
ΠΡΡΠ°Π»ΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π±ΡΠ΄ΡΡ ΠΈΠΌΠ΅ΡΡ ΠΊΠ»Π°ΡΡΡ bg2, bg3 ΠΈΒ bg4. ΠΠ΅ΡΠΏΠΎΡΡΠ΄ΠΎΡΠ΅Π½Π½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ ΠΏΠΎΠ»ΡΡΠ°Π΅Ρ ΠΊΠ»Π°ΡΡ ΠΈ id, ΡΠ°ΠΊ ΠΊΠ°ΠΊΒ ΠΌΡ Π±ΡΠ΄Π΅Ρ Π² Π΄Π°Π»ΡΠ½Π΅ΠΉΡΠ΅ΠΌ ΠΎΠ±ΡΠ°ΡΠ°ΡΡΡΡ ΠΊ Π½Π΅ΠΌΡ Π²Β JavaScript.
CSS
Π‘ΡΠΈΠ»ΠΈ Π΄Π»Ρ ΡΠΏΠΈΡΠΊΠ° Π±ΡΠ΄ΡΡΒ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌΠΈ:
ul.accordion{ list-style:none; position:absolute; right:80px; top:0px; font-family: Cambria, serif; font-size: 16px; font-style: italic; line-height: 1.5em; }
ΠΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΏΠΈΡΠΊΠ° Π±ΡΠ΄ΡΡ ΠΈΠΌΠ΅ΡΡ ΡΠ°Π·Π½ΠΎΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ ΠΏΠΎΡΡΠΎΠΌΡ Π² ΠΏΠ΅ΡΠ²ΡΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ Π·Π°Π΄Π°Π΄ΠΈΠΌ ΠΎΠ±ΡΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΡΠΈΠ»Ρ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°Β ΡΠΏΠΈΡΠΊΠ°:
ul.accordion li{ float:right; width:115px; height:480px; display:block; border-right:2px solid #fff; border-bottom:2px solid #fff; background-color:#fff; background-repeat:no-repeat; background-position:center center; position:relative; overflow:hidden; cursor:pointer; -moz-box-shadow:1px 3px 15px #555; -webkit-box-shadow:1px 3px 15px #555; box-shadow:1px 3px 15px #555; } ul.accordion li.bg1{ background-image:url(../images/1.jpg); } ul.accordion li.bg2{ background-image:url(../images/2.jpg); } ul.accordion li.bg3{ background-image:url(../images/3.jpg); } ul.accordion li.bg4{ background-image:url(../images/4.jpg); }
ΠΡΠΌΠ΅ΡΠΈΠΌ, ΡΡΠΎ box shadow Π½Π΅ Π±ΡΠ΄Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π²Β IE.
ΠΠ°ΡΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΏΡΠ½ΠΊΡΠ° Π±ΡΠ΄Π΅Ρ 115 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. Π JavaScript ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΎ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π΄ΠΎΒ 480px.
ΠΡΠ°Π½ΠΈΡΠ° Π²ΠΎΠΊΡΡΠ³ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½Π° ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΠΎΠ΄Π½ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π² ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Ρ Π½Π°ΡΒ Π±Ρ ΠΏΠΎΠ»ΡΡΠ°Π»Π°ΡΡ Π΄Π²ΠΎΠΉΠ½Π°Ρ ΡΠ°ΠΌΠΊΠ° ΠΌΠ΅ΠΆΠ΄Ρ ΠΏΡΠ½ΠΊΡΠ°ΠΌΠΈ ΠΈ ΠΎΠ΄ΠΈΠ½Π°ΡΠ½Π°Ρ ΡΠ°ΠΌΠΊΠ° Π½Π° Π²Π½Π΅ΡΠ½ΠΈΡ Π³ΡΠ°Π½ΠΈΡΠ°Ρ . ΠΡΠΆΠ½ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΠΊΠ»Π°ΡΡ Π΄Π»Ρ Π»Π΅Π²ΠΎΠΉ Π³ΡΠ°Π½ΠΈΡΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ΄Π΅ΠΌ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ Π΄Π»Ρ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠΏΠΈΡΠΊΠ° (ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠ»Π°Π²Π°ΡΡ ΡΠΏΡΠ°Π²Π°, ΠΏΠΎΡΡΠΎΠΌΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΡΡΠΈΠ»ΠΈ Π±ΡΠ΄Π΅ΠΌ Π² ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠΌΒ ΠΏΠΎΡΡΠ΄ΠΊΠ΅):
ul.accordion li.bleft{ border-left:2px solid #fff; }
Π’Π΅ΠΏΠ΅ΡΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡΠΈΠ΄Π°ΡΡ Ρ ΠΎΡΠΎΡΠΈΠΉ Π²ΠΈΠ΄ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΡ Ρ Π±Π΅Π»ΡΠΌ ΠΏΠΎΠ»ΡΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΡΠΌ ΡΠΎΠ½ΠΎΠΌ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠΏΠΈΡΠΊΠ° ΠΏΡΠΈ Β«Π·Π°ΠΌΠΊΠ½ΡΡΠΎΠΌΒ» ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈΒ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π°:
ul.accordion li .heading{ background-color:#fff; padding:10px; margin-top:60px; opacity:0.9; text-transform:uppercase; font-style:normal; font-weight:bold; letter-spacing:1px; font-size:14px; color:#444; text-align:center; text-shadow:-1px -1px 1px #ccc; }
ΠΠ»ΠΎΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅, Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌΒ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
ul.accordion li .description{ position:absolute; width:480px; height:175px; bottom:0px; left:0px; display:none; }
Π‘Π½Π°ΡΠ°Π»Π° ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠΌ display:none, ΡΠ°ΠΊ ΠΊΠ°ΠΊΒ ΠΌΡ Ρ ΠΎΡΠΈΠΌ, ΡΡΠΎΠ± ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΡΠ²Π»ΡΠ»ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. ΠΠΎΡ ΡΡΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΈΡ Β ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²:
ul.accordion li .description h3{ text-transform:uppercase; font-style:normal; font-weight:bold; letter-spacing:1px; font-size:45px; color:#444; text-align:left; margin:0px 0px 15px 20px; text-shadow:-1px -1px 1px #ccc; } ul.accordion li .description p{ line-height:14px; margin:10px 22px; font-family: "Trebuchet MS", sans-serif; font-size: 12px; font-style: italic; font-weight: normal; text-transform: none; letter-spacing: normal; line-height: 1.6em; } ul.accordion li .description a{ position:absolute; bottom:5px; left:20px; text-transform:uppercase; font-style:normal; font-size:11px; text-decoration:none; color:#888; } ul.accordion li .description a:hover{ color:#333; text-decoration:underline; }
Π‘ΡΠΈΠ»Ρ Π΄Π»ΡΒ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ°:
ul.accordion li .bgDescription{ background:transparent url(../images/bgDescription.png) repeat-x top left; height:340px; position:absolute; bottom:0px; left:0px; width:100%; display:none; }Β
JAVASCRIPT
ΠΠΎ-ΠΏΠ΅ΡΠ²ΡΡ , ΠΌΡ Π²ΠΊΠ»ΡΡΠ°Π΅ΠΌ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ jQuery ΠΏΠ΅ΡΠ΅Π΄ Π·Π°ΠΊΡΡΡΠΈΠ΅ΠΌ ΡΠ΅Π³Π°Β body:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Π’Π΅ΠΏΠ΅ΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΡΡΠ½ΠΊΡΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Π·Π°ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΏΠΈΡΠΎΠΊ ΡΠ°Π·Π΄Π²ΠΈΠ½ΡΡΡΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Π³ΠΎ ΠΌΡΡΠΈ. ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π΄ΠΎΡΡΠΈΠ³Π½ΡΡΠΎ ΠΏΡΡΠ΅ΠΌ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠ΅ ΡΠΈΡΠΈΠ½Ρ Π² 480 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. ΠΡΠΈ ΡΡΠΎΠΌ Π²Π΅ΡΡ Π½ΠΈΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΡΡΠ΅Π·Π°ΡΡ ΠΈΒ Π΅Π³ΠΎ ΠΌΠ΅ΡΡΠΎ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ (CSS ΠΊΠ»Π°ΡΡ Β«bgDescriptionΒ») ΡΒ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ΠΌ:
<script type="text/javascript"> $(function() { $('#accordion > li').hover( function () { var $this = $(this); $this.stop().animate({'width':'480px'},500); $('.heading',$this).stop(true,true).fadeOut(); $('.bgDescription',$this).stop(true,true).slideDown(500); $('.description',$this).stop(true,true).fadeIn(); }, function () { var $this = $(this); $this.stop().animate({'width':'115px'},1000); $('.heading',$this).stop(true,true).fadeIn(); $('.description',$this).stop(true,true).fadeOut(500); $('.bgDescription',$this).stop(true,true).slideUp(700); } ); }); </script>
ΠΠ΅ΡΠ²Π°Ρ ΡΡΠ½ΠΊΡΠΈΡ Π²Π½ΡΡΡΠΈ Β«$(β#accordion > liβ).hoverΒ» ΡΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π°Β Π½Π΅Π΅ ΠΊΡΡΡΠΎΡΠ°. ΠΡΠΎΡΠ°Ρ ΡΡΠ½ΠΊΡΠΈΡΒ β ΠΊΠΎΠ³Π΄Π° ΠΊΡΡΡΠΎΡ ΠΎΡΠ²ΠΎΠ΄ΠΈΡΡΡ Π² ΡΡΠΎΡΠΎΠ½Ρ. ΠΠΎΠ±Π°Π²ΠΈΠΌ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ Π·Π°Π΄Π΅ΡΠΆΠΊΠΈ, ΡΡΠΎΠ±Ρ ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄ ΠΎΡΡΡΠ΅ΡΡΠ²Π»ΡΠ»ΡΡΒ ΠΏΠ»Π°Π²Π½ΠΎ.
ΠΡΠΎ Π²ΡΠ΅! ΠΠ°Π΄Π΅Π΅ΠΌΡΡ, ΡΡΠΎ ΡΡΠΎΠΊ Π±ΡΠ» ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΌ ΠΈΒ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΌ!Β
ΠΠ²ΡΠΎΡ —Β MARYΒ LOU.
ΠΠ΅ΡΠ΅Π²ΠΎΠ΄Β βΒ ΠΠ΅ΠΆΡΡΠΊΠ°.
Π§ΠΈΡΠ°ΠΉΡΠ΅Β ΡΠ°ΠΊΠΆΠ΅:
Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ Π΄Π»Ρ ΡΠ°ΠΉΡΠ° | XoZblog
ΠΠ΄ΡΠ°Π²ΡΡΠ²ΡΠΉΡΠ΅, ΡΠ²Π°ΠΆΠ°Π΅ΠΌΡΠ΅ ΡΠΈΡΠ°ΡΠ΅Π»ΠΈ XoZbloga! Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΡΠ°Π·Π±Π΅ΡΠ΅ΠΌ 3 ΡΠΏΠΎΡΠΎΠ±Π° ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π° Π΄Π»Ρ ΡΠ°ΠΉΡΠ°:
- Ρ ΠΏΠΎΠΌΠΎΡΡΡ jQuery;
- Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS3;
- Ρ ΠΏΠΎΠΌΠΎΡΡΡ HTML5.
ΠΡΠ»ΠΈ ΠΡ Π΅ΡΠ΅ Π½Π΅ ΡΡΠ°Π»ΠΊΠΈΠ²Π°Π»ΠΈΡΡ Ρ ΡΠ°ΠΊΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ Π½Π° ΡΠ°ΠΉΡΠ΅, ΡΠΎ ΡΡΠΎ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ ΠΏΡΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ ΡΠ°Π½ΠΎ ΠΈΠ»ΠΈ ΠΏΠΎΠ·Π΄Π½ΠΎ. ΠΠ° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠ°Ρ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΡΠ΅Π±ΡΠ΅Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ ΡΠΊΡΠΈΠΏΡΠ° Π΄Π»Ρ ΡΡΠ½ΠΊΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ. ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Ρ, ΠΊΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΠΎΡΠ³Π°Π½ΠΈΠ·Π°ΡΠΈΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ ΠΊΠ°ΠΊ:
- ΠΌΠ΅Π½Ρ Ρ Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΠΌΠΈ ΠΏΠΎΠ΄ΠΏΡΠ½ΠΊΡΠ°ΠΌΠΈ;
- ΠΎΡΠ²Π΅ΡΡ Π½Π° Π²ΠΎΠΏΡΠΎΡΡ (FAQ ΡΡΡΠ°Π½ΠΈΡΡ).
ΠΠ° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠΉ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡΠΈ ΠΌΠ½ΠΎΠ³ΠΎ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΡΠ΅Π»Ρ Π΄Π°Π½Π½ΠΎΠΉ ΡΡΠ°ΡΡΠΈ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅ΡΡ ΡΡΠΈ ΡΠΏΠΎΡΠΎΠ±Π° ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π°. ΠΠ°ΡΠ½Π΅ΠΌ Ρ ΡΠ°ΠΌΠΎΠ³ΠΎ Π²Π΅ΡΠ½ΠΎΠ³ΠΎ ΡΠΏΠΎΡΠΎΠ±Π°, Π²Π΅ΡΠ½ΠΎΠ³ΠΎ Π² ΡΠΎΠΌ ΡΠΌΡΡΠ»Π΅, ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π±ΡΠ΄Π΅Ρ Π²ΠΎ Π²ΡΠ΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ .
ΠΡΠΎΡΠΌΠΎΡΡ Π΄Π΅ΠΌΠΎ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ ΡΠΊΠ°ΡΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈΡΡ ΠΎΠ΄Π½ΠΈΠΊΠΎΠ² Π½Π΅ Π΄ΠΎΡΡΡΠΏΠ½ΠΎ
Π£Π²Π°ΠΆΠ°Π΅ΠΌΡΠΉ ΡΠΈΡΠ°ΡΠ΅Π»Ρ, XoZblog ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΈ ΡΠ°Π·Π²ΠΈΠ²Π°Π΅ΡΡΡ Π·Π° ΡΡΡΡ Π΄ΠΎΡ ΠΎΠ΄ΠΎΠ² ΠΎΡ Π½Π΅Π½Π°Π²ΡΠ·ΡΠΈΠ²ΠΎΠΉ ΡΠ΅ΠΊΠ»Π°ΠΌΡ. ΠΡΠ»ΠΈ Π½Π΅ Π·Π°ΡΡΡΠ΄Π½ΠΈΡ, Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΡΠΎΡ ΡΠ°ΠΉΡ Π² ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ AdBlock. Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ Π·Π° ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅!
Π‘ΠΏΠΎΡΠΎΠ± 1: jQuery
ΠΠ°Π·ΠΎΠ²Π°Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ° HTML ΠΈ CSS ΡΡΠΈΠ»ΠΈ
1 | <div> |
ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ h3 Π±ΡΠ΄Π΅Ρ Β«ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉΒ» Π΄Π»Ρ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π°. ΠΠ»Π΅ΠΌΠ΅Π½Ρ, Π½Π° ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ Π½Π°ΠΆΠ°ΡΠΈΠ΅, ΠΈ ΠΎΡΠΊΡΡΠ²Π°ΡΡΡΡ ΡΠΊΡΡΡΡΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ. ΠΠΌΠ΅ΡΡΠΎ h3 ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π»ΡΠ±ΠΎΠΉ Π΄ΡΡΠ³ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΡΠΎ Π΅ΡΡΡ ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΏΠ°ΡΠ°Π³ΡΠ°Ρ p, ΡΡΡΠ»ΠΊΠ°, ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ div ΠΈΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. Π― ΡΡΠΈΡΠ°Ρ, ΡΡΠΎ ΡΡΠΎ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΡΠΎΠ³ΠΎ ΡΠΈΠΏΠ° Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π°.
Π‘ΡΠΈΠ»ΠΈ CSS
1 | h3 { |
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠΈΡ ΠΏΡΠ°Π²ΠΈΠ» ΡΠΎΠ·Π΄Π°Π΅ΠΌ ΠΎΠ±ΡΠΈΠ΅ Π΄Π»Ρ Π²ΡΠ΅Ρ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ², ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΡΡΠΈΠ»ΠΈ Β«ΠΊΠ½ΠΎΠΏΠΊΠΈΒ» Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π°. Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠΎΠ½Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ CSS3 Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ, ΡΠ°ΠΌΠΎ ΡΠΎΠ±ΠΎΠΉ Π² ΡΡΠ°ΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π½Π΅ Π±ΡΠ΄Π΅Ρ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΈΠΌΠ΅Π΅Ρ ΡΠΌΡΡΠ» ΠΏΠΎΠ΄ΡΡΡΠ°Ρ ΠΎΠ²Π°ΡΡΡΡ ΡΠΎΠ½ΠΎΠ²ΡΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ.
jQuery
Π‘Π°ΠΌΡΠΉ Π²Π°ΠΆΠ½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ β jQuery:
1 | $(document).ready(function(){ |
ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ Π½Π°Ρ ΠΎΠ΄ΠΈΠΌ ΠΏΠΎ id ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ accordion-js, Π° Π² Π½Π΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½Ρ h3. ΠΡΡΠ»Π΅ΠΆΠΈΠ²Π°Π΅ΠΌ ΠΊΠ»ΠΈΠΊ ΠΏΠΎ ΡΡΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠΌ .next() Π²ΡΠ±ΠΈΡΠ°Π΅ΠΌ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΡΠ»Π΅ h3, Π² Π½Π°ΡΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΏΠ°ΡΠ°Π³ΡΠ°Ρ p, ΠΈ ΠΎΡΠΊΡΡΠ²Π°Π΅ΠΌ ΠΈΠ»ΠΈ ΡΠΊΡΡΠ²Π°Π΅ΠΌ Π΅Π³ΠΎ ΠΏΠΎΡΠ»Π΅ Π²ΡΠΎΡΠΎΠ³ΠΎ ΡΠ΅Π»ΡΠΊΠ°.
Π‘ΠΏΠΎΡΠΎΠ± 2: CSS3
Π Π°Π·ΠΌΠ΅ΡΠΊΠ° HTML
1 | <div> Β Β <a href=»#accordion-1″>ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 1</a> Π§ΡΠΎ ΠΊΠ°ΡΠ°Π΅ΡΡΡ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΠ° :target. ΠΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π° ΠΊ Π²ΡΠ±ΡΠ°Π½Π½ΠΎΠΌΡ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°, Π² Π°Π΄ΡΠ΅ΡΠ΅ ΠΏΠΈΡΠ΅ΡΡΡ ΡΠΈΠΌΠ²ΠΎΠ» # ΠΈ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ ΠΈΠΌΡ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΠ°. Π ΠΏΡΠΈΠΌΠ΅ΡΡ, ΠΡ Π½Π°ΠΆΠΈΠ²Π°Π΅ΡΠ΅ Π½Π° ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 1, Π² Π°Π΄ΡΠ΅ΡΠ½ΡΡ ΡΡΡΠΎΠΊΡ ΠΏΠ΅ΡΠ΅Π΄Π°Π΅ΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π°ΡΡΠΈΠ±ΡΡΠ° href ΠΈ ΠΎΠ½Π° ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ Π²ΠΈΠ΄ index.html#accordion-1, ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π°ΡΡΠΈΠ±ΡΡ id ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π·Π°Π΄Π°Π½ ΠΊΠ°ΠΊ accordion-1. Π’Π°ΠΊΠ°Ρ Π·Π°ΠΏΠΈΡΡ Π°Π΄ΡΠ΅ΡΠ° Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ Β«ΡΠ΅Π»Π΅Π²ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½ΡΒ». ΠΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ :target ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊ ΡΠ΅Π»Π΅Π²ΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΈΠ½ΡΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ, ΠΊ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΊΠ°Π·Π°Π½ Π² Π°Π΄ΡΠ΅ΡΠ½ΠΎΠΉ ΡΡΡΠΎΠΊΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΠ°. Π‘ΠΏΠΎΡΠΎΠ± 3: HTML5Π Π°Π·ΠΌΠ΅ΡΠΊΠ° HTMLΠ― Π΄ΡΠΌΠ°Ρ, ΡΡΠΎ ΡΡΠΎ ΡΠ°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠ΄Π΅Π»Π°ΡΡ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½, ΠΈ ΡΠ°ΠΌΡΠΉ ΠΏΠ΅ΡΡΠΏΠ΅ΠΊΡΠΈΠ²Π½ΡΠΉ ΡΠ°ΠΊ ΡΠΊΠ°Π·Π°ΡΡ. ΠΠΎΡΠΎΠΌΡ ΠΊΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ Π² WebKit Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ . ΠΡΠΌΠ°Ρ Π½Π΅ ΡΡΠΎΠΈΡ ΡΠ°ΠΊ ΠΏΡΠΎΡΡΠΎ ΡΠ±ΡΠ°ΡΡΠ²Π°ΡΡ ΡΠΎ ΡΡΠ΅ΡΠΎΠ² HTML5, ΡΡΠΎ Π»ΠΈΡΡ Π²ΠΎΠΏΡΠΎΡ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ, Π²Π΅Π΄Ρ ΡΠ°Π½ΠΎ ΠΈΠ»ΠΈ ΠΏΠΎΠ·Π΄Π½ΠΎ Π²ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ Π±ΡΠ΄ΡΡ Π½Π° 100% ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ Π΅Π³ΠΎ.
Π’Π΅Π³ details ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ Ρ ΡΠ°Π½Π΅Π½ΠΈΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΡΡΡΡ ΠΈΠ»ΠΈ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ ΠΏΠΎ ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΡΠ΅Π³Π° Π½Π΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ. Π ΡΠ΅Π³ summary ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π΄Π»Ρ ΡΠ΅Π³Π° details, ΠΏΠΎ ΠΊΠΎΡΠΎΡΠΎΠΌΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΅Π»ΠΊΠ°ΡΡ Π΄Π»Ρ ΡΠ°Π·Π²ΠΎΡΠ°ΡΠΈΠ²Π°Π½ΠΈΡ/ΡΠ²ΠΎΡΠ°ΡΠΈΠ²Π°Π½ΠΈΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ. Π’Π΅Π³ summary Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠ΄ΡΠΈ ΠΏΠ΅ΡΠ²ΡΠΌ Π²Π½ΡΡΡΠΈ details. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π±ΡΠ°ΡΠ·Π΅Ρ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ ΡΡΡΠ΅Π»ΠΊΡ ΡΡΠ΄ΠΎΠΌ Ρ summary. ΠΠ·Π±Π°Π²Π»ΡΠ΅ΠΌΡΡ ΠΎΡ ΡΡΠΎΠ³ΠΎ ΡΠ°ΠΊ:
ΠΡΠΎΡΠΌΠΎΡΡ Π΄Π΅ΠΌΠΎ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ ΡΠΊΠ°ΡΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈΡΡ ΠΎΠ΄Π½ΠΈΠΊΠΎΠ² Π½Π΅ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠ£Π²Π°ΠΆΠ°Π΅ΠΌΡΠΉ ΡΠΈΡΠ°ΡΠ΅Π»Ρ, XoZblog ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΈ ΡΠ°Π·Π²ΠΈΠ²Π°Π΅ΡΡΡ Π·Π° ΡΡΡΡ Π΄ΠΎΡ ΠΎΠ΄ΠΎΠ² ΠΎΡ Π½Π΅Π½Π°Π²ΡΠ·ΡΠΈΠ²ΠΎΠΉ ΡΠ΅ΠΊΠ»Π°ΠΌΡ. ΠΡΠ»ΠΈ Π½Π΅ Π·Π°ΡΡΡΠ΄Π½ΠΈΡ, Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΡΠΎΡ ΡΠ°ΠΉΡ Π² ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ AdBlock. Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ Π·Π° ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅! P.S.: ΠΡΠ»ΠΈ Π²Ρ ΡΠ°ΠΊ ΠΆΠ΅ ΠΊΠ°ΠΊ ΠΈ Ρ Π»ΡΠ±ΠΈΡΠ΅ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΡ ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½, ΠΈ Ρ ΠΎΡΠΈΡΠ΅ ΠΏΠΎΡΡΠΎΡΠ½Π½ΠΎ ΡΠΎΠ²Π΅ΡΡΠ΅Π½ΡΡΠ²ΠΎΠ²Π°ΡΡΡΡ, ΡΠΎ Π²Π°ΠΌ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ ΡΠ»Π΅Π΄ΡΠ΅Ρ Π·Π°Π³Π»ΡΠ½ΡΡΡ Π½Π° http://webformyself.com/minikurs/webdesign/free.html ΠΈ ΠΏΠΎΠ΄ΠΏΠΈΡΠ°ΡΡΡΡ. Π£Π²Π΅ΡΠ΅Π½, ΡΡΠΎ ΡΠ·Π½Π°Π΅ΡΠ΅ ΠΌΠ½ΠΎΠ³ΠΎ Π½ΠΎΠ²ΠΎΠ³ΠΎ, ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎΠ³ΠΎ ΠΈ Π²Π΄ΠΎΡ Π½ΠΎΠ²Π»ΡΡΡΠ΅Π³ΠΎ. Π’Π°ΠΊΠΈΠ΅ Π·Π½Π°Π½ΠΈΡ Π²Π΄Π²ΠΎΠΉΠ½Π΅ ΠΏΡΠΈΡΡΠ½Π΅Π΅ ΠΏΠΎΠ»ΡΡΠ°ΡΡ ΠΎΡ ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΎΠ½Π°Π»ΠΎΠ² WebForMySelf.com. Π§ΡΠΎΠ±Ρ ΠΎΡΡΠ°Π²Π°ΡΡΡΡ Π² ΠΊΡΡΡΠ΅ ΡΠ²Π΅ΠΆΠΈΡ ΡΡΠ°ΡΠ΅ΠΉ ΠΈ ΡΡΠΎΠΊΠΎΠ² ΠΏΠΎΠ΄ΠΏΠΈΡΡΠ²Π°ΠΉΡΠ΅ΡΡ Π½Π°Β Π΅ΠΆΠ΅Π½Π΅Π΄Π΅Π»ΡΠ½ΡΡ ΠΏΠΎΡΡΠΎΠ²ΡΡ ΡΠ°ΡΡΡΠ»ΠΊΡ ΠΈΠ»ΠΈ Π½Π° Π½ΠΎΠ²ΠΎΡΡΠ½ΡΡ Π»Π΅Π½ΡΡ RSS. Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ! ΠΠ»Π°Π³ΠΈΠ½ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π° jQuery Ρ 7 ΠΏΡΠΈΠΌΠ΅ΡΠ°ΠΌΠΈΠΠ»Π°Π³ΠΈΠ½ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π° Π² jQuery UI ΠΠ»Π°Π³ΠΈΠ½ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π° ΠΎΡ jQuery UI ΠΏΠΎΡ ΠΎΠΆ Π½Π° ΠΏΠ»Π°Π³ΠΈΠ½ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠ²ΠΎΡΠ°ΡΠΈΠ²Π°ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΠ΅ ΡΠ°Π·Π΄Π΅Π»Ρ Π½Π° Π²Π°ΡΠ΅ΠΉ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΠ»Π°Π³ΠΈΠ½ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π° ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ ΠΏΠΎΠ»Π΅Π·Π΅Π½, Π΅ΡΠ»ΠΈ Ρ Π²Π°Ρ Π΅ΡΡΡ Π΄Π»ΠΈΠ½Π½Π°Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ, ΠΊΠΎΡΠΎΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°Π·Π΄Π΅Π»ΠΈΡΡ Π½Π° ΡΠ°Π·Π½ΡΠ΅ ΡΠ°Π·Π΄Π΅Π»Ρ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ ΡΠΌΠ΅Π½ΡΡΠΈΡΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π² ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π±ΡΠ΄Π΅Ρ Π·Π°Π½ΡΡΠΎ. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠ»Π°Π³ΠΈΠ½Π° jQuery — ΡΡΠΎ ΠΏΡΠΎΡΡΠΎ Π²ΠΎΠΏΡΠΎΡ Π²ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ jQuery UI ΠΈ Π²ΡΠ·ΠΎΠ²Π° Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π° Π² ΡΠ°Π·Π΄Π΅Π»Π΅ JavaScript, Π³Π΄Π΅ ΠΎΠ½ ΡΠ²ΡΠ·Π°Π½ Ρ ΡΠ°ΠΊΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ, ΠΊΠ°ΠΊ div, Π°Π±Π·Π°Ρ ΠΈ Ρ. Π.ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ΄Π΅Ρ Π΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°ΡΡ ΠΊΠ°ΠΊ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½. Π ΡΡΠΎΠΌ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π΅ Ρ ΡΠ°ΠΊΠΆΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ, ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅ΠΌΡΠ΅ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌΡΠΌ ΠΌΠΎΠ΄ΡΠ»Π΅ΠΌ jQuery UI accordion. ΠΠ»Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Ρ ΠΏΡΠΈΠΌΠ΅ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π² ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅ Π²ΠΌΠ΅ΡΡΠ΅ Ρ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΡΠΌ ΠΊΠΎΠ΄ΠΎΠΌ. ΠΠ°Π·ΠΎΠ²ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ jQuery accordion Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Ρ ΡΠΎΠ·Π΄Π°ΠΌ Π±Π°Π·ΠΎΠ²ΡΠΉ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ Ρ ΡΡΠ΅ΠΌΡ ΡΠ΅ΠΊΡΠΈΡΠΌΠΈ. Π₯ΠΎΡΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ ΡΡΠΈΠ»Ρ, ΡΡΠΎΠ±Ρ ΡΠΎΠ³Π»Π°ΡΠΎΠ²Π°ΡΡ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ Ρ ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠΉ ΡΠ΅ΠΌΠΎΠΉ ΡΠ°ΠΉΡΠ°. Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Ρ Π±ΡΠ΄Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ CSS ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΠΏΡΠΎΡΡΠΎ ΡΡΠΎΠ±Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ, ΠΊΠ°ΠΊ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½. Π‘ΠΌ. ΠΠ½Π»Π°ΠΉΠ½-Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΠΈ ΠΊΠΎΠ΄ ΠΡΠ΅ΠΆΠ΄Π΅ Π²ΡΠ΅Π³ΠΎ, Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ jQuery. ΠΠ°Π»Π΅Π΅ ΡΠ»Π΅Π΄ΡΠ΅Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° jQuery. Π₯ΠΎΡΡ ΠΌΡ Π²ΠΊΠ»ΡΡΠΈΠ»ΠΈ Π²ΡΠ΅ ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ CDN, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ²ΠΎΠΉ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ ΠΎΠ±Π»Π΅Π³ΡΠ΅Π½Π½ΡΠΉ ΡΠ°ΠΉΠ» jQuery UI JS Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°. Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π²ΠΈΠ΄ΠΆΠ΅Ρ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π°, ΠΏΠΎΡΡΠΎΠΌΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡΠ°Π»ΡΠ½ΡΡ Π·Π°Π³ΡΡΠ·ΠΊΡ, Π΅ΡΠ»ΠΈ Π²Π°ΠΌ Π½Π΅ Π½ΡΠΆΠ΅Π½ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ Π΄ΡΡΠ³ΠΎΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ, Π·Π΄Π΅ΡΡ: http://jqueryui.com/download/ ΠΠ»Π°Π²Π½ΡΠΉ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ ΡΠΎΠ·Π΄Π°Π΅ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅Π³Π° div.ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΡΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ»ΡΠ½ΡΠ΅ ΡΠ΅Π³ΠΈ Π² ΡΠ°Π·Π΄Π΅Π»Π΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°, Π³Π΄Π΅ Π² ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΡΠ΅Π³ΠΈ . ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ°ΠΌh2, h3 ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ ΡΠ΅Π³ span, ΠΎΠ΄Π½Π°ΠΊΠΎ ΡΠ±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ ΠΊΠ°ΠΆΠ΄Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΡΠΎΠ΄ΡΡΠ²Π΅Π½Π½ΠΈΠΊΠΎΠΌ ΠΏΠΎΡΠ»Π΅ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅Π³ΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°.
Π Π°Π·Π΄Π΅Π» ΡΠΊΡΠΈΠΏΡΠ° ΠΏΡΠΎΡΡΠΎ Π²ΡΠ·ΡΠ²Π°Π΅Ρ div Ρ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ΠΎΠΌ:
ΠΡΠΈΠΌΠ΅Ρ jQuery ΡΠΊΠ»Π°Π΄Π½ΠΎΠΉ Π³Π°ΡΠΌΠΎΡΠΊΠΈ Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π²ΠΈΠ΄ΠΆΠ΅ΡΠ° Β«Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Β» jQuery UI Ρ ΡΠΎΠ±ΠΈΡΠ°ΡΡΡ ΡΠΎΠ·Π΄Π°ΡΡ ΠΎΠΏΡΠΈΡ ΡΠ²ΠΎΡΠ°ΡΠΈΠ²Π°Π΅ΠΌΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ. ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π² ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠ³ΠΎ Π²ΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ°, Π³Π΄Π΅ Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ ΠΎΡΠΊΡΡΡΠ° ΠΎΠ΄Π½Π° ΠΏΠ°Π½Π΅Π»Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ. ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΎΠΏΡΠΈΡ ΡΠ²ΠΎΡΠ°ΡΠΈΠ²Π°Π½ΠΈΡ ΠΊΠ°ΠΊ true , Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΡΠΊΡΡΠ²Π°ΡΡ ΠΈ Π·Π°ΠΊΡΡΠ²Π°ΡΡ ΠΏΠ°Π½Π΅Π»Ρ, ΡΠ΅Π»ΠΊΠ°Ρ ΠΏΠΎ Π½Π΅ΠΉ. ΠΡΠΈ ΡΡΠΎΠΌ Π²ΡΠ΅ ΠΏΠ°Π½Π΅Π»ΠΈ ΡΠΎΠΆΠ΅ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ Π·Π°ΠΊΡΡΡΡ. ΠΡΠΎΡΡΠΎ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΡΡ ΡΡΡΠΎΠΊΡ Π² ΡΠ°Π·Π΄Π΅Π» ΡΡΠ΅Π½Π°ΡΠΈΡ ΠΊ ΠΏΠ΅ΡΠ²ΠΎΠΌΡ ΠΏΡΠΈΠΌΠ΅ΡΡ: ΠΈΠ»ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ ΠΏΡΠΈΠΌΠ΅Ρ Π² Π΄Π΅ΠΉΡΡΠ²ΠΈΠΈ, ΡΠ΅Π»ΠΊΠ½ΡΠ² ΡΡΡΠ»ΠΊΡ Π½ΠΈΠΆΠ΅: Π‘ΠΌ. ΠΠ½Π»Π°ΠΉΠ½-Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΠΈ ΠΊΠΎΠ΄ ΠΠΎΠ΄ jQuery: CSS Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π°:
ΠΡΠΈΠΌΠ΅Ρ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π° Ρ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΠΌ CSS Π¦Π²Π΅ΡΠΎΠ²Π°Ρ ΡΡ Π΅ΠΌΠ° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΏΠ»Π°Π³ΠΈΠ½Π° jQuery UI Π΄Π»Ρ Accordion — ΡΠ΅ΡΠΎΠ²Π°ΡΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ°. ΠΠ΄Π½Π°ΠΊΠΎ Π΄Π»Ρ ΡΠ²ΠΎΠΈΡ Π²Π΅Π±-ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ² Π²Ρ Π·Π°Ρ ΠΎΡΠΈΡΠ΅ ΡΠΎΠΏΠΎΡΡΠ°Π²ΠΈΡΡ Π΅Π³ΠΎ Ρ ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠΉ ΡΠ΅ΠΌΠΎΠΉ ΡΠ°ΠΉΡΠ°. Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Ρ ΠΏΠΎΠΊΠ°ΠΆΡ Π²Π°ΠΌ, ΠΊΠ°ΠΊ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΡΠΈΠ»Ρ, ΡΠ²Π΅Ρ, ΡΠΎΠ½, ΡΠ΅ΠΊΡΡ Π² Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ»Π°ΡΡΠΎΠ² / ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΠΎΠ² Π²Π½ΡΡΡΠΈ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ»Π°ΡΡΡ CSS-Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π° jQuery-UI ΠΈ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΠΈΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π²Π°ΡΠ΅ΠΉ ΡΠ΅ΠΌΠΎΠΉ. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π²Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΡΠΈΠ»Ρ / ΡΠ²ΠΎΠΉΡΡΠ²Π°. ΠΠ»Π°ΡΡΡ, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠ΅ Π΄Π»Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ:
ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΡΡΠ΄Π° Π²Ρ ΠΎΠ΄ΡΡ ΠΊΠ»Π°ΡΡΡ, ΡΠ²ΡΠ·Π°Π½Π½ΡΠ΅ ΡΠΎ Π·Π½Π°ΡΠΊΠΎΠΌ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠΌ Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°ΠΌΠΈ (Π΅ΡΠ»ΠΈ Ρ ΠΎΡΠΈΡΠ΅).ΠΡΠΎ:
ΠΠΌΠ΅ΡΡΠΎ Π²ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ Π²ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΠ»Π° CSS Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΡΡΠΎ ΠΈΠ·Π²Π»Π΅ΡΡ ΡΡΠΈ ΠΊΠ»Π°ΡΡΡ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π²ΠΈΠ΄ΠΆΠ΅ΡΠ° Β«Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Β» jQuery .ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΈΡ , ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΠ² ΡΡΠΈΠ»Ρ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Ρ ΡΠΎΠ·Π΄Π°Π» Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ Ρ ΡΡΠ΅ΠΌΡ ΠΏΠ°Π½Π΅Π»ΡΠΌΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Ρ Π½Π°ΡΡΡΠΎΠ΅Π½Π½ΡΠΌ CSS. ΠΠΎΡ ΠΊΠ°ΠΊ ΡΡΠΎ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΠΊΠΎΠ΄ΠΎΠΌ: Π‘ΠΌ. ΠΠ½Π»Π°ΠΉΠ½-Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΠΈ ΠΊΠΎΠ΄ CSS:
ΠΠ°ΡΠ΅Π½ΠΊΠ°:
jQuery ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΈΠ΄Π΅ΡΡ, ΡΡΠΎ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΠ²Π΅Ρ ΡΠΎΠ½Π° Ρ border-radius Π΄Π»Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ², Π² ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊ ΠΏΠ°Π½Π΅Π»ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ Π±ΠΎΠ»Π΅Π΅ ΡΠ²Π΅ΡΠ»ΡΠΉ ΡΠΎΠ½ Ρ ΡΠ°ΠΌΠΊΠΎΠΉ, ΠΊΡΠΎΠΌΠ΅ Π²Π΅ΡΡ Π½Π΅ΠΉ Π³ΡΠ°Π½ΠΈΡΡ; Π²ΡΠ΅ ΡΠΊΠ°Π·Π°Π½Π½ΡΠ΅ Π² ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΡ ΠΊΠ»Π°ΡΡΠ°Ρ CSS. ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ Ρ ΠΎΠΏΡΠΈΠ΅ΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΠΏΡΠΈΠΌΠ΅Ρ Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Ρ Π±ΡΠ΄Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΎΠΏΡΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π² Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π΅ jQuery.ΠΠ°ΡΠ°ΠΌΠ΅ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΠΊΠ°ΠΊ ΠΏΠ°Π½Π΅Π»Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π΄ΠΎΠ»ΠΆΠ½Π° ΠΎΡΠΊΡΡΠ²Π°ΡΡΡΡ ΠΈΠ»ΠΈ Π·Π°ΠΊΡΡΠ²Π°ΡΡΡΡ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ, Π° ΡΠ°ΠΊΠΆΠ΅ ΡΡΠΈΠ»Ρ Π·Π°ΠΌΠ΅Π΄Π»Π΅Π½ΠΈΡ Π΄Π»Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ. Π‘ΠΌ. Π‘Π»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Ρ ΡΠ°Π·Π½ΠΎΠΉ Π΄ΠΈΠ½Π°ΠΌΠΈΠΊΠΎΠΉ ΠΈ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡΡ. Π‘ΠΌ. ΠΠ½Π»Π°ΠΉΠ½-Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΠΈ ΠΊΠΎΠ΄ ΠΠΎΠ΄ jQuery Π΄Π»Ρ ΡΡΠΎΠΉ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΈ: Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» ΠΎΠΏΡΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Ρ ΡΠΈΠΏΠΎΠΌ ΠΏΠ»Π°Π²Π½ΠΎΡΡΠΈ easyInOutBounce . ΠΡΠΎΡΡΠ°Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π° ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ InOutQuad Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π° Ρ Π±ΡΠ΄Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ easyInOutQuad Π΄Π»Ρ ΠΎΡΠ»Π°Π±Π»Π΅Π½ΠΈΡ. Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» ΡΠ΅Π³ Π΄Π»Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² Ρ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ, Π° Π½Π΅ ΡΠ΅Π³ h4. Π‘ΠΌ. ΠΠ½Π»Π°ΠΉΠ½-Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΠΈ ΠΊΠΎΠ΄ Π§ΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΏΠΎΠ»Π½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ Π΄ΠΎΡΡΡΠΏΠ½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ Π·Π°ΠΌΠ΅Π΄Π»Π΅Π½ΠΈΡ, ΠΏΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ ΠΏΠΎ ΡΡΠΎΠΉ ΡΡΡΠ»ΠΊΠ΅: http://api.jqueryui.com/easings/ ΠΡΠΈΠΌΠ΅Ρ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π° Ρ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡΡ Π² Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΎΠΏΡΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ Π΄Π»ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ 1500 ΠΌΠΈΠ»Π»ΠΈΡΠ΅ΠΊΡΠ½Π΄. ΠΡΠΎ Π·Π°ΡΡΠ°Π²ΠΈΡ ΠΏΠ°Π½Π΅Π»ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΎΡΠΊΡΡΠ²Π°ΡΡΡΡ Π² ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ΅ Π²ΡΠ΅ΠΌΡ Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ. Π‘ΠΌ. ΠΠ½Π»Π°ΠΉΠ½-Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΠΈ ΠΊΠΎΠ΄ ΠΡΠΈΠΌΠ΅Ρ ΡΠΎΡΡΠΈΡΡΠ΅ΠΌΠΎΠ³ΠΎ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π° ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π° Π½Π° ΡΠ°Π·Π½ΡΡ ΡΠ°ΠΉΡΠ°Ρ Π²Ρ ΠΌΠΎΠ³Π»ΠΈ Π·Π°ΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ ΠΏΠ°Π½Π΅Π»ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ.ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΡΡΡΠΎΠΈΡΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠ΅Π½ΠΈΡΠΌΠΈ. Π ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΡΠ°Π·, ΠΊΠΎΠ³Π΄Π° Π²Ρ Π²ΠΎΠΉΠ΄Π΅ΡΠ΅ Π² ΡΠΈΡΡΠ΅ΠΌΡ, Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ ΡΠ΅ ΠΆΠ΅ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ, ΡΡΠΎ ΠΈ Π² ΠΏΡΠΎΡΠ»ΡΠΉ ΡΠ°Π·. Π Π°Π·ΡΠ΅ΡΠΈΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ ΡΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ ΠΏΠ°Π½Π΅Π»ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΈΠ»ΠΈ ΠΏΠ΅ΡΠ΅ΡΠΏΠΎΡΡΠ΄ΠΎΡΠΈΠ²Π°ΡΡ ΠΈΡ ΠΏΠΎ ΡΠ²ΠΎΠ΅ΠΌΡ Π²ΠΊΡΡΡ Π³ΠΎΡΠ°Π·Π΄ΠΎ ΠΏΡΠΎΡΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π° jQuery UI. Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ Π³Π°ΡΠΌΠΎΡΠΊΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π²ΠΈΠ΄ΠΆΠ΅ΡΠ°, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ ΡΡΠΈ ΠΏΠ°Π½Π΅Π»ΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΡΡΠ°Π²Π»ΡΡΡ. Π‘ΠΌ. ΠΠ½Π»Π°ΠΉΠ½-Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΠΈ ΠΊΠΎΠ΄ ΠΠΎΠ΄:
ΠΠ°ΡΠΌΠΎΡΠΊΠ° ΡΠΎΠΆΠ΅ ΠΎΡΡΠ°Π΅ΡΡΡ ΡΠ°Π·Π±ΠΎΡΠ½ΠΎΠΉ. ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΡΡΡΠΎΠΈΡΡ Π·Π½Π°ΡΠΊΠΈ Π² ΡΠ°Π·Π΄Π΅Π»Π΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² ΠΏΠ°Π½Π΅Π»Π΅ΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π² ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌΠΎΠΌ ΠΌΠΎΠ΄ΡΠ»Π΅ jQuery UI. ΠΠ°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ»Π°ΡΡΡ Π·Π½Π°ΡΠΊΠΎΠ². Π₯ΠΎΡΡ ΠΊΠ»Π°ΡΡΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΡΡΡΡ. ΠΡΠ»ΠΈ Π²Ρ Π²ΠΊΠ»ΡΡΠ°Π΅ΡΠ΅ ΡΠ°ΠΉΠ» CSS jQuery-UI, Π²Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ CSS Ρ ΡΠΎΠ½ΠΎΠ²ΡΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ. Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Ρ ΡΠΎΠ·Π΄Π°Π» Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ jQuery UI Ρ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΠΌΠΈ ΠΊΠ»Π°ΡΡΠ°ΠΌΠΈ Π·Π½Π°ΡΠΊΠΎΠ².ΠΠ΄ΠΈΠ½ ΠΊΠ»Π°ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ Π°ΠΊΡΠΈΠ²Π½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ, ΠΏΠ°Π½Π΅Π»Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΎΡΠΊΡΡΠ²Π°Π΅ΡΡΡ. ΠΡΡΠ³ΠΎΠΉ — Π΄Π»Ρ Π·Π°ΠΊΡΡΡΡΡ ΠΏΠ°Π½Π΅Π»Π΅ΠΉ ΡΠΎ Π·Π½Π°ΡΠΊΠΎΠΌ Π±ΠΎΠ»ΡΡΠ΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°. ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ ΠΏΡΠΈΠΌΠ΅Ρ Π² ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅, ΡΠ΅Π»ΠΊΠ½ΡΠ² Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΡΡ ΡΡΡΠ»ΠΊΡ ΠΈΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½ΠΈΠΆΠ΅: Π‘ΠΌ. ΠΠ½Π»Π°ΠΉΠ½-Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΠΈ ΠΊΠΎΠ΄ ΠΠΎΠ΄ jQuery: CSS:
ΠΠ°ΡΠ΅Π½ΠΊΠ°:
ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ ΠΆΠΈΠ²ΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ, ΡΠ΅Π»ΠΊΠ½ΡΠ² ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠ΅ Π²ΡΡΠ΅ ΡΡΡΠ»ΠΊΠΈ. 25+ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π° JQuery, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΠΎΡΠ³Π°Π½ΠΈΠ·Π°ΡΠΈΠΈ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°ΠΡΡΡ ΠΏΡΠΈΡΠΈΠ½Π°, ΠΏΠΎ ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΠΎΡΡΡ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ΠΎΠ² ΡΡΡΠ΅ΠΌΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ°ΡΡΠ΅Ρ Ρ Π³ΠΎΠ΄Π°ΠΌΠΈ! ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π±ΠΎΠ»Π΅Π΅ ΠΊΡΡΠΏΠ½ΠΎΠ³ΠΎ ΠΈ Π½Π°ΡΡΡΠ΅Π½Π½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠΎΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΡ ΠΏΡΠΎΡΡΠΎΠΉ ΠΈ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠ΄Π΅Π»Π°ΡΡ Π΅Π³ΠΎ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠΌ ΠΈ ΠΌΠ΅Π½Π΅Π΅ ΡΠΊΡΡΠ½ΡΠΌ — ΡΡΠΎ Π³Π°ΡΠΌΠΎΡΠΊΠΈ ΠΈΠ»ΠΈ ΡΠΊΠ»Π°Π΄Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. ΠΠΎ ΡΡΡΠΈ, ΠΎΠ½ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ, ΠΎΠ³ΡΠ°Π½ΠΈΡΠΈΠ²Π°Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΡΠ²ΠΎΡΠ°ΡΠΈΠ²Π°Π΅ΠΌΡΠΌΠΈ ΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΌΠΎΠ³ΡΡ Π²ΠΊΠ»ΡΡΠ°ΡΡ ΠΈΠ»ΠΈ ΠΎΡΠΊΠ»ΡΡΠ°ΡΡ. ΠΠ°Π·ΠΎΠ²Π°Ρ ΡΡΡΡΠΊΡΡΡΠ° ΠΎΠ±ΡΡΠ½ΠΎ ΡΠΎΡΡΠΎΠΈΡ ΠΈΠ· Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π²ΠΊΠ»ΡΡΠ°Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ / Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ ΠΈ ΡΠ΅Π»ΠΎ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠ°ΡΡΠΈΡΡΠ΅ΡΡΡ ΠΏΠΎ ΠΊΠΎΠΌΠ°Π½Π΄Π΅.ΠΡΠΎ ΡΡΠ΅Π·Π²ΡΡΠ°ΠΉΠ½ΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΉ ΡΠ°Π±Π»ΠΎΠ½ Π΄Π»Ρ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΡ Π²Π°ΠΆΠ½ΡΡ Π΄Π΅ΡΠ°Π»Π΅ΠΉ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΡΠ°Π·Π΄Π΅Π»Π° Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΏΡΠΎΠ³ΡΠ΅ΡΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠ°ΡΠΊΡΡΡΠΈΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ. ΠΠΎ ΠΊΡΠΎ ΡΠΊΠ°Π·Π°Π», ΡΡΠΎ ΠΎΠ½ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΠΏΡΠΎΡΡΡΠΌΠΈ ΠΈ ΡΠΊΡΡΠ½ΡΠΌΠΈ? ΠΠΌΠ΅Ρ Π΄ΠΎΡΡΡΠΏ ΠΊ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΈ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΡ ΠΊΠΎΠ΄ΠΎΠ², Π²Π»Π°Π΄Π΅Π»ΡΡΡ ΡΠ°ΠΉΡΠΎΠ² ΠΌΠΎΠ³ΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π½Π°ΡΡΠΎΠ»ΡΠΊΠΎ ΠΊΡΠ΅Π°ΡΠΈΠ²Π½ΠΎ ΠΈΠ»ΠΈ ΡΠΏΡΠΎΡΠ΅Π½Π½ΠΎ, Π½Π°ΡΠΊΠΎΠ»ΡΠΊΠΎ Π·Π°Ρ ΠΎΡΡΡ! Π Π΅ΡΠ»ΠΈ Π²Ρ ΠΈΡΠ΅ΡΠ΅ ΡΠΎΠ»ΡΠΎΠΊ ΠΊ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ ΡΠ΄ΠΈΠ²ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΠΈ Π½ΠΎΠ²Π°ΡΠΎΡΡΠΊΠΈΡ ΠΈΠ΄Π΅ΠΉ, ΡΠΎ ΡΡΠΎΡ ΡΠΏΠΈΡΠΎΠΊ ΡΠ΅Π³ΠΎΠ΄Π½Ρ, Π±Π΅Π·ΡΡΠ»ΠΎΠ²Π½ΠΎ, ΠΎΡΠ»ΠΈΡΠ½ΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ. ΠΠ±ΡΠ΅Π΄ΠΈΠ½ΠΈΠ² Π²ΡΠ΅ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΠ΅ ΠΎΠ½Π»Π°ΠΉΠ½-Π²Π°ΡΠΈΠ°Π½ΡΡ, Π³Π΄Π΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΡΠ΅ΡΠΏΠ½ΡΡΡ ΠΈΠ΄Π΅ΠΈ Π΄Π»Ρ ΡΠΌΠ΅Π»ΡΡ , ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎ Π²ΡΠ³Π»ΡΠ΄ΡΡΠΈΡ ΠΈ ΠΏΠΎΡΡΡΡΠ°ΡΡΠΈΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ², ΡΠ΅Π³ΠΎΠ΄Π½Ρ Ρ Π½Π°Ρ Π΅ΡΡΡ ΡΠΏΠΈΡΠΎΠΊ Π»ΡΡΡΠΈΡ ΠΈΠ· Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΡ jQuery Accordions Π΄Π»Ρ Π²Π°Ρ! ΠΡΠ±ΠΈΡΠ°Ρ ΡΡΠΈ Π²Π°ΡΠΈΠ°Π½ΡΡ Π²ΡΡΡΠ½ΡΡ, Π²Ρ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΠ΅ Π΄ΠΎΡΡΡΠΏ ΠΊ ΠΏΠΎΠ»Π½ΠΎΠΉ ΡΡΡΡΠΊΡΡΡΠ΅ ΠΊΠΎΠ΄ΠΈΡΠΎΠ²Π°Π½ΠΈΡ.Π Π΅ΡΠ»ΠΈ Π²Π°Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΡΠ΅Ρ Π±ΠΎΠ»ΡΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² CSS, ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ ΠΊΠ°ΡΡΠΎΡΠΊΠΈ, ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΡΠ°Π·Π΄Π΅Π»ΠΈΡΠ΅Π»ΠΈ ΠΈ Ρ. Π., ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡΡΡΡ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ Π½Π°ΡΠΈΠΌΠΈ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡΠΌΠΈ Π² Π±Π»ΠΎΠ³Π΅. JQuery Accordion NavigationΠ Π²Π΅ΡΡ Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ Π½Π°ΡΠ΅Π³ΠΎ ΡΠΏΠΈΡΠΊΠ° Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ ΠΏΡΠΎΡΡΠΎΠ΅ ΠΈ ΡΠ΄ΠΎΠ±Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π° jQuery, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²ΠΏΠ΅ΡΠ°ΡΠ»ΡΠ΅Ρ ΠΈ ΠΏΠ»Π°Π²Π½ΠΎ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ. ΠΠ°ΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½ΠΎ, ΡΡΠΎ Π² ΡΡΠΎΠΌ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π²Ρ Π½Π°ΠΉΠ΄Π΅ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π»ΡΠ±ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΠΉ ΠΈ ΠΏΠΎΠ΄ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΠΉ. Π¦Π²Π΅ΡΠΎΠ²ΡΠ΅ ΡΡ Π΅ΠΌΡ ΡΠ²Π΅Π΄Π΅Π½Ρ ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡΠΌΡ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π·Π΄Π΅ΡΡ ΡΠ΄Π΅Π»ΡΠ΅ΡΡΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°ΠΌ.ΠΡΠ»ΠΈ ΡΠ΅Π»ΠΊΠ½ΡΡΡ Π·Π½Π°ΡΠΎΠΊ ΡΡΠ΄ΠΎΠΌ Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ, ΠΎΠ½ Π±ΡΠ΄Π΅Ρ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½, ΡΡΠΎΠ±Ρ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π²Π½ΡΡΡΠΈ. ΠΠ»Π΅Π³Π°Π½ΡΠ½ΡΠΉ, ΡΠ΅ΠΌΠ½ΡΠΉ ΠΈ ΡΠΈΡΡΡΠΉ, ΡΡΠΎ ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ ΠΏΠΎΠ²Π΅ΡΡ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΠ°ΠΌΠ° ΡΡΡΡΠΊΡΡΡΠ° Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ Π³ΠΈΠ±ΠΊΠ°Ρ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΡΠ°ΡΡ Ρ ΡΡΠΎΠ³ΠΎ Ρ ΠΎΠ»ΡΡΠ° ΠΈ Π² Π΄Π°Π»ΡΠ½Π΅ΠΉΡΠ΅ΠΌ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡ Π΅Π³ΠΎ ΠΏΠΎ ΡΠ²ΠΎΠ΅ΠΌΡ ΡΡΠΌΠΎΡΡΠ΅Π½ΠΈΡ. ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / Π‘ΠΊΠ°ΡΠ°ΡΡ Π ΡΡΠΊΠ° DukeΠΡΠ΅ ΠΎΠ΄Π½ΠΎ ΡΠ°ΡΡΠΈΡΠ΅Π½Π½ΠΎΠ΅ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ, ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π½Π½ΠΎΠ΅ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ jQuery acccordion, — ΡΡΠΎ ΡΡΡΠΊΠ° Duke Π½Π° codepen.ΠΡΠΎ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎ Π²ΠΏΠ΅ΡΠ°ΡΠ»ΡΡΡΠΈΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΠΎΠ·Π΄Π°ΡΠ΅Π»Ρ Π·Π΄Π΅ΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ Π½Π΅ ΠΎΡΡΠ°Π²ΠΈΠ» ΠΊΠ°ΠΌΠ½Ρ Π½Π° ΠΊΠ°ΠΌΠ½Π΅. ΠΠ°ΠΆΠ΄ΡΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π½ Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΡΠ΅Π»ΡΡ ΠΈ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½ ΡΠ°ΠΊΠΈΠΌ ΠΏΠ»Π°Π²Π½ΡΠΌ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΎΠΌ. ΠΠ½ ΠΈΠΌΠ΅Π΅Ρ ΠΏΡΠΎΡΡΠΎΠ΅ ΠΌΠ΅Π½Ρ ΠΈ ΡΡΠΊΠΈΠΉ ΡΠ²Π΅Ρ Π΄Π»Ρ Π΅Π³ΠΎ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΡ. ΠΠ°ΠΆΠ΅ ΡΠ΅Π½ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Ρ, ΡΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π΅ΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅ ΡΠ΅Π°Π»ΠΈΡΡΠΈΡΠ½ΠΎΡΡΠΈ. ΠΠ° ΠΊΠ°ΠΆΠ΄ΠΎΠΉ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ Π΅ΡΡΡ Π·Π½Π°ΡΠΎΠΊ ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, Π° Π΄Π»Ρ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ Ρ Π³Π°ΡΠΌΠΎΡΠΊΠ°ΠΌΠΈ Π²Π½ΡΡΡΠΈ — Π΄ΡΡΠ³ΠΎΠΉ Π·Π½Π°ΡΠΎΠΊ Ρ Π»Π΅Π²ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ. ΠΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π½Π° Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π·Π½Π°ΡΠΎΠΊ Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΎΠΌ ΠΎΠ½ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΠΈ Π²Π½ΡΡΡΠΈ.ΠΠ°ΡΠ΅Π³ΠΎΡΠΈΠΈ ΡΠ°ΠΊΠΆΠ΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ²Π΅ΡΠ° ΡΠΎΠ½Π°, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΎ ΠΏΡΠΎΡΠ²Π»ΡΠ΅ΡΡΡ. Π ΡΠ΅Π»ΠΎΠΌ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ Π²ΠΏΠ΅ΡΠ°ΡΠ»ΡΡΡΠΈΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ ΠΊ ΠΏΡΠΎΡΡΠΎΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΈ ΠΌΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, Π΅ΡΠ»ΠΈ Π²Ρ ΡΠΏΡΠΎΡΠΈΡΠ΅ Π½Π°Ρ, ΠΌΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎ Π΄ΡΠΌΠ°Π΅ΠΌ, ΡΡΠΎ ΠΎΠ± ΡΡΠΎΠΌ ΡΡΠΎΠΈΡ ΡΠΏΠΎΠΌΡΠ½ΡΡΡ Π·Π΄Π΅ΡΡ. ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / Π‘ΠΊΠ°ΡΠ°ΡΡ jQuery (Π±Π΅Π· ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°) AccordionΠ‘Π»Π΅Π΄ΡΡΡΠΈΠΌ Π½Π° ΠΎΡΠ΅ΡΠ΅Π΄ΠΈ Ρ Π½Π°Ρ Π΅ΡΡΡ Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ Π΄ΠΈΠ·Π°ΠΉΠ½ Π³Π°ΡΠΌΠΎΡΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π½ Ρ ΠΏΡΠΎΡΡΡΠΌ ΠΈ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΌ Π°ΠΊΡΠ΅Π½ΡΠΎΠΌ Π½Π° Π½Π΅Π³ΠΎ. ΠΠ½ Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠ΅ΠΊΡΡΡ Π² Π²ΠΈΠ΄Π΅ ΡΠ°Π·Π΄Π΅Π»ΠΎΠ² Π΄Π»Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°, ΠΏΠΎΠ΄Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΈ ΡΠ°ΡΠΊΡΡΡΠΈΡ Π΄ΡΡΠ³ΠΎΠ³ΠΎ Π°Π±Π·Π°ΡΠ° Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π²Π½ΡΡΡΠΈ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π°.ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΠΎΠΉ ΡΠ²Π΅ΡΠΎΠ²ΠΎΠΉ ΡΡ Π΅ΠΌΡ Ρ ΠΏΡΠΎΡΡΡΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ Π΄Π»Ρ ΡΠ΅ΠΊΡΡΠΎΠ² ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ ΠΏΡΠΈΠ²Π»Π΅ΡΠ΅Ρ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π²Π°ΡΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ. ΠΠ°ΠΆΠ΄Π°Ρ ΠΈΠ· ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΠΉ ΡΠ°ΠΊΠΆΠ΅ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π° Π΄Π»Ρ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΈ ΠΏΠΎ ΠΎΠ΄Π½ΠΎΠΉ, ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΊΠΎΠ³Π΄Π° Π²Ρ Π²ΡΠ±ΠΈΡΠ°Π΅ΡΠ΅ ΠΎΠ΄Π½Ρ, ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ ΡΠ±ΠΈΡΠ°ΡΡΡΡ. ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / Π‘ΠΊΠ°ΡΠ°ΡΡ ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ JQuery ΠΎΡ ΠΠΈΠΊΠ°ΡΠ° ΠΠ΅ΡΠΌΡΠΠ°ΡΠ½Π΅ΠΌ Π½Π°Ρ ΡΠΏΠΈΡΠΎΠΊ Ρ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΠΈΠΊΠ°ΡΠ° ΠΠ΅ΡΠΌΠ°. Π Π°Π·ΡΠ°Π±ΠΎΡΠ°Π½Π½ΡΠΉ Ρ ΡΡΠ΅ΡΠΎΠΌ ΠΏΡΠΎΡΡΠΎΡΡ ΠΈ ΡΠΈΡΡΠΎΠΉ ΡΡΡΠ΅ΡΠΈΠΊΠΈ, Π²ΡΠ΅ Π² ΡΡΠΎΠΌ Π½ΡΠ°Π²ΠΈΡΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ.ΠΡ ΡΠ΅ΡΠΎ-Π±Π΅Π»ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠΎΠ²ΠΎΠ³ΠΎ ΡΠ·ΠΎΡΠ° Π΄ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠΏΡΠΎΡΠ΅Π½Π½ΡΡ Π·Π½Π°ΡΠΊΠΎΠ² — ΡΡΠΎ ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°. HTML ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΡΡΡΠΊΡΡΡ, ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΈ ΡΠΎΡΠΌ, Π² ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊ ΠΏΡΠΎΡΡΡΠ΅ JS ΠΈ CSS ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π΄Π»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΠΏΠ»Π°Π²Π½ΡΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΎΠ². Π’Π΅ΠΏΠ΅ΡΡ, ΠΊΠΎΠ³Π΄Π° Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ Π½Π°ΠΆΠΈΠΌΠ°Π΅ΡΡΡ Π½Π° ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ ΡΠ°Π·Π΄Π΅Π»Ρ, ΠΎΠ½ ΡΠ°ΡΡΠΈΡΡΠ΅ΡΡΡ, ΡΡΠΎΠ±Ρ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π²Π½ΡΡΡΠΈ. ΠΠ°Π»Π΅Π½ΡΠΊΠΈΠ΅ Π΄Π΅ΡΠ°Π»ΠΈ Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ ΡΠ²Π΅ΡΠ° ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ ΡΠΎΡΠΌΡ Π·Π½Π°ΡΠΊΠ° — Π²ΠΎΡ ΡΡΠΎ Π΄Π΅Π»Π°Π΅Ρ Π΅Π³ΠΎ ΡΠ°ΠΊΠΈΠΌ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΌ. Π’ΠΎΠ½ΠΊΠΈΠΉ, Π½ΠΎ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΎΡΠΈΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π½Π° ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΡ ΡΠ΅Π»Ρ, ΡΡΠΎ Π² ΡΠ΅Π»ΠΎΠΌ Π΄Π΅Π»Π°Π΅Ρ Π΄ΠΈΠ·Π°ΠΉΠ½ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΠΌ ΠΈ ΡΠΈΡΡΡΠΌ. ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / Π‘ΠΊΠ°ΡΠ°ΡΡ ΠΡΠΎΡΡΠΎΠΉ SASS jQuery AccordionΠ§ΡΠΎ ΠΊΠ°ΡΠ°Π΅ΡΡΡ Π±ΠΎΠ»Π΅Π΅ ΡΠ»ΠΎΠΆΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΊΠ°ΠΊ ΡΠ°ΠΊΠΎΠ²ΠΎΠ³ΠΎ, ΡΠΎ ΡΡΠΎ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠΎΠ΄Π²ΠΈΠ½ΡΡΡΠΉ ΠΈ ΡΡΠΈΠ»ΡΠ½ΡΠΉ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π° jQuery. ΠΡΠΎΡ Π΄ΠΈΠ·Π°ΠΉΠ½, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΉ ΠΠΆΠΎΠ½ΠΎΠΌ Π‘ΡΡΡΠ±Π΅, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΊΠΎΠ΄Ρ SASS, Π° ΡΠ°ΠΊΠΆΠ΅ JQuery Π΄Π»Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΠΏΠ»Π°Π²Π½ΠΎΠ³ΠΎ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π° ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ². Π ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ ΡΡΠ°Π΄ΠΈΡΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ Π½Π°ΡΠΈΠ½Π°Π΅ΡΡΡ ΡΠΎ ΡΠΊΡΡΡΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, Π² ΡΡΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΡΡΠ΅ΠΊΡ, Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΡΠΉ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ. ΠΡΠ»ΠΈ ΡΠ΅Π»ΠΊΠ½ΡΡΡ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ², ΡΡΠΎΠ±Ρ ΠΎΡΠΊΡΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π²Π½ΡΡΡΠΈ, ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΠΉ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΡΠ±Π΅ΡΠ΅ΡΡΡ.ΠΡΠ΅ Π² ΡΡΠΎΠΌ Π·Π°Π²ΠΎΡΠ°ΠΆΠΈΠ²Π°Π΅Ρ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΠΎΠ·Π΄Π°ΡΠ΅Π»Ρ ΡΠ΅ΡΡΠ΅Π·Π½ΠΎ ΠΎΡΠ½Π΅ΡΡΡ ΠΊ ΡΠΎΠ½ΠΊΠΈΠΌ Π΄Π΅ΡΠ°Π»ΡΠΌ. Π Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°, ΠΏΠΎ ΠΊΠΎΡΠΎΡΠΎΠΌΡ ΡΠ΅Π»ΠΊΠ½ΡΠ»ΠΈ, ΠΌΠ΅Π½Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π²Π²Π΅ΡΡ ΠΈΠ»ΠΈ Π²Π½ΠΈΠ·, ΡΡΠΎΠ±Ρ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅. ΠΠ½Π°ΡΠΊΠΈ ΡΡΠ΄ΠΎΠΌ Ρ ΡΠ²Π΅ΡΠΎΠ²ΠΎΠΉ ΡΡ Π΅ΠΌΠΎΠΉ Π²ΡΠ±ΡΠ°Π½Π½ΠΎΠ³ΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΡΠ°ΠΊΠΆΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡΡ, ΡΡΠΎΠ±Ρ Π²ΡΠ΄Π΅Π»ΠΈΡΡ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΠ΅. ΠΠ°ΠΆΠ΅ ΡΠ΅Π½ΠΈ ΠΈ ΠΎΡΠ²Π΅ΡΠ΅Π½ΠΈΠ΅ ΠΈΠ³ΡΠ°ΡΡ ΡΠΎΠ»Ρ Π² ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ Π±ΠΎΠ»Π΅Π΅ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»ΠΈΡΡΠΈΡΠ½ΠΎΠ³ΠΎ ΠΎΡΡΡΠ΅Π½ΠΈΡ. ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / Π‘ΠΊΠ°ΡΠ°ΡΡ 4Line jQuery AccordionΠ’Π΅ΠΏΠ΅ΡΡ ΡΡΠΎ Π±ΠΎΠ»Π΅Π΅ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΡΡΠΈΡΠ½ΡΠΉ ΠΈ ΠΏΡΠΎΡΡΠΎΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ jquery-Π³Π°ΡΠΌΠΎΡΠΊΠΈ, Π΅ΡΠ»ΠΈ Π²Ρ Π΅Π³ΠΎ ΠΈΡΠ΅ΡΠ΅.Π‘ΠΎΠ·Π΄Π°ΡΠ΅Π»Ρ Π΄Π°Π» ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ ΡΠΎΡΡ, Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΈ Ρ ΠΎΡΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΡΠΎ-ΡΠΎ ΡΠ²ΠΎΠ΅, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ±ΡΠΈΠΉ ΡΡΠΈΠ»Ρ ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΡΠΎΡΡΡ. Π Π²ΠΎΡ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΠ»Π°Π²Π½ΠΎ. Π, ΠΊΠ°ΠΊ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΠ· Π½Π°Π·Π²Π°Π½ΠΈΡ, Π²ΡΡ ΡΡΡΡΠΊΡΡΡΠ° ΠΎΡΠ½ΠΎΠ²Π°Π½Π° Π½Π° 4 ΠΏΡΠΎΡΡΡΡ Π»ΠΈΠ½ΠΈΡΡ , ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ»ΡΠΆΠ°Ρ Π³ΡΠ°Π½ΠΈΡΠ°ΠΌΠΈ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΈΠ»ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ. ΠΠ΅Π³ΠΊΠΎ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΈ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅ΡΡΠΈ, Π΅ΡΠ»ΠΈ Ρ ΠΎΡΠΈΡΠ΅, Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ Π½Π°ΡΡΡΠΎΠ΅ΠΊ Π·Π΄Π΅ΡΡ ΠΈ ΡΠ°ΠΌ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠ΅Π²ΡΠ°ΡΠΈΡΡ ΡΡΠΎ Π² ΡΠ²ΠΎΠΉ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½. ΠΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ ΠΏΠΎ ΡΡΡΠ»ΠΊΠ΅ Π½ΠΈΠΆΠ΅, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π΄ΠΎΡΡΡΠΏ ΠΊ ΠΈΡ ΠΏΠΎΠ»Π½ΠΎΠΉ ΡΡΡΡΠΊΡΡΡΠ΅ ΠΊΠΎΠ΄ΠΈΡΠΎΠ²Π°Π½ΠΈΡ. ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / Π‘ΠΊΠ°ΡΠ°ΡΡ ΠΡΠ°ΡΠ°ΡΡΠΈΠ΅ΡΡ ΡΡΡΠ΅Π»ΡΠΡΠ΅ ΠΎΠ΄ΠΈΠ½ Π² ΡΠ΅ΡΠ½ΠΎ-Π±Π΅Π»ΠΎΠΉ ΡΠ²Π΅ΡΠΎΠ²ΠΎΠΉ Π³Π°ΠΌΠΌΠ΅, ΡΡΠΎ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠΎΠ΄Π²ΠΈΠ½ΡΡΡΠΉ ΠΈ ΡΠ»ΠΎΠΆΠ½ΡΠΉ Π²Π°ΡΠΈΠ°Π½Ρ.ΠΡΠΎΡΡΠΎΠΉ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΡΠ΅ΡΡΡΡΠΌΡ ΡΠ΅ΡΠ½ΡΠΌΠΈ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠ°ΠΌΠΈ, ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΠΈΠ· ΠΊΠΎΡΠΎΡΡΡ ΡΠ°ΡΠΊΡΡΠ²Π°Π΅ΡΡΡ ΡΠ΅Π»ΡΠΊΠΎΠΌ, ΡΡΠΎΠ±Ρ ΡΠ°ΡΠΊΡΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π²Π½ΡΡΡΠΈ. ΠΠΎ, ΠΊΠ°ΠΊ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΠ· Π½Π°Π·Π²Π°Π½ΠΈΡ, ΡΠΎΠΊΡΡ Π·Π΄Π΅ΡΡ — Π²ΡΠ°ΡΠ°ΡΡΠΈΠ΅ΡΡ ΡΡΡΠ΅Π»ΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠ΅Π½ΡΡΡ ΡΠ²ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠΈ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΠΈ. Π Π°Π·Π΄Π΅Π»Ρ ΡΠ°ΠΊΠΆΠ΅ ΡΠ°Π·Π΄Π΅Π»Π΅Π½Ρ Π½Π° Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°ΡΡΠ΅ΠΉ Ρ ΡΠ°Π·Π΄Π΅Π»ΠΈΡΠ΅Π»ΡΠΌΠΈ ΠΌΠ΅ΠΆΠ΄Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΠΎΡΠΊΠΎΠΉ. Π ΡΠ΅Π»ΠΎΠΌ, Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΎΡΡΠ°Π΅ΡΡΡ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΡΡΠΈΡΠ½ΡΠΌ, Π½ΠΎ Π² ΡΠΎ ΠΆΠ΅ Π²ΡΠ΅ΠΌΡ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΌ ΡΠΎ ΡΡΠΈΡΡΠ°ΠΌΠΈ, ΡΠ²Π΅ΡΠΎΠ²ΡΠΌΠΈ ΡΡ Π΅ΠΌΠ°ΠΌΠΈ ΠΈ Π²ΡΠ΅ΠΉ ΡΡΡΡΠΊΡΡΡΠΎΠΉ. Π‘ΠΎΡΠ΅ΡΠ°Ρ HTML, CSS ΠΈ jQuery, ΡΠΎΠ·Π΄Π°ΡΠ΅Π»Ρ ΡΡΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΏΠΎΠΈΠ³ΡΠ°Π»ΡΡ Ρ ΡΠΏΡΠΎΡΠ΅Π½Π½ΡΠΌΠΈ ΡΡΠ½ΠΊΡΠΈΡΠΌΠΈ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΡΠΎΡ ΠΏΠΎΡΡΡΡΠ°ΡΡΠΈΠΉ Π²Π°ΡΠΈΠ°Π½Ρ. ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / Π‘ΠΊΠ°ΡΠ°ΡΡ Π‘Π΅ΠΊΡΡΠ°Π»ΡΠ½ΡΠΉ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ΠΡΠ»ΠΈ Π³ΠΎΠ²ΠΎΡΠΈΡΡ ΠΎ ΡΠΈΡΡΠΎΠΌ ΠΈ Π°ΠΊΠΊΡΡΠ°ΡΠ½ΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ Ρ ΡΠ΅ΡΠ½ΠΎ-Π±Π΅Π»ΡΠΌΠΈ ΡΠ²Π΅ΡΠΎΠ²ΡΠΌΠΈ ΡΡ Π΅ΠΌΠ°ΠΌΠΈ, ΡΠΎ ΡΡΠΎΡ ΠΏΠΎΠΏΠ°Π΄Π°Π΅Ρ Π² ΡΡ ΠΆΠ΅ Π½ΠΈΡΡ. ΠΠ΄Π½Π°ΠΊΠΎ Π²ΠΌΠ΅ΡΡΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΊΠΎΡΠΎΠ±ΠΊΠΈ, ΠΊΠ°ΠΊ Π² Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ Π½Π°ΡΠΈΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ², ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Π½ΡΡ ΡΠ΅Π³ΠΎΠ΄Π½Ρ, Π·Π΄Π΅ΡΡ ΡΠ°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ 4 Π»ΠΈΠ½ΠΈΠΈ Π΄Π»Ρ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΠΊΠ»Π°Π΄Π½ΠΎΠΉ ΡΠ΅ΠΊΡΠΈΠΈ. ΠΡΠ°ΡΠ΅Π½ΠΈΠ΅ Π½Π° Π»Π΅Π²ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Π΅ ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ ΡΡΠΎΡ ΡΠΎΠ½ΠΊΠΈΠΉ Π½Π°ΠΌΠ΅ΠΊ Π½Π° ΡΠ²ΠΎΡΡΠ΅ΡΡΠ²ΠΎ. Π‘ΠΎΡΠ΅ΡΠ°Ρ ΠΏΡΠΎΡΡΠΎΡΡ ΡΠΎ Π²ΡΠ΅ΠΌ Π³Π°ΡΠΌΠΎΡΠΊΠΎΠΉ, ΡΡΠΎΡ Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΠ½ΠΈΠ²Π΅ΡΡΠ°Π»Π΅Π½ ΠΈ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ ΡΠΎ Π²ΡΠ΅ΠΌΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠΌΠΈ ΡΠ°ΠΉΡΠ°ΠΌΠΈ.Π₯ΠΎΡΡ Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈ ΠΈΡ ΡΡΠΈΠ»Ρ ΠΏΡΠ΅Π΄ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Ρ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ²ΠΎΠΉ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ ΡΡΡΠΈΡ , Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ² Π·Π΄Π΅ΡΡ ΠΈ ΡΠ°ΠΌ. Π’Π°ΠΊ Π·Π°ΡΠ΅ΠΌ Π½Π°ΡΠΈΠ½Π°ΡΡ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Ρ ΡΠΈΡΡΠΎΠ³ΠΎ Π»ΠΈΡΡΠ°, Π΅ΡΠ»ΠΈ ΡΡΠ° Π±Π΅ΡΠΏΠ»Π°ΡΠ½Π°Ρ ΠΎΠΏΡΠΈΡ ΠΌΠΎΠΆΠ΅Ρ Π΄Π°ΡΡ Π²Π°ΠΌ ΡΠΎΡΡ. ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / Π‘ΠΊΠ°ΡΠ°ΡΡ ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ ΡΠΈΠ½ΠΈΠΉ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ΠΠ΄Π½ΠΎ ΠΈΠ· Π³Π»Π°Π²Π½ΡΡ Π΄ΠΎΡΡΠΎΠΈΠ½ΡΡΠ² Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π° — ΡΡΠΎ, ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ, Π΅Π³ΠΎ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΠΎΡΡΡ. Π ΡΡΠΎΡ Π΄ΠΈΠ·Π°ΠΉΠ½, Π½Π΅ΡΠΎΠΌΠ½Π΅Π½Π½ΠΎ, ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΡΠ»ΠΈΡΠ½ΡΠΌ Π²ΠΎΠΏΠ»ΠΎΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΡΠΎΠ³ΠΎ. ΠΡΠΎΡ ΡΠΈΠ½ΠΈΠΉ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½, ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΠΈΠΉ ΠΊ Π»ΡΠ±ΠΎΠΌΡ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠΊΡΠ°Π½Π°, ΠΌΠ°Π»Π΅Π½ΡΠΊΠΎΠΌΡ ΠΈΠ»ΠΈ Π±ΠΎΠ»ΡΡΠΎΠΌΡ, ΠΏΡΠΈΠ΄Π°Π΅Ρ Π΅ΠΌΡ ΡΡΠΈΠ»ΡΠ½ΡΠΉ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄.Π―ΡΠΈΠΊΠΈ, ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡΠΈΠ΅ ΡΠ°ΡΡΠΈΡΡΠ΅ΠΌΡΠ΅ ΡΠ°Π·Π΄Π΅Π»Ρ, ΡΠ°ΠΊΠΆΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°Ρ ΠΌΠ΅ΡΡΠ° Π΄Π»Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΡΡΠΎ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠ΅ΠΉ. Π₯ΠΎΡΡ ΡΠΈΠ½ΠΈΠ΅ ΠΈ Π±Π΅Π»ΡΠ΅ ΡΠ²Π΅ΡΠΎΠ²ΡΠ΅ ΡΡ Π΅ΠΌΡ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½Ρ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΈΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ ΡΠΎ ΡΠ²ΠΎΠΈΠΌΠΈ ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠ΅Π½ΠΈΡΠΌΠΈ. ΠΡΠ°ΡΠ°ΡΡΠ°ΡΡΡ ΡΡΡΠ΅Π»ΠΊΠ° Π΄Π»Ρ Π±ΠΎΠ»Π΅Π΅ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎΠΉ Π΄Π΅ΡΠ°Π»ΠΈ ΠΏΠΎΠΌΠ΅ΡΠ΅Π½Π° Π²Π½ΡΡΡΠΈ ΠΊΠ²Π°Π΄ΡΠ°ΡΠ°. Π ΡΠ΅Π»ΠΎΠΌ, Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ Π²ΠΏΠ΅ΡΠ°ΡΠ»ΡΡΡΠ΅, Π»Π΅Π³ΠΊΠΎ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΠΏΠΎΠ»Π½ΡΠΉ Π΄ΠΎΡΡΡΠΏ ΠΊ ΠΊΠΎΠ΄Π°ΠΌ ΠΏΠΎ ΡΡΡΠ»ΠΊΠ΅ Π²Π½ΠΈΠ·Ρ. ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / Π‘ΠΊΠ°ΡΠ°ΡΡ Simple Accordion jQueryΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΊΠ»Π°ΡΡΠΈΡΠ΅ΡΠΊΠΈΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ, ΡΡΠΎΡ jquery-Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ ΠΏΡΠΎΡΡ, ΡΡΡΠ΅ΠΊΡΠΈΠ²Π΅Π½ ΠΈ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎ.ΠΡΠΎΡΡΠΎΠΉ ΡΠΎΠ½ Ρ ΡΠ΅ΡΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ Π² ββΠ²ΠΈΠ΄Π΅ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΊΠ°ΠΊ Π΄Π΅ΡΠΆΠ°ΡΠ΅Π»Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π΄Π»Ρ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π°. ΠΡΠΈ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π½Π° Π½ΠΈΡ Π°Π½ΠΈΠΌΠΈΡΡΡΡΡΡ ΠΈ ΡΠ°ΡΡΠΈΡΡΡΡΡΡ, ΠΊΠ°ΠΊ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½. ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΏΡΠΎΡΡΠΎΠΉ HTML ΠΈ CSS, ΡΡΠΈΠ»Ρ ΠΎΡΡΠ°Π΅ΡΡΡ ΡΡΡΠ΅ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΡΠΈΡΡΠ½ΡΠΌ ΠΈ Π³ΠΈΠ±ΠΊΠΈΠΌ, ΡΠ°ΠΊ ΡΡΠΎ Π²Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ²ΠΎΠΉ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ ΡΡΡΠΈΡ . ΠΠΎΠ»ΡΡΠΈΡΠ΅ Π΄ΠΎΡΡΡΠΏ ΠΊ ΠΈΡ ΠΏΠΎΠ»Π½ΠΎΠΉ ΡΡΡΡΠΊΡΡΡΠ΅ ΠΊΠΎΠ΄ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π½ΠΈΠΆΠ΅ ΠΏΠΎ ΡΡΡΠ»ΠΊΠ΅, ΠΊΠΎΡΠΎΡΡΡ ΠΌΡ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»ΠΈΠ»ΠΈ Π½ΠΈΠΆΠ΅. ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / Π‘ΠΊΠ°ΡΠ°ΡΡ ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ jQuery AccordionΠΡΠ»ΠΈ Π³ΠΎΠ²ΠΎΡΠΈΡΡ ΠΎΠ± Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΌ ΠΈ ΠΊΡΠ΅Π°ΡΠΈΠ²Π½ΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅, ΡΡΠΎ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½Π°Ρ ΠΈ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΈΠ½Π½ΠΎΠ²Π°ΡΠΈΠΎΠ½Π½Π°Ρ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ.Π ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π° ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² Π² ΡΡΠΎΠΌ ΡΠΏΠΈΡΠΊΠ΅ ΡΠ΅Π³ΠΎΠ΄Π½Ρ, ΡΡΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ Π²ΠΈΠ΄ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π°. ΠΠ΅ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΠΎ, Π½ΠΎ ΠΈ ΡΠΎ ΡΠ»ΠΎΠΆΠ½ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ, Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈ ΠΎΠ±ΡΠ°Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΡΠ°ΠΊΠΆΠ΅ Π²ΠΏΠ΅ΡΠ°ΡΠ»ΡΡΡ. ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠ΅ΡΡΠ΅, Π±Π΅Π»ΡΠ΅ ΠΈ ΡΠΈΠ½ΠΈΠ΅ ΡΠ·ΠΎΡΡ Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΈΠ· ΡΠ΅ΠΊΡΠΈΠΉ, ΡΡΠΈΠ»Ρ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΉ ΠΈ ΡΠ΅Π·ΠΊΠΈΠΉ. Π Π΅ΡΠ»ΠΈ Π²Ρ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΡΠ΅Ρ , ΠΊΡΠΎ Ρ ΠΎΡΠ΅Ρ ΡΠ΅Π³ΠΎ-ΡΠΎ Π΄ΡΡΠ³ΠΎΠ³ΠΎ, ΡΠΎΠ³Π΄Π° ΡΡΠΎΡ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ jQuery Π½Π΅ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ. Π ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ ΠΊΠ»Π°ΡΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΡΠ»Π°ΠΉΠ΄Π° Π²Π²Π΅ΡΡ ΠΈ Π²Π½ΠΈΠ·, Π·Π΄Π΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠ»Π°ΠΉΠ΄ Π²Π»Π΅Π²ΠΎ ΠΈ Π²ΠΏΡΠ°Π²ΠΎ, ΠΌΠ΅Π½ΡΡΡΠΈΠΉ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π½Π°ΠΆΠ°ΡΠΎΠΉ Π²ΠΊΠ»Π°Π΄ΠΊΠΎΠΉ.ΠΠ²Π° ΠΏΡΠΎΡΡΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΡ Π·Π½Π°ΡΠΊΠ° ΡΠ°ΠΊΠΆΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½Ρ Π²Π½ΠΈΠ·Ρ Ρ ΠΎΠ±Π΅ΠΈΡ ΡΡΠΎΡΠΎΠ½ Π΄Π»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ. ΠΠ°Π»Π΅Π½ΡΠΊΠΈΠ΅ Π΄Π΅ΡΠ°Π»ΠΈ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Π½ΠΎΠΌΠ΅ΡΠ° ΡΡΡΠ°Π½ΠΈΡ, Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ, ΡΠ΅Π½ΠΈ ΠΈ ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠΈ ΡΠ²Π΅ΡΠ°, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΡΠ²ΠΎΡΡΠ΅ΡΠΊΠΈ. ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / Π‘ΠΊΠ°ΡΠ°ΡΡ 3D ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ΠΡΠΎ Π±ΠΎΠ»Π΅Π΅ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΉ ΠΈ Π²ΠΏΠ΅ΡΠ°ΡΠ»ΡΡΡΠΈΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΉ Π΄Π»Ρ ΠΈΠΌΠΈΡΠ°ΡΠΈΠΈ ΡΡΠ΅Ρ ΠΌΠ΅ΡΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Π Π΅ΡΠ»ΠΈ Π²Ρ ΠΏΡΠ΅Π΄ΠΏΠΎΡΠΈΡΠ°Π΅ΡΠ΅ Π±ΠΎΠ»Π΅Π΅ ΡΠ²ΠΎΡΡΠ΅ΡΠΊΠΈΠΉ ΠΈ ΡΡΠΈΠ»ΡΠ½ΡΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄, ΡΠΎ ΡΡΠΎΡ Π²Π°ΡΠΈΠ°Π½Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎ Π΄Π»Ρ Π²Π°Ρ. Π‘ΠΎΠ·Π΄Π°ΡΠ΅Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠ°Π·Π΄Π΅Π»ΠΎΠ² Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π°, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°Π·Π²ΠΎΡΠ°ΡΠΈΠ²Π°ΡΡΡΡ Π² ΡΡΠ΅Ρ ΠΌΠ΅ΡΠ½ΠΎΠΌ ΡΡΡΠ΅ΠΊΡΠ΅, ΡΡΠΎΠ±Ρ ΡΠ°ΡΠΊΡΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π²Π½ΡΡΡΠΈ.ΠΡΠ΅ ΠΎΠ΄Π½Π° Π½Π΅Π±ΠΎΠ»ΡΡΠ°Ρ Π΄Π΅ΡΠ°Π»Ρ, ΠΊΠΎΡΠΎΡΠ°Ρ Π΄Π΅Π»Π°Π΅Ρ Π²Π΅ΡΠΈ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΌΠΈ, — ΡΡΠΎ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π΄Π΅ΡΠ°Π»ΠΈ, Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π½ΡΠ΅ Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ. Π Π°Π·Π΄Π΅Π»Ρ Ρ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ ΡΠ°ΠΊΠΆΠ΅ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π½Ρ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»ΠΎΠ², ΡΡΠΎ ΠΏΡΠΈΠ΄Π°Π΅Ρ ΠΈΠΌ ΠΏΠΎΡΡΠΈ ΡΠ΅Π°Π»ΠΈΡΡΠΈΡΠ½ΠΎΠ΅ ΠΎΡΡΡΠ΅Π½ΠΈΠ΅ Π±ΡΠΌΠ°Π³ΠΈ. ΠΠ°ΠΆΠ΄ΠΎΠ΅ ΠΈΠ· ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ ΠΎΠ΄Π½ΠΎ Π½Π°Π΄ Π΄ΡΡΠ³ΠΈΠΌ. ΠΡΡ ΡΡΡΡΠΊΡΡΡΠ° ΠΎΡΠ½ΠΎΠ²Π°Π½Π° Π½Π° CSS, HTML ΠΈ JS Π΄Π»Ρ Π΄ΠΎΡΡΠΈΠΆΠ΅Π½ΠΈΡ ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠ³ΠΎ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ°. ΠΠ»Ρ Π±ΠΎΠ»Π΅Π΅ Π΄Π΅ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠ»Π΅Π½ΠΈΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠΌΠΈ ΠΊΠΎΠ΄Π°ΠΌΠΈ ΠΏΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ ΠΏΠΎ ΡΡΡΠ»ΠΊΠ΅ Π½ΠΈΠΆΠ΅. ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / Π‘ΠΊΠ°ΡΠ°ΡΡ Π‘ΡΠΏΠ΅Ρ ΠΏΡΠΎΡΡΠΎΠΉ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ΠΠΎΠ·Π²ΡΠ°ΡΠ°ΡΡΡ ΠΊ ΡΠ΅ΠΌΡ-ΡΠΎ Π±ΠΎΠ»Π΅Π΅ Π°ΠΊΠΊΡΡΠ°ΡΠ½ΠΎΠΌΡ ΠΈ Π±ΠΎΠ»Π΅Π΅ ΡΠΈΡΡΠΎΠΌΡ, ΡΡΠΎ ΡΡΠΏΠ΅Ρ ΠΏΡΠΎΡΡΠΎΠΉ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ jquery Π΄Π»Ρ ΡΠ΅Ρ , ΠΊΡΠΎ Π΅Π³ΠΎ ΠΈΡΠ΅Ρ.Π€ΠΎΠ½ ΠΏΡΠΎΡΡΠΎΠΉ, Π½ΠΎ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΉ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ ΠΈ ΡΡΡΠ΅ΠΊΡ ΠΏΠ»Π°Π²Π½ΠΎΠ³ΠΎ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ. ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΠΊΠ°ΠΆΠ΄ΡΡ ΡΠ΅ΠΊΡΠΈΡ ΡΠ²Π΅Ρ ΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π½Π° ΡΡΠΊΠΎ-ΠΊΡΠ°ΡΠ½ΡΠΉ. Π Π°Π·Π΄Π΅Π» ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΠ½ΠΈΠ²Π΅ΡΡΠ°Π»Π΅Π½, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Π»ΡΠ±ΠΎΠΉ ΡΠΈΠΏ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° ΠΏΠΎ ΡΠ²ΠΎΠ΅ΠΌΡ ΠΆΠ΅Π»Π°Π½ΠΈΡ. ΠΡΠΎ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π² ΡΠ΅Π±Ρ ΡΠ΅ΠΊΡΡΡ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΡΡΠ»ΠΊΠΈ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅, ΡΡΠΎ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅. ΠΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π½Π° Π»ΡΠ±ΠΎΠΉ Π΄ΡΡΠ³ΠΎΠΉ ΡΠ°Π·Π΄Π΅Π», ΡΠ°Π½Π΅Π΅ Π²ΡΠ±ΡΠ°Π½Π½ΡΠΉ ΡΠ°Π·Π΄Π΅Π» Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅ΡΡΡ Π² ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΡΡΠΎΠ±Ρ ΠΎΡΠ²ΠΎΠ±ΠΎΠ΄ΠΈΡΡ ΠΌΠ΅ΡΡΠΎ Π΄Π»Ρ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π³ΠΎ. ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / Π‘ΠΊΠ°ΡΠ°ΡΡ jQuery Accordion ΠΠ²ΡΠΎΡ ΠΠ½Π΄ΡΡ Π₯ΠΎΠ΄ΠΆΡΠΎΠ½ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΏΡΠΎΡΡΠΎΡΡ ΠΈ ΠΏΠΎΠ½ΡΡΠ½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½, ΡΡΠΎ Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΏΠΎΡΡΡΡΠ°ΡΡΠΈΠΉ Π²Π°ΡΠΈΠ°Π½Ρ Π΄Π»Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ jquery accordion Π½Π° Π²Π°ΡΠ΅ΠΉ ΡΡΠΎΡΠΎΠ½Π΅.ΠΠ΅ΡΠΌΠΎΡΡΡ Π½Π° ΡΠΎ, ΡΡΠΎ ΡΡΠΈΠ»Ρ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΡΡΠΈΡΠ΅Π½, ΡΡΠΎ ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ Π²Π°ΡΠΈΠ°Π½Ρ. ΠΠΎΡΠ΅ΠΌΡ? ΠΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· ΡΠ°Π·Π΄Π΅Π»ΠΎΠ² ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½ ΠΈ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½ Π΄ΠΎ ΡΠΎΠ²Π΅ΡΡΠ΅Π½ΡΡΠ²Π° Π΄Π»Ρ ΠΏΠ»Π°Π²Π½ΠΎΠ³ΠΎ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΡ. Π‘Π΅ΠΊΡΠΈΡ Π² ΡΠ°ΠΌΠΊΠ΅ ΡΠΊΠΎΠ»ΡΠ·ΠΈΡ Π²Π²Π΅ΡΡ ΠΈ Π²Π½ΠΈΠ·, ΠΎΡΠΊΡΡΠ²Π°Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π²Π½ΡΡΡΠΈ. Π‘ ΠΏΡΠ°Π²ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ Π·Π½Π°ΡΠΎΠΊ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΡΠ°ΠΊΠΆΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡΡ Π½Π° Π²ΡΡ ΠΎΠ΄ ΠΈΠ»ΠΈ ΠΏΠΎΠΏΠ΅ΡΠ΅ΡΠ½ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅, ΡΡΠΎ Π²Π΅ΡΠ½Π΅Ρ Π²ΡΡ ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΈΡ Π² ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅. Π‘ ΠΏΠΎΠΌΠΎΡΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ Π½Π°ΡΡΡΠΎΠ΅ΠΊ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΡΠΈΡΡΡ, ΡΠ²Π΅ΡΠΎΠ²ΡΠ΅ ΡΡ Π΅ΠΌΡ ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΡ, Π΅ΡΠ»ΠΈ Ρ ΠΎΡΠΈΡΠ΅. ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / Π‘ΠΊΠ°ΡΠ°ΡΡ ΠΠ΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΡΠΎΡΡΠΎ jQuery Accordion ΠΎΡ JenΠΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ — ΡΡΠΎ Π·Π°ΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ jquery-Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π° ΠΎΡ Jen.Π‘ΠΎΡ ΡΠ°Π½ΡΡ Π΅Π³ΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΡΠΎΡΡΡΠΌ ΠΈ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΌ, ΡΡΠΎ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ, Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΡΡΡΠΈΠΉ, ΠΊΠ°ΠΊ ΡΡΠΎ-ΡΠΎ Π½Π°ΡΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΎΡΡΠΎΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠ°ΠΊΠΈΠΌ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΡΠΌ. Π§Π΅ΡΠ½ΡΠ΅ ΡΡΠΈΠΊΠΈ Π²ΡΠ΄Π΅Π»ΡΡΡΡΡ Π½Π° Π±Π΅Π»ΠΎΠΌ ΡΠΎΠ½Π΅, ΠΈ ΠΏΠ»Π°Π²Π½ΡΠΉ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ Ρ ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²ΠΏΠ΅ΡΠ°ΡΠ»ΡΠ΅Ρ. ΠΠ°ΠΆΠ΅ ΡΠ΅ΠΊΡΡΡ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Ρ, ΡΡΠΎΠ±Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²ΠΎΡ ΡΠ²Π΅ΡΠΎΠ²ΡΡ ΡΡ Π΅ΠΌΡ, ΡΡΠΎΠ±Ρ Π²ΡΠ΄Π΅Π»ΠΈΡΡ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΠ΅, Π² ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊ ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΡΠ°ΠΌ. ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ HTML, CSS ΠΈ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ JQuery, Π²Ρ ΡΠΎΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠΎΡ ΠΆΠ΅ ΡΡΡΠ΅ΠΊΡ. ΠΡΠΎΡΡΠΎ ΠΏΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ ΠΊ ΠΊΠΎΠ΄Ρ ΠΏΠΎ ΡΡΡΠ»ΠΊΠ΅ Π½ΠΈΠΆΠ΅ ΠΈ Π½Π°ΡΠ½ΠΈΡΠ΅ ΡΠ°Π±ΠΎΡΡ Π½Π°Π΄ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠΌ! ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / Π‘ΠΊΠ°ΡΠ°ΡΡ ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ ΠΠ°ΠΉΠΊΠ»Π° Π₯ΠΎΡΡΠΌΠ°Π½Π°ΠΡΠΎΡ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ ΠΠ°ΠΉΠΊΠ»Π° Π₯ΠΎΡΡΠΌΠ°Π½Π° — Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎ Π²ΡΠ³Π»ΡΠ΄ΡΡΠΈΠΉ ΠΎΠ±ΡΠ°Π·Π΅Ρ, ΠΊ ΠΊΠΎΡΠΎΡΠΎΠΌΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π΄ΠΎΡΡΡΠΏ, ΠΏΠ΅ΡΠ΅ΠΉΠ΄Ρ ΠΏΠΎ ΡΡΡΠ»ΠΊΠ΅ Π½ΠΈΠΆΠ΅.ΠΠ»Ρ ΡΠΈΠ½Π΅Π³ΠΎ ΠΈ Π³Π°ΡΠΌΠΎΡΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΡΠ΅ΡΠ½ΡΠ΅ ΡΡΠΈΡΡΡ Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΈΠ· ΠΊΠ²Π°Π΄ΡΠ°ΡΠΎΠ². ΠΠ΄Π½Π°ΠΊΠΎ Π²ΡΠ±ΡΠ°Π½Π½ΡΠΉ ΡΠ°Π·Π΄Π΅Π» ΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ²Π΅Ρ ΡΡΠΈΡΡΠ° Π½Π° Π±Π΅Π»ΡΠΉ. ΠΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΡΠΎΡΡΠΎΠΉ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ, ΡΡΠΎ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠΎΡΡΠΎΠΉ Π²Π°ΡΠΈΠ°Π½Ρ, Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΡΠ°ΡΡ. ΠΡΠ΅ ΠΊΠΎΠ΄Ρ ΡΠΈΡΡΡΠ΅ ΠΈ Ρ ΠΎΡΠΎΡΠΎ ΠΏΡΠΎΠΊΠΎΠΌΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½Ρ, ΡΠ°ΠΊ ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ ΠΏΠΎΠ½ΡΡΡ Π²ΡΡ ΡΡΡΡΠΊΡΡΡΡ. ΠΡΠ΅ ΠΎΠ΄Π½Π° ΡΠΎΠ½ΠΊΠ°Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π½Π°Ρ Π΄Π΅ΡΠ°Π»Ρ — ΡΡΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ²Π΅ΡΠ° ΠΎΡ Π±ΠΎΠ»Π΅Π΅ ΡΠ²Π΅ΡΠ»ΠΎΠ³ΠΎ Π΄ΠΎ Π±ΠΎΠ»Π΅Π΅ ΡΠ΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ, ΡΡΠΎΠ±Ρ Π²ΡΠ΄Π΅Π»ΠΈΡΡ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΠ΅. ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / Π‘ΠΊΠ°ΡΠ°ΡΡ CSS JSS ΠΠ½ΠΎΠ³ΠΎΡΡΠΎΠ²Π½Π΅Π²ΡΠΉ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π’Π΅ΠΏΠ΅ΡΡ Π΄Π»Ρ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠ°ΠΊΡΠΈΡΠ½ΠΎΠ³ΠΎ ΠΈ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΡΡΠΎ ΠΌΠ½ΠΎΠ³ΠΎΡΡΠΎΠ²Π½Π΅Π²ΡΠΉ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΎΠ½ ΡΠ΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ Π²Π½ΡΡΡΠΈ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π°.ΠΡΠΎΡΡΠ°Ρ Π±Π΅Π»ΠΎ-Π³ΠΎΠ»ΡΠ±Π°Ρ ΡΠ²Π΅ΡΠΎΠ²Π°Ρ ΠΏΠ°Π»ΠΈΡΡΠ° Π΄Π΅Π»Π°Π΅Ρ Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΠ»Π΅Π³Π°Π½ΡΠ½ΡΠΌ ΠΈ ΠΏΡΠΎΡΡΡΠΌ. ΠΠ΄Π½Π°ΠΊΠΎ ΠΌΠ½ΠΎΠ³ΠΎΡΡΠΎΠ²Π½Π΅Π²ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π²ΡΠ΄Π΅Π»ΡΠ΅Ρ Π΅Π³ΠΎ ΡΡΠ΅Π΄ΠΈ ΠΎΡΡΠ°Π»ΡΠ½ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² Π² ΡΠΏΠΈΡΠΊΠ΅. ΠΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π½Π° ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΠΉ ΡΠ°Π·Π΄Π΅Π» ΠΎΡΠΊΡΡΠ²Π°Π΅ΡΡΡ Π±ΠΎΠ»ΡΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ Π΄Π»Ρ ΡΠ°ΡΠΊΡΡΡΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°ΠΊΠΆΠ΅ ΡΠ°ΡΡΠΈΡΡΡΡΡΡ Π΄ΠΎ ΡΡΠ΅ΡΡΠ΅Π³ΠΎ ΡΡΠΎΠ²Π½Ρ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π°. Π₯ΠΎΡΡ ΡΡΠΎ ΠΏΡΠΎΡΡΠΎ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΅Π΅ Π΄Π»Ρ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°, Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Ρ Π»ΡΠ±ΡΠ΅ Π΄Π΅ΡΠ°Π»ΠΈ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π²Π°ΡΠΈΠΌΠΈ ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠ΅Π½ΠΈΡΠΌΠΈ. ΠΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· ΡΠ°Π·Π΄Π΅Π»ΠΎΠ² ΡΠ°ΠΊΠΆΠ΅ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅Ρ ΠΏΡΠΎΡΡΠΎΠΉ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊΡΡΡΠΎΡΠ°. ΠΡΠ΅ ΠΎΠ΄Π½Π° ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½Π°Ρ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΡ Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΠΈΠ· ΡΠΊΠ»Π°Π΄Π½ΡΡ ΠΌΠ΅Π½Ρ ΠΎΡΡΠ°Π΅ΡΡΡ Π½Π΅ΠΈΠ·ΠΌΠ΅Π½Π½ΡΠΌ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΎΠΏΡΠΈΠΉ Π²Ρ ΡΠ°ΡΠΊΡΡΠ²Π°Π΅ΡΠ΅.ΠΠ° Π½Π°Ρ Π²Π·Π³Π»ΡΠ΄, ΡΡΠΎ ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ Π²Π°ΡΠΈΠ°Π½Ρ Π΄Π»Ρ Π»ΡΠ±ΡΡ ΡΠ°ΠΉΡΠΎΠ² ΠΈΠ»ΠΈ ΡΡΡΠ°Π½ΠΈΡ Ρ Π±ΠΎΠ»ΡΡΠΈΠΌ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎΠΌ ΡΠ΅ΠΊΡΡΠ°. ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / Π‘ΠΊΠ°ΡΠ°ΡΡ ΠΠ°Ρ Π°Π»ΡΠ½ΡΠΉ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ΠΡΠ°ΡΠΎΡΠ½ΡΠΉ ΠΈ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ Π²ΠΎ Π²ΡΠ΅Ρ ΡΠΌΡΡΠ»Π°Ρ , ΡΡΠΎ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ΠΎΠ² jquery Π½Π° Π»ΡΠ±ΠΎΠΉ ΡΠ°ΠΉΡ. ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ Π΄Π»Ρ Π±ΡΠ΅Π½Π΄ΠΎΠ², ΡΠ΅ΠΊΠ»Π°ΠΌΠ½ΡΡ ΠΈΠ»ΠΈ ΡΠ²ΠΎΡΡΠ΅ΡΠΊΠΈΡ ΡΠ΅Π»Π΅ΠΉ, ΡΡΠΎ ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ Π²Π°ΡΠΈΠ°Π½Ρ. ΠΡΠΎ Π±Ρ ΠΌΠΎΠ³ ΠΏΠΎΠ΄ΡΠΌΠ°ΡΡ, ΡΡΠΎ ΠΏΡΠΎΡΡΠΎΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ΄Π½ΡΡΡ Π½Π° ΡΠΎΠ²Π΅ΡΡΠ΅Π½Π½ΠΎ Π΄ΡΡΠ³ΠΎΠΉ ΡΡΠΎΠ²Π΅Π½Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ²Π΅ΡΠΎΠ²? Π Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ ΡΡΠΎΠΌΡ, ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΠΈΠ½Π½ΠΎΠ²Π°ΡΠΈΠΎΠ½Π½ΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ, Π²ΠΊΠ»ΡΡΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΡ, ΠΎΠ±Π»Π°ΡΡΡ ΡΠ΅ΠΊΡΡΠ°, Π° ΡΠ°ΠΊΠΆΠ΅ Π·Π½Π°ΡΠΊΠΈ, Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ.ΠΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ ΡΡΠΈ ΡΠ°Π·Π΄Π΅Π»Ρ ΡΠ°ΡΡΠΈΡΡΡΡΡΡ ΠΈΠ»ΠΈ ΡΠ΄Π²ΠΈΠ³Π°ΡΡΡΡ Π²Π½ΠΈΠ·, ΠΎΡΠΊΡΡΠ²Π°Ρ ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ. ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ HTML, CSS ΠΈ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ JS, ΠΊΠΎΠ½Π΅ΡΠ½ΡΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ, Π±Π΅Π·ΡΡΠ»ΠΎΠ²Π½ΠΎ, ΡΡΠΎΠΈΡ ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ. ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / Π‘ΠΊΠ°ΡΠ°ΡΡ ΠΡΠΎΡΡΠΎΠΉ jQuery Accordion ΠΎΡ ΠΠΈΠΊΡΠΎΡΠ° ΠΠΈΠ°ΡΠ° Π΄Π΅ ΠΠ΅ΠΎΠ½Π°ΠΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΡΡΠΈΠ»Ρ ΠΠΈΠΊΡΠΎΡΠ° ΠΠΈΠ°ΡΠ° Π΄Π΅ ΠΠ΅ΠΎΠ½Π° ΠΏΠΎΠ΄ ΠΏΡΠΎΡΡΠΎΠΉ ΠΈ ΡΠ»Π΅Π³Π°Π½ΡΠ½ΠΎΠΉ Π½ΠΈΡΠ΅ΠΉ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π°. ΠΠΎΡΠΎΠ±ΠΊΠΈ, ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΡΠ΅ Π½Π° ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅, Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Ρ ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΡΡΠΎ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎ Π²ΡΠ³Π»ΡΠ΄ΡΡ ΠΏΠΎΡΡΡΡΠ°ΡΡΠ΅. Π‘Π΅ΡΠΎΠ²Π°ΡΠΎ-Π±Π΅Π»ΡΠΉ Π½Π° ΠΊΡΠ°ΡΠ½ΠΎΠΌ ΡΠΎΠ½Π΅ ΡΠ°ΠΊΠΆΠ΅ ΠΎΡΠ΅Π½Ρ Ρ ΠΎΡΠΎΡΠΎ ΡΠΎΡΠ΅ΡΠ°Π΅ΡΡΡ Π΄ΡΡΠ³ Ρ Π΄ΡΡΠ³ΠΎΠΌ.ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ CSS ΠΈ JS, ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· ΡΠ°Π·Π΄Π΅Π»ΠΎΠ² Π²ΡΠΏΠΎΠ»Π½ΡΠ΅Ρ ΠΏΠΎΡΡΡΡΠ°ΡΡΠΈΠ΅ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π½ΡΠ΅ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΡ ΠΈ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Ρ. ΠΡΠ΅ ΡΠ°ΠΊΡΠΎΡΡ ΡΡΠΈΠ»Ρ, Π²ΠΊΠ»ΡΡΠ°Ρ ΡΠ²Π΅ΡΠΎΠ²ΡΠ΅ ΡΡ Π΅ΠΌΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ ΡΡΠΈΡΡΡ ΠΈ Π΄Π°ΠΆΠ΅ ΡΠ°Π±Π»ΠΎΠ½Ρ, ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Ρ. ΠΠ΄Π½Π°ΠΊΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎΡ Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΠ²ΠΎΠΈΠΌ ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ Π΄Π΅ΡΠ°Π»ΠΈ Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΠΌΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡΠΌΠΈ Π·Π΄Π΅ΡΡ ΠΈ ΡΠ°ΠΌ. ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / Π‘ΠΊΠ°ΡΠ°ΡΡ ΠΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π°ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΡΠΈΠ»Ρ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ Ρ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ΠΎΠΌ — Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ Π½Π° Π²Π°Ρ Π²Π΅Π±-ΡΠ°ΠΉΡ. ΠΠ»Π΅Π³Π°Π½ΡΠ½ΡΠΉ ΠΈ ΡΠΈΡΡΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½, ΡΠΈΠ½Π΅-Π±Π΅Π»Π°Ρ ΡΠ²Π΅ΡΠΎΠ²Π°Ρ Π³Π°ΠΌΠΌΠ° Π΄Π΅Π»Π°Π΅Ρ Π΅Π³ΠΎ Π΅ΡΠ΅ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠΌ.ΠΠΈΠ·Π°ΠΉΠ½ Π² ΡΡΠΈΠ»Π΅ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ ΡΠ°ΡΡΠΈΡΡΠ΅ΡΡΡ Π·Π° ΡΡΠ΅Ρ ΡΡΡΠ΅ΠΊΡΠ° ΠΏΠ»Π°Π²Π½ΠΎΠ³ΠΎ Π²ΡΠ΄Π²ΠΈΠΆΠ΅Π½ΠΈΡ, ΠΎΡΠΊΡΡΠ²Π°Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π²Π½ΡΡΡΠΈ. Π¨ΡΠΈΡΡΡ ΠΈ ΠΎΠ±ΡΠΈΠ΅ ΡΠ°ΠΊΡΠΎΡΡ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΡΠ²Π΅Π΄Π΅Π½Ρ ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡΠΌΡ, ΡΡΠΎΠ±Ρ ΡΠΎΡΡΠ΅Π΄ΠΎΡΠΎΡΠΈΡΡΡΡ Π½Π° ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΠΌΠΎΠΌ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ΅. Π Π² ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π° ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² Π² Π½Π°ΡΠ΅ΠΌ ΡΠΏΠΈΡΠΊΠ΅, Π·Π΄Π΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΏΡΠΎΡΡΠ°Ρ ΡΡΡΡΠΊΡΡΡΠ° ΠΈΠ· 4 ΡΡΡΠΎΠΊ, Π° Π½Π΅ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠΎΠ². ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / Π‘ΠΊΠ°ΡΠ°ΡΡ ΠΠ΅Π³ΠΊΠΈΠΉ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ΠΡΠ΅ ΠΎΠ΄ΠΈΠ½ Π±ΠΎΠ»Π΅Π΅ ΠΊΡΠ΅Π°ΡΠΈΠ²Π½ΡΠΉ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ — ΡΡΠΏΠ΅Ρ ΠΏΡΠΎΡΡΠΎΠΉ, Π½ΠΎ ΡΡΠΈΠ»ΡΠ½ΡΠΉ jquery-Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ ΠΎΡ Π Π°ΡΠΌΡΡΠ° ΠΠΈΠ»Ρ ΠΠ°ΡΡΠ΅Π½Π°. ΠΠΎΠ½ΡΡΠ°ΡΡΠ½ΡΠΉ ΡΠ²Π΅Ρ Ρ ΡΠ΅ΡΠ½ΡΠΌ Π½Π° ΠΆΠ΅Π»ΡΠΎΠΌ Π΄Π΅Π»Π°Π΅Ρ Π΅Π³ΠΎ Π±ΠΎΠ»Π΅Π΅ ΡΡΠΈΠ»ΡΠ½ΡΠΌ ΠΈ ΡΠ΅ΡΡΠΎ.ΠΠ°ΠΆΠ΄Π°Ρ Π²ΠΊΠ»Π°Π΄ΠΊΠ° Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π° ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Π° ββΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΌΠΈ ΠΏΠΎΠ»ΡΠΌΠΈ, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π²Π½ΡΡΡΠΈ. ΠΡΠΈ ΡΠ΅Π»ΡΠΊΠ΅ ΠΏΠΎ Π½Π΅ΠΌΡ ΠΎΡΡΠ°Π»ΡΠ½Π°Ρ ΡΠ°ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΏΡΠ΅Π²ΡΠ°ΡΠ°Π΅ΡΡΡ Π² ΡΡΡΠ΅ΠΊΡ ΠΏΠ»Π°Π²Π½ΠΎΠ³ΠΎ ΡΠ»Π°ΠΉΠ΄Π°. ΠΡΠ°ΡΠ°ΡΡΠΈΠ΅ΡΡ Π·Π½Π°ΡΠΊΠΈ ΡΠΏΡΠ°Π²Π° ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ. ΠΡΠΈΠ½ΠΈΠΌΠ°Ρ Π²ΠΎ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΌΠ΅Π»ΡΡΠ°ΠΉΡΠΈΠ΅ Π΄Π΅ΡΠ°Π»ΠΈ, Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΠ°ΠΊΠΆΠ΅ ΠΎΡΠ½ΠΎΠ²Π°Π½ Π½Π° ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎΠΌ ΠΊΠ°ΡΠΊΠ°ΡΠ΅, ΡΡΠΎ ΠΏΡΠΈΠ΄Π°Π΅Ρ Π΅ΠΌΡ Π±ΠΎΠ»Π΅Π΅ ΡΠ΅Π°Π»ΠΈΡΡΠΈΡΠ½ΡΠΉ Π²ΠΈΠ΄. ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / Π‘ΠΊΠ°ΡΠ°ΡΡ ΠΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ Easy CSS jQueryΠΡΠ»ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠ΅ Π³Π°ΡΠΌΠΎΡΠΊΠΈ Π²Π°ΠΌ Π½Π΅ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡ, ΡΠΎ ΡΡΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ — ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ Π²Π°ΡΠΈΠ°Π½Ρ Π΄Π»Ρ Π²Π°Ρ.Π£Π½ΠΈΠΊΠ°Π»ΡΠ½Π°Ρ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ Π² ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠΈ Ρ ΠΈΠ½Π½ΠΎΠ²Π°ΡΠΈΠΎΠ½Π½ΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΠ»Π° ΡΠΎΠ·Π΄Π°ΡΠ΅Π»Ρ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄. ΠΠ°ΠΆΠ΄Π°Ρ Π²ΠΊΠ»Π°Π΄ΠΊΠ°-Π³Π°ΡΠΌΠΎΡΠΊΠ° ΡΠ°Π·Π»ΠΈΡΠ°Π΅ΡΡΡ ΠΏΠΎ ΡΠ²Π΅ΡΡ, Π²ΡΠ΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ 5 ΡΠ²Π΅ΡΠΎΠ². Π Π² ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ ΡΡΠ°Π΄ΠΈΡΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π°, ΡΡΠΎΡ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈΠΌΠ΅Π΅Ρ Π½Π°ΠΊΠ»ΠΎΠ½ Π² ΡΡΠΎΡΠΎΠ½Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΡ. ΠΠ½ Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ Π΄Π΅ΠΉΡΡΠ²ΡΠ΅Ρ, ΡΠΊΠΎΠ»ΡΠ·Ρ Π² ΠΈ ΠΈΠ· ΠΏΠΎΠ»Ρ Π·ΡΠ΅Π½ΠΈΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π½Π°ΠΆΠ°ΡΠΎΠΉ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ. ΠΠΎΠ³Π΄Π° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΡΠ°ΡΠΊΡΡΠ²Π°Π΅ΡΡΡ, ΠΎΠ½ΠΎ ΠΏΡΠ΅Π²ΡΠ°ΡΠ°Π΅ΡΡΡ Π² Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ Π²ΠΈΠ΄, ΡΡΠΎΠ±Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ. ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ CSS, HTML ΠΈ JS, Ρ ΠΎΡΡ ΡΡΠΎ ΡΠ»ΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Ρ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΡΠ°Π·Π°, ΡΠ΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ ΡΡΠΎΠΈΡ ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ, Π΅ΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ Π²ΡΠ΄Π΅Π»ΠΈΡΡΡΡ. ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / Π‘ΠΊΠ°ΡΠ°ΡΡ ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ ΠΈ ΠΏΠΎΠΈΡΠΊΠΠ»Ρ Π±ΠΎΠ»Π΅Π΅ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΈ Π΄Π΅ΠΉΡΡΠ²Π΅Π½Π½ΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΡΠΎ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½Π΅Π½Π½Π°Ρ Π²Π΅ΡΡΠΈΡ ΠΏΠ°Π½Π΅Π»ΠΈ ΠΏΠΎΠΈΡΠΊΠ° ΠΈ Π³Π°ΡΠΌΠΎΡΠΊΠΈ Π² ΠΎΠ΄Π½Ρ. Π‘ΠΎΡ ΡΠ°Π½ΡΡ Π²Π΅ΡΡ ΡΠΎΡΠΌΠ°Ρ ΡΠΈΡΡΡΠΌ ΠΈ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΌ, ΡΡΠΈΠ»Ρ Π±ΠΎΠ»Π΅Π΅ ΡΠ΅Π»Π΅Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½. ΠΠ°Π½Π΅Π»Ρ ΠΏΠΎΠΈΡΠΊΠ° ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΡΠ²Π΅ΡΡ Ρ Π΄Π»Ρ ΠΎΠ±Π»Π΅Π³ΡΠ΅Π½ΠΈΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, Π° Π·Π°ΡΠ΅ΠΌ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΏΠΎΠ΄ ΠΏΠΎΠ»ΠΎΡΠΎΠΉ. ΠΠ°ΠΆΠ΅ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ ΡΠΎΠΆΠ΅ ΠΌΠ½ΠΎΠ³ΠΎΡΡΠΎΠ²Π½Π΅Π²ΡΠΉ, Π° ΡΡΠΎ Π·Π½Π°ΡΠΈΡ, ΡΡΠΎ Π² Π½Π΅ΠΌ Π΅ΡΡΡ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ Π²Π½ΡΡΡΠΈ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π°. Π Π°Π·Π΄Π΅Π»Ρ, ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Π½ΡΠ΅ ΠΏΠΎΠ»ΡΠΌΠΈ, ΡΠ°ΡΡΠΈΡΡΡΡΡΡ, ΡΡΠΎΠ±Ρ ΠΎΡΠΊΡΡΠ²Π°ΡΡ ΡΡΡΠ»ΠΊΠΈ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ ΡΠ°Π·Π΄Π΅Π», ΠΊΠΎΡΠΎΡΡΠΉ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ°ΡΡΠΈΡΡΠ΅ΡΡΡ, ΡΡΠΎΠ±Ρ ΡΠ°ΡΠΊΡΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π²Π½ΡΡΡΠΈ.ΠΠ°Π½Π΅Π»Ρ ΠΏΠΎΠΈΡΠΊΠ° ΡΠ°ΠΊΠΆΠ΅ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½Π°, ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΌΠΎΠ³ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΅Π΅, ΡΡΠΎΠ±Ρ Π»Π΅Π³ΠΊΠΎ Π½Π°ΠΉΡΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠ½ΠΈ ΠΈΡΡΡ. ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / Π‘ΠΊΠ°ΡΠ°ΡΡ ΠΡΠΎΡΡΠΎΠΉ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ JQuery Ρ Π½Π΅ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΡΠΌ Π²Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΡΠΎ-ΡΠΎ Π±ΠΎΠ»Π΅Π΅ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΡΡΠΈΡΠ½ΠΎΠ΅ ΠΈ ΠΏΡΠΎΡΡΠΎΠ΅, ΡΠΎ ΡΡΠΎ Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ Π½Π° ΡΠ²ΠΎΠ΅ΠΌ ΡΠ°ΠΉΡΠ΅ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ jQuery. ΠΡΡ ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΈΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎ ΡΠΈΡΡΠ°Ρ ΠΈ ΡΠ»Π΅Π³Π°Π½ΡΠ½Π°Ρ. Π‘ ΡΡΠ΄ΠΎΠΌ ΠΊΠ½ΠΎΠΏΠΎΠΊ-ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Π΅ΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°ΡΡΠΈΡΡΡΡΡΡ ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π²Π½ΡΡΡΠΈ, ΡΡΠΎ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΡΠΎΡΡΠΎΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½.Π Π°Π·Π΄Π΅Π»Ρ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Ρ Π΄Π»Ρ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ ΡΠΊΠΎΠ»ΡΠΆΠ΅Π½ΠΈΡ Π²Π½ΠΈΠ· ΠΈ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΠΊΠ°ΠΊ ΡΡΠ°Π΄ΠΈΡΠΈΠΎΠ½Π½ΡΠΉ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ. ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½Π° ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΡ. ΠΠ½ΠΎΠΏΠΊΠΈ ΡΠ°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅ΡΡ Π»Π΅Π³ΠΊΠΈΠΉ Π½Π°ΠΌΠ΅ΠΊ Π½Π° ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Ρ Π»Π΅Π³ΠΊΠΈΠΌ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΎΠΌ ΡΠ²Π΅ΡΠ°. ΠΠ°ΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎ, ΡΡΠΎ ΡΠ°Π±Π»ΠΎΠ½ ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΎΡΠ·ΡΠ²ΡΠΈΠ² ΠΈ ΡΠ΅Π°Π³ΠΈΡΡΠ΅Ρ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΡΠΊΡΠ°Π½Π° ΡΡΡΡΠΎΠΉΡΡΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ Π²Π°ΡΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ. ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / Π‘ΠΊΠ°ΡΠ°ΡΡ ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π’Π΅ΠΏΠ΅ΡΡ ΡΡΠΎ Π±ΠΎΠ»Π΅Π΅ ΡΠ²ΠΎΡΡΠ΅ΡΠΊΠΎΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΈ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π° jQuery, ΠΊΠΎΡΠΎΡΠ°Ρ Π² ΠΈΡΠΎΠ³Π΅ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ.ΠΡΠ½ΠΎΠ²Π°Π½Π½ΡΠΉ Π½Π° Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΌ ΡΠ»Π°ΠΉΠ΄Π΅ΡΠ΅, ΡΠΎΠ·Π΄Π°ΡΠ΅Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΎΡΠ½ΠΎΠ²Ρ ΠΏΠΎΡΡΡΡΠ°ΡΡΠ΅ Π²ΡΠ³Π»ΡΠ΄ΡΡΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠ° ΠΏΠ΅ΡΠ²ΡΠΉ Π²Π·Π³Π»ΡΠ΄, ΡΡΠΎ, ΠΏΠΎ ΡΡΡΠΈ, ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡΠ°Ρ Π»ΠΈΡΡ Π±Π΅Π³Π»ΡΠΉ Π²Π·Π³Π»ΡΠ΄ Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΠΈΠ· Π½ΠΈΡ . ΠΠ΄Π½Π°ΠΊΠΎ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΡΡΠΈ ΡΠ»Π°ΠΉΠ΄Ρ ΡΠ°ΡΡΠΈΡΡΡΡΡΡ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΌΠΎΠ³Π»ΠΈ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΏΠΎΠ»Π½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠ°ΠΆΠ΄ΡΠΉ ΠΎΡΠ»ΠΈΡΠ°Π΅ΡΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠΌ ΡΠ»Π°ΠΉΠ΄Π° Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π΅Π³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΠ½ΡΡΡΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ»Π°ΠΉΠ΄Π° ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅, Π±ΡΠ΄Ρ ΡΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΈΠ»ΠΈ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅. ΠΠ°ΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎ, ΡΡΠΎ ΡΡΠΎΡ ΡΠ°Π±Π»ΠΎΠ½ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π΅Π½, ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΎΠ½ Π»Π΅Π³ΠΊΠΎ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΠΎΠ΄ΡΡΡΠ°ΠΈΠ²Π°Π΅ΡΡΡ ΠΏΠΎΠ΄ Π»ΡΠ±ΠΎΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΊΡΠ°Π½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π°. ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / Π‘ΠΊΠ°ΡΠ°ΡΡ ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ Material DesignΠΠ°ΠΊ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΠ· Π½Π°Π·Π²Π°Π½ΠΈΡ, ΡΡΠΎ jQuery-Π³Π°ΡΠΌΠΎΡΠΊΠ°, ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Π½Π°Ρ ΠΏΠΎΠ΄ ΠΏΡΠΎΡΡΠΎΠΉ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½. ΠΠ΄Π΅ΡΡ Π΅ΡΡΡ ΠΈΠ³ΡΠ° Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ, ΠΈ Π΅ΡΡΡ Π΄Π²Π° ΡΠ°Π·Π½ΡΡ Π²Π°ΡΠΈΠ°Π½ΡΠ°, Π½Π° ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π²Π΄ΠΎΡ Π½ΠΎΠ²ΠΈΡΡΡΡ. ΠΠ½ Π½Π°ΡΠΈΠ½Π°Π΅ΡΡΡ Ρ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ ΠΎΠ³Π»Π°Π²Π»Π΅Π½ΠΈΡ Ρ ΠΎΠΏΠΈΡΠ°Π½ΠΈΡΠΌΠΈ ΠΈ Π²Π»Π°Π΄Π΅Π»ΡΡΠ°ΠΌΠΈ ΡΠΈΡΡΠ»ΠΎΠ² Π²Π½ΡΡΡΠΈ. ΠΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π½Π° ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΡΠΊΠΎΠ»ΡΠ·ΠΈΡ Π²Π½ΠΈΠ·, ΠΎΡΠΊΡΡΠ²Π°Ρ Π²ΡΡ ΡΡΡΡΠΊΡΡΡΡ. ΠΠ° ΠΏΠ°Π½Π΅Π»ΠΈ ΡΠ°ΠΊΠΆΠ΅ Π΅ΡΡΡ Π²ΡΠ°ΡΠ°ΡΡΠΈΠΉΡΡ Π·Π½Π°ΡΠΎΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠ΅Π½ΡΠ΅ΡΡΡ, ΠΊΠΎΠ³Π΄Π° ΡΠ°Π±Π»ΠΈΡΠ° ΠΎΡΠΊΡΡΠ²Π°Π΅ΡΡΡ ΠΈ ΡΠ²ΠΎΡΠ°ΡΠΈΠ²Π°Π΅ΡΡΡ.Π ΡΠ΅Π»ΠΎΠΌ ΠΏΡΠΎΡΡΠΎΠΉ, ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΡΠΉ ΠΈ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½, ΠΌΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎ ΡΡΠΈΡΠ°Π΅ΠΌ, ΡΡΠΎ Π΅Π³ΠΎ ΡΡΠΎΠΈΡ ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ. ΠΠ·Π½Π°ΠΊΠΎΠΌΡΡΠ΅ΡΡ ΡΠΎ Π²ΡΠ΅ΠΉ ΡΡΡΡΠΊΡΡΡΠΎΠΉ, ΠΏΠ΅ΡΠ΅ΠΉΠ΄Ρ ΠΏΠΎ ΡΡΡΠ»ΠΊΠ΅ Π²Π½ΠΈΠ·Ρ. ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / Π‘ΠΊΠ°ΡΠ°ΡΡ JQuery Accordion ΠΎΡ ElenΠΠ°Π»Π΅Π΅ Ρ Π½Π°Ρ Π΅ΡΡΡ Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΡΡΠΈΡΠ½ΡΠΉ ΠΈ ΡΠΏΡΠΎΡΠ΅Π½Π½ΡΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ ΠΊ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π° jQuery. ΠΡΠΎ Π±Π°Π·ΠΎΠ²Π°Ρ ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΈΡ Ρ ΡΠΈΡΡΡΠΌ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΈ ΠΏΡΠΎΡΡΡΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ. ΠΠ°ΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ²Π΅ΡΠΎΠ²ΡΡ ΡΡ Π΅ΠΌ ΡΠ²Π΅Π΄Π΅Π½ΠΎ ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡΠΌΡ, Π° ΠΎΠ±ΡΠΈΠΉ Π²ΠΈΠ΄ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎ.ΠΠ°ΠΊ ΠΈ Π»ΡΠ±ΠΎΠΉ Π΄ΡΡΠ³ΠΎΠΉ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½, ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π½Π° Π»ΡΠ±ΡΡ ΠΈΠ· Π²ΠΊΠ»Π°Π΄ΠΎΠΊ ΠΎΠ½ ΠΎΡΠΊΡΡΠ²Π°Π΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π²Π½ΡΡΡΠΈ, ΡΠ΄ΠΎΠ±Π½ΠΎ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠ΅ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π²Π°ΡΠΈΠΌΠΈ ΠΏΠΎΡΡΠ΅Π±Π½ΠΎΡΡΡΠΌΠΈ. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ ΠΎΡΠ½ΠΎΠ²Π°Π½ Π½Π° ΡΡΡΡΠΊΡΡΡΠ΅ ΠΊΠΎΠ΄Π° HTML, CSS ΠΈ JS, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΡΠ°Π³ ΠΈ Π½Π°ΡΡΡΠΎΠΈΡΡ Π΄Π΅ΡΠ°Π»ΠΈ ΠΏΠΎ ΡΠ²ΠΎΠ΅ΠΌΡ Π²ΠΊΡΡΡ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡΡΡΡ ΡΠΎ ΡΡΡΡΠΊΡΡΡΠΎΠΉ, ΠΏΠ΅ΡΠ΅ΠΉΠ΄Ρ ΠΏΠΎ ΡΡΡΠ»ΠΊΠ΅ Π½ΠΈΠΆΠ΅. ΠΡΠ΅ ΠΎΠ΄Π½Π° ΡΠΎΠ½ΠΊΠ°Ρ Π΄Π΅ΡΠ°Π»Ρ — ΡΡΠΎ ΠΏΠ»Π°Π²Π½Π°Ρ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΠΎΡΡΡ, ΠΊΠΎΡΠΎΡΡΡ ΠΎΠ½ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ. Π ΠΎΠ±ΡΠ΅ΠΌ, ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± Π½Π°ΡΠ°ΡΡ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΠΊΡΠ΅Π°ΡΠΈΠ²Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π° Π²Π°Ρ ΡΠ°ΠΉΡ, ΡΡΠΎ ΠΎΡΠ»ΠΈΡΠ½ΠΎΠ΅ Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ Π½Π°ΡΠ΅ΠΌΡ ΡΠΏΠΈΡΠΊΡ. ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / Π‘ΠΊΠ°ΡΠ°ΡΡ ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ JQuery ΡΠΎ ΡΡΡΠ΅Π»ΠΊΠΎΠΉΠ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π΅, Π½ΠΎ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ Π²Π°ΠΆΠ½ΠΎΠ΅: Ρ Π½Π°Ρ Π΅ΡΡΡ ΡΠΊΡΠΊΠ»ΡΠ·ΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΎΡ ΠΠΈΠΊΠΎ. ΠΡΠΎΡΠ΅ΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎ Π²ΡΠ³Π»ΡΠ΄ΡΡΠΈΠΉ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π² ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠΈ Ρ Π΄Π²ΡΠΌΡ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΌΠΈ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π°ΠΌΠΈ. Π‘ΠΎΠ·Π΄Π°ΡΠ΅Π»Ρ ΡΠ΄Π°Π»ΠΎΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΡΠΎΡ ΡΠ²ΠΎΡΡΠ΅ΡΠΊΠΈΠΉ ΡΠ°Π»Π°Π½Ρ ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ ΠΈΠ· ΡΡΠΈΡ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΌΡΡΠ½ΠΎ ΠΎΡΠ»ΠΈΡΠ°ΡΡΡΡ ΡΠ²ΠΎΠΈΠΌ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΌ ΡΡΠ²ΡΡΠ²ΠΎΠΌ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎΠ³ΠΎ ΡΡΠΈΠ»Ρ. ΠΠ±Π° ΠΎΠ½ΠΈ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²Ρ. ΠΠ΅ΡΡ Π½ΡΡ — ΡΡΠΎ ΠΏΡΠΎΡΡΠ°Ρ Π²ΠΊΠ»Π°Π΄ΠΊΠ°-Π³Π°ΡΠΌΠΎΡΠΊΠ°, ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π½Π° ΠΊΠΎΡΠΎΡΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π²Π½ΡΡΡΠΈ.ΠΠ΄Π΅ΡΡ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Ρ ΡΠΎΠ½ΠΊΠΈΠ΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π½Π° Π·Π½Π°ΡΠΊΠ΅ ΡΡΡΠ΅Π»ΠΊΠΈ Π² ΠΏΡΠ°Π²ΠΎΠΉ ΡΠ°ΡΡΠΈ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ. ΠΠ°ΡΡΠ΄Ρ Ρ ΡΡΠΈΠΌ Π²Ρ ΡΠ°ΠΊΠΆΠ΅ Π·Π°ΠΌΠ΅ΡΠΈΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ²Π΅ΡΠΎΠ²ΠΎΠΉ ΡΡ Π΅ΠΌΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ. ΠΡΡΠ³ΠΎΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π·Π΄Π΅ΡΡ — ΡΡΠΎ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½, ΠΏΠΎΡ ΠΎΠΆΠΈΠΉ Π½Π° ΠΎΠΊΠ½ΠΎ ΡΠ°ΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ°ΠΊΠΆΠ΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Ρ ΠΏΡΠΎΡΡΡΠΌ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΈ ΡΠ΅Π»ΡΠΊΠ΅. ΠΠ΄Π΅ΡΡ Π²ΠΌΠ΅ΡΡΠΎ ΡΡΡΠ΅Π»ΠΊΠΈ Π²Ρ Π½Π°ΠΉΠ΄Π΅ΡΠ΅ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΎΠΊΠ½ΠΎ ΡΠ°ΡΠ°, ΠΏΠΎΡ ΠΎΠΆΠ΅Π΅ Π½Π° Π΄ΠΈΠ·Π°ΠΉΠ½, ΡΡΠΎΠ±Ρ ΠΏΡΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π²Π½ΡΡΡΠΈ. ΠΠ΅ΡΠΌΠΎΡΡΡ Π½Π° ΡΠΎ, ΡΡΠΎ ΠΎΠ½ΠΈ ΡΠΎΠ²Π΅ΡΡΠ΅Π½Π½ΠΎ ΡΠ°Π·Π½ΡΠ΅, ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· Π½ΠΈΡ ΠΈΠΌΠ΅Π΅Ρ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΡΡ ΡΡΡΡΠΊΡΡΡΡ. ΠΠ½ΠΈΠΌΠ°ΡΠ΅Π»ΡΠ½ΠΎ ΠΈΠ·ΡΡΠΈΡΠ΅ ΠΊΠΎΠ΄Ρ, ΡΡΠΎΠ±Ρ Ρ Π»Π΅Π³ΠΊΠΎΡΡΡΡ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΡΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ Π½Π° ΡΠ²ΠΎΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / Π‘ΠΊΠ°ΡΠ°ΡΡ jQuery AccordionjQuery Accordion ΠΡΡΡΡΡΡΠ²ΡΠ΅Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π° Π½Π° Π±Π°Π·Π΅ CSS (ΡΠ΅Π·Π΅ΡΠ²Π½ΡΠΉ jQuery). Π€ΠΎΡΠΊ Π½Π° Github ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π½Π°Ρ Π³ΡΡΠΏΠΏΠ°(ΠΎΠ΄ΠΈΠ½ΠΎΡΠ½ΡΠΉ ΠΎΡΠΊΡΡΡΡΠΉ) ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ 1 ΠΡΠ΅Π΄ΠΌΠ΅Ρ 2-Π³ΠΎ ΡΡΠΎΠ²Π½Ρ ItemHoodie ennui ΡΡΡΠ΅ΡΠΈΠΊΠ° Godard, Ρ
ΡΠ΄ΠΎΠΆΠ΅ΡΡΠ²Π΅Π½Π½Π°Ρ Π²Π΅ΡΠ΅ΡΠΈΠ½ΠΊΠ° Π»ΡΠ±ΠΎΠ³ΠΎ ΡΡΠ°ΡΡΠΎΠ²ΠΎΠ³ΠΎ ΡΠΎΠ½Π΄Π° Ρ ΡΠ°ΡΡΠΈΡΠΎΠ²ΠΊΠΎΠΉ ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΠΊΠ°ΡΠ±ΡΡΠ°ΡΠΎΡΠ° kogi ΠΈΠ· ΠΊΠΎΡΠ΅ΠΉΠ½ΠΎΠ³ΠΎ Π±Π°Π½Π΄ΠΆΠΎ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΡΠΎΠΈΡΡ
ΠΎΠΆΠ΄Π΅Π½ΠΈΡ.ΠΠΎΠ·Π΄Π½ΠΈΠΉ Π·Π°Π²ΡΡΠ°ΠΊ Ρ ΠΎΠ±ΡΠ΅ΠΌΠ½ΡΠΌΠΈ ΠΎΠ±ΡΠ΅ΠΌΠ½ΡΠΌΠΈ ΡΡΠΌΠΊΠ°ΠΌΠΈ Ρ v-ΠΎΠ±ΡΠ°Π·Π½ΡΠΌ Π²ΡΡΠ΅Π·ΠΎΠΌ, ΠΈΠ·ΡΡΠΊΠ°Π½Π½ΡΠΉ ΡΡΠΈΠ»Ρ Π² ΡΡΠΈΠ»Π΅ ΠΠΈΠ»ΡΡΠΌΡΠ±ΡΡΠ³ ΠΈΠ· Π²ΠΈΠ½ΠΎΠΊΡΡΠ½ΠΈ ΡΡΡΠ½ΠΎΠΉ ΡΠ°Π±ΠΎΡΡ. Π£ΡΡ Π±Π»ΠΎΠ³ ΠΏΡΡΠ½ΠΈΠΊΠΎΠ² ΠΠ°ΡΠ»Π΅ΡΠ°, ΠΊΠΎΡΠΌΠ°, Π±ΠΈΠΎΠ΄ΠΈΠ·Π΅Π»Ρ, ΠΌΡΡΠ½ΠΈΠΊΠ°, ΡΠ»ΠΈΡΠ½ΠΎΠ³ΠΎ ΠΈΡΠΊΡΡΡΡΠ²Π°. Π₯ΡΡΡΠ΅Π³ ΠΌΠ΅Π»ΠΊΠΈΠ΅ ΠΏΠ°ΡΡΠΈΠΈ Π±ΠΈΡΡΠ΅ΡΠΎΠ² Π³Π»ΡΠ±ΠΎΠΊΠΎΠ³ΠΎ v Π±Π΅Π· Π³Π»ΡΡΠ΅Π½Π°. ΠΠ»ΠΎΠ³ ΠΌΡΡΠ½ΠΈΠΊΠ° ΠΏΠΎ ΡΠ΅ΠΌΠΈΠΎΡΠΈΠΊΠ΅, ΠΏΠ°Π»Π΅ΠΎ-Π°ΡΠΈΠΌΠΌΠ΅ΡΡΠΈΡΠ½ΡΠΉ ΠΌΠΎΠΏΡ Π½Π°ΡΠ²Π°Π»Π° ΠΈΠ· ΡΠ΅Π»Π²Π°ΠΆΠ° ΠΠΈΠ»Ρ Π Π΅ΠΌΠ΅ΡΠ»Π΅Π½Π½ΠΈΠΊ Π£ΡΡ ΠΠ½Π΄Π΅ΡΡΠΎΠ½ ΠΏΠΎΡΠ°Π΄ΠΈΠ» Π½Π° Π½Π΅Π³ΠΎ ΠΏΡΠΈΡΡ, ΠΏΡΡΡΡΡ ΡΠΊΡΡΡ. Artisan McSweeney’s Shoreditch, wolf yr Marfa street art locavore ΠΊΡΠ°ΡΡΠΎΠ²ΠΎΠ΅ ΠΏΠΈΠ²ΠΎ, ΡΡΡΠ΅ΡΠΈΠΊΠ° Π΄ΠΆΠ΅Π½ΡΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ 90-Ρ
. Yr hella fingerstache, Echo Park VHS +1 ΡΠ΅ΡΠΊΠΎΠ²Π½ΡΠΉ ΠΊΠ»ΡΡ XOXO Vice selvage Π³Π°ΡΡΡΠΎΠΏΠ°Π±, Π³ΠΎΡΠΎΠ²ΡΠ΅ Π±ΡΠΊΠ²Π°Π»ΡΠ½ΠΎ ΠΏΡΡΠ½ΠΈΠΊΠΈ.ItemItemItemItem ItemItem3rd Level 3-ΠΉ ΡΡΠΎΠ²Π΅Π½Ρ ItemItemItem Accordion Group(Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΎΡΠΊΡΡΡΡΡ ) ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ 1 ΠΡΠ΅Π΄ΠΌΠ΅Ρ 2-Π³ΠΎ ΡΡΠΎΠ²Π½Ρ ItemHoodie ennui ΡΡΡΠ΅ΡΠΈΠΊΠ° Godard, Ρ
ΡΠ΄ΠΎΠΆΠ΅ΡΡΠ²Π΅Π½Π½Π°Ρ Π²Π΅ΡΠ΅ΡΠΈΠ½ΠΊΠ° Π»ΡΠ±ΠΎΠ³ΠΎ ΡΡΠ°ΡΡΠΎΠ²ΠΎΠ³ΠΎ ΡΠΎΠ½Π΄Π° Ρ ΡΠ°ΡΡΠΈΡΠΎΠ²ΠΊΠΎΠΉ ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΠΊΠ°ΡΠ±ΡΡΠ°ΡΠΎΡΠ° kogi ΠΈΠ· ΠΊΠΎΡΠ΅ΠΉΠ½ΠΎΠ³ΠΎ Π±Π°Π½Π΄ΠΆΠΎ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΡΠΎΠΈΡΡ
ΠΎΠΆΠ΄Π΅Π½ΠΈΡ. ΠΠΎΠ·Π΄Π½ΠΈΠΉ Π·Π°Π²ΡΡΠ°ΠΊ Ρ ΠΎΠ±ΡΠ΅ΠΌΠ½ΡΠΌΠΈ ΠΎΠ±ΡΠ΅ΠΌΠ½ΡΠΌΠΈ ΡΡΠΌΠΊΠ°ΠΌΠΈ Ρ v-ΠΎΠ±ΡΠ°Π·Π½ΡΠΌ Π²ΡΡΠ΅Π·ΠΎΠΌ, ΠΈΠ·ΡΡΠΊΠ°Π½Π½ΡΠΉ ΡΡΠΈΠ»Ρ Π² ΡΡΠΈΠ»Π΅ ΠΠΈΠ»ΡΡΠΌΡΠ±ΡΡΠ³ ΠΈΠ· Π²ΠΈΠ½ΠΎΠΊΡΡΠ½ΠΈ ΡΡΡΠ½ΠΎΠΉ ΡΠ°Π±ΠΎΡΡ.Π£ΡΡ Π±Π»ΠΎΠ³ ΠΏΡΡΠ½ΠΈΠΊΠΎΠ² ΠΠ°ΡΠ»Π΅ΡΠ°, ΠΊΠΎΡΠΌΠ°, Π±ΠΈΠΎΠ΄ΠΈΠ·Π΅Π»Ρ, ΠΌΡΡΠ½ΠΈΠΊΠ°, ΡΠ»ΠΈΡΠ½ΠΎΠ³ΠΎ ΠΈΡΠΊΡΡΡΡΠ²Π°. Π₯ΡΡΡΠ΅Π³ ΠΌΠ΅Π»ΠΊΠΈΠ΅ ΠΏΠ°ΡΡΠΈΠΈ Π±ΠΈΡΡΠ΅ΡΠΎΠ² Π³Π»ΡΠ±ΠΎΠΊΠΎΠ³ΠΎ v Π±Π΅Π· Π³Π»ΡΡΠ΅Π½Π°. ΠΠ»ΠΎΠ³ ΠΌΡΡΠ½ΠΈΠΊΠ° ΠΏΠΎ ΡΠ΅ΠΌΠΈΠΎΡΠΈΠΊΠ΅, ΠΏΠ°Π»Π΅ΠΎ-Π°ΡΠΈΠΌΠΌΠ΅ΡΡΠΈΡΠ½ΡΠΉ ΠΌΠΎΠΏΡ Π½Π°ΡΠ²Π°Π»Π° ΠΈΠ· ΡΠ΅Π»Π²Π°ΠΆΠ° ΠΠΈΠ»Ρ Π Π΅ΠΌΠ΅ΡΠ»Π΅Π½Π½ΠΈΠΊ Π£ΡΡ ΠΠ½Π΄Π΅ΡΡΠΎΠ½ ΠΏΠΎΡΠ°Π΄ΠΈΠ» Π½Π° Π½Π΅Π³ΠΎ ΠΏΡΠΈΡΡ, ΠΏΡΡΡΡΡ ΡΠΊΡΡΡ. Artisan McSweeney’s Shoreditch, wolf yr Marfa street art locavore ΠΊΡΠ°ΡΡΠΎΠ²ΠΎΠ΅ ΠΏΠΈΠ²ΠΎ, ΡΡΡΠ΅ΡΠΈΠΊΠ° Π΄ΠΆΠ΅Π½ΡΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ 90-Ρ
. Yr hella fingerstache, Echo Park VHS +1 ΡΠ΅ΡΠΊΠΎΠ²Π½ΡΠΉ ΠΊΠ»ΡΡ XOXO Vice selvage Π³Π°ΡΡΡΠΎΠΏΠ°Π± Π³ΠΎΡΠΎΠ²ΡΠ΅ Π±ΡΠΊΠ²Π°Π»ΡΠ½ΠΎ ΠΏΡΡΠ½ΠΈΠΊΠΈ. ItemItem3rd Level 3-ΠΉ ΡΡΠΎΠ²Π΅Π½Ρ ItemItemItem ΠΠ΄ΠΈΠ½ΠΎΡΠ½ΡΠΉ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½(easyInOutQuad, Π΄Π»ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ 600 ΠΌΡ) ΠΠ΄ΠΈΠ½ΠΎΡΠ½ΡΠΉ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ ΠΠΏΡΠΈΠΈ
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡΒ© 2014 ΠΠΈΠΊΡΠΎΡ Π€Π΅ΡΠ½Π°Π½Π΄Π΅Ρ / @vctrfrnndz / email / donate ΠΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ ΠΊ Π»ΠΎΠΊΠ°Π»ΡΠ½ΠΎΠΉ ΡΡΡΠ»ΠΊΠ΅ Π² jQuery AccordionΠΡΠ° ΡΡΠ½ΠΊΡΠΈΡ, ΡΠΊΠΎΡΠ΅Π΅ Π²ΡΠ΅Π³ΠΎ, Π±ΡΠ΄Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π²Π΅Π±-ΡΠ»ΡΠΆΠ±Π°ΠΌΠΈ, ΠΎΠ΄Π½Π°ΠΊΠΎ ΠΎΠ½Π° ΠΎΡΠΊΡΡΡΠ° Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π²Π»Π°Π΄Π΅Π»ΡΡΠ°ΠΌΠΈ ΡΡΡΠ°Π½ΠΈΡ, Π΅ΡΠ»ΠΈ Π²Ρ Π·Π½Π°ΠΊΠΎΠΌΡ Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΠΌΠΈ Π±Π°Π·ΠΎΠ²ΡΠΌΠΈ Π·Π½Π°Π½ΠΈΡΠΌΠΈ HTML.ΠΡΠ»ΠΈ Π²Π°ΠΌ ΡΠ΄ΠΎΠ±Π½ΠΎ ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ HTML-ΠΊΠΎΠ΄ ΡΠ²ΠΎΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΡ Π² ΠΏΠΎΠΈΡΠΊΠ°Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΡ ΠΈΠΌΠ΅Π½ ΠΊΠ»Π°ΡΡΠΎΠ² ΠΈΠ»ΠΈ Π°ΡΡΠΈΠ±ΡΡΠΎΠ² id, ΡΠΎ Ρ Π²Π°Ρ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌ Ρ ΡΡΠΎΠΉ ΡΡΠ½ΠΊΡΠΈΠ΅ΠΉ. ΠΡΠ° ΡΡΠ½ΠΊΡΠΈΡ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π»ΠΎΠΊΠ°Π»ΡΠ½ΡΡ ΡΡΡΠ»ΠΊΡ, ΡΡΡΠ»ΠΊΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Π²Π΅Π΄Π΅Ρ ΠΊ ΡΠ°ΡΡΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π½Π° ΡΠ΅ΠΊΡΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅, ΠΊΠΎΡΠΎΡΠ°Ρ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π²Π½ΡΡΡΠΈ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π°, Π±ΡΠ΄Ρ ΡΠΎ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ jquery (ΡΠΈΠ½ΠΈΠΉ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½) ΠΠΠ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ Π°Π±Π·Π°ΡΠ°. ΠΠ±ΡΡΠ½ΠΎ Π»ΠΎΠΊΠ°Π»ΡΠ½Π°Ρ ΡΡΡΠ»ΠΊΠ° ΠΈΠΌΠ΅Π΅Ρ Ρ Π΅Ρ-Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π² ΠΊΠΎΠ½ΡΠ΅ URL-Π°Π΄ΡΠ΅ΡΠ°, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ: www.csn.edu/benefits-retirnement#my-content.ΠΡΠ° ΡΡΡΠ»ΠΊΠ° ΠΎΠ±ΡΡΠ½ΠΎ ΡΡΡΠ»Π°Π΅ΡΡΡ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ Π°ΡΡΠΈΠ±ΡΡΠ° id «my-content», ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ°ΡΡΡΡ URL-Π°Π΄ΡΠ΅ΡΠ°, ΠΈΠ΄ΡΡΠ΅ΠΉ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ ΠΏΠΎΡΠ»Π΅ Π·Π½Π°ΠΊΠ° ΡΠ΅ΡΠ΅ΡΠΊΠΈ / ΡΠ΅ΡΠ΅ΡΠΊΠΈ. ΠΠ΄Π½Π°ΠΊΠΎ ΡΠΎ ΡΠ²Π΅ΡΠ½ΡΡΡΠΌΠΈ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π°ΠΌΠΈ Π²Ρ Π½Π΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΡΡΠΎ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ ΡΠΊΡΡΠ²Π°Π΅Ρ Π΅Π³ΠΎ. ΠΠΎΡ Π·Π΄Π΅ΡΡ ΠΈ Π²ΡΡΡΠΏΠ°Π΅Ρ Π² ΠΈΠ³ΡΡ ΡΡΠΎΡ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠΉ Π΄ΡΠ°Π³ΠΎΡΠ΅Π½Π½ΡΠΉ ΠΊΠ°ΠΌΠ΅Π½Ρ. Π’Π΅ΠΏΠ΅ΡΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²Π»ΠΎΠΆΠΈΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΡΡΠΎΠ±Ρ ΡΠ΅Π»ΡΠΊΠΈ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΠ»ΠΈ ΠΏΠΎ Π²ΡΠ΅ΠΌ, ΠΊΡΠΎΠΌΠ΅ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π³ΠΎ. ΠΡΠΈ ΡΠ΅Π»ΡΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π΄Π»Ρ ΠΎΡΠΊΡΡΡΠΈΡ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ΠΎΠ² Π΄ΠΎ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠΎΡΡΠΈΠ³Π½ΡΠ² ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΡΡΡΠ°Π½ΠΈΡΠ° Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡΡΡ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΊΠ°ΠΊ ΡΡΠΎ ΡΠ΄Π΅Π»Π°Π»Π° Π±Ρ ΡΡΠ°Π½Π΄Π°ΡΡΠ½Π°Ρ Π»ΠΎΠΊΠ°Π»ΡΠ½Π°Ρ ΡΡΡΠ»ΠΊΠ°. ΠΡΡΡ Π΄Π²Π° Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ°Π·Π½ΡΡ ΡΠΏΠΎΡΠΎΠ±Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΎ; Ρ Π°ΡΡΠΈΠ±ΡΡΠ°ΠΌΠΈ id ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈ / ΠΈΠ»ΠΈ Ρ ΠΈΠΌΠ΅Π½Π°ΠΌΠΈ ΠΊΠ»Π°ΡΡΠΎΠ² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π°ΡΡΠΈΠ±ΡΡΠΎΠ² ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΠ° ΠΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π΄ΠΎΠ»ΠΆΠ½Π° Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ Π»ΠΎΠΊΠ°Π»ΡΠ½Π°Ρ ΡΡΡΠ»ΠΊΠ° Π΄Π»Ρ ΠΎΠ΄ΠΈΠ½ΠΎΡΠ½ΠΎΠ³ΠΎ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π°, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ ΡΠ΅Π»Π΅Π²ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΠΎΠΌ Β«my-contentΒ»: https://www.csn.edu/benefits-retirement # ui-accordion-jquery-ui-filter-header-2 # my-content . ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Π΄Π²ΠΎΠΉΠ½ΡΠ΅ Ρ Π΅Ρ-Π·Π½Π°ΡΠ΅Π½ΠΈΡ.ΠΠ΅ΡΠ²ΠΎΠ΅ Ρ Π΅Ρ-Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ — ΡΡΠΎ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π° (ΡΠΎΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΡΠ΅Π±ΡΠ΅Ρ ΡΠ΅Π»ΡΠΊΠ°), ΠΏΠΎΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ Π½ΠΈΠΆΠ΅: ΠΡΠΎΡΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Ρ Π΅Ρ-ΡΡΠ½ΠΊΡΠΈΠΈ — ΡΡΠΎ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠΌ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π°, ΠΊ ΠΊΠΎΡΠΎΡΠΎΠΌΡ Π½ΡΠΆΠ½ΠΎ ΠΏΡΠΎΠΊΡΡΡΠΈΡΡ. Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΡΠ΅Π»ΠΊΠ°Π΅Ρ ΡΠΊΠ°Π·Π°Π½Π½ΡΡ Π²ΡΡΠ΅ Π»ΠΎΠΊΠ°Π»ΡΠ½ΡΡ ΡΡΡΠ»ΠΊΡ (Π΄Π²ΠΎΠΉΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Ρ ΡΡΠ°), ΡΠΈΡΡΠ΅ΠΌΠ° Π½Π°Ρ ΠΎΠ΄ΠΈΡ ΠΏΠ΅ΡΠ²ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΡΠ΅Π»ΠΊΠ°Π΅Ρ ΠΏΠΎ Π½Π΅ΠΌΡ, ΡΡΠΎ Π²ΡΠ·ΡΠ²Π°Π΅Ρ ΠΎΡΠΊΡΡΡΠΈΠ΅ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΈΠ½Π°, Π° Π·Π°ΡΠ΅ΠΌ Π½Π° Π²ΡΠΎΡΠΎΠΌ ΠΈ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅ ΡΠΈΡΡΠ΅ΠΌΠ° ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅Ρ Π΅Π³ΠΎ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. . ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ² ΠΈΠΌΠ΅Π½ ΠΊΠ»Π°ΡΡΠΎΠ²: ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ ΠΊΠ»Π°ΡΡΠΎΠ² Π΄Π»Ρ Π²ΡΠ±ΠΎΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Ρ Π°ΡΡΠΈΠ±ΡΡΠ°ΠΌΠΈ id, Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΌΠΈ ΡΠΈΡΡΠ΅ΠΌΠΎΠΉ, ΡΠ°ΠΊΠΈΠΌΠΈ ΠΊΠ°ΠΊ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ΠΎΠ² ΠΈ ΠΏΠ°Π½Π΅Π»ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ.ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΊΠΎΠ³Π΄Π° Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Ρ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡΡΡ, ΡΠ΄Π°Π»ΡΡΡΡΡ ΠΈΠ»ΠΈ ΠΏΠ΅ΡΠ΅ΡΠΏΠΎΡΡΠ΄ΠΎΡΠΈΠ²Π°ΡΡΡΡ, Π°ΡΡΠΈΠ±ΡΡΡ id ΠΌΠΎΠ³ΡΡ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΠΏΠΎΡΡΠ΄ΠΊΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π°. Π§ΡΠΎΠ±Ρ ΠΏΡΠΈΡΠΏΠΎΡΠΎΠ±ΠΈΡΡΡΡ ΠΊ ΡΡΠΎΠΌΡ, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΠΌΠ΅Π½Π° ΠΊΠ»Π°ΡΡΠΎΠ², Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ: https://www.csn.edu/benefits-retirement#.ui-accordion-header[1 provided#my-content ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΡΠ΅Π»Π΅ΠΊΡΠΎΡ ΠΏΠΎΡΠ»Π΅ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ (#) Ρ ΡΡΠ° «.ui-accordion-header [1]». ΠΡΠΎ ΡΠΈΠΏΠΈΡΠ½ΡΠΉ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ ΠΈΠΌΠ΅Π½ΠΈ ΠΊΠ»Π°ΡΡΠ° Ρ ΠΏΡΠ΅Π΄ΡΠ΅ΡΡΠ²ΡΡΡΠ΅ΠΉ Π΅ΠΌΡ ΡΠΎΡΠΊΠΎΠΉ (ΡΠΊΠ°Π·ΡΠ²Π°ΡΡΠΈΠΉ ΡΠΈΡΡΠ΅ΠΌΠ΅ Π½Π° ΠΏΠΎΠΈΡΠΊ ΠΈΠΌΠ΅Π½ΠΈ ΠΊΠ»Π°ΡΡΠ°, Π° Π½Π΅ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΠ°), Π½ΠΎ ΠΎΠ½ ΡΠ°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ ΠΈΠ½Π΄Π΅ΠΊΡΠ° [1], ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΎΠΎΠ±ΡΠ°Π΅Ρ ΡΠΈΡΡΠ΅ΠΌΠ΅: Β«ΠΡΠ±ΡΠ°ΡΡ ΠΏΠ΅ΡΠ²ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΈΠΌΠ΅Π½Π΅ΠΌ ΠΊΠ»Π°ΡΡΠ° ‘ui-accordion-header’ «.ΠΡΠ»ΠΈ Π±Ρ Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»Π°ΡΡ ΡΠΈΡΡΠ° Β«3Β», ΠΎΠ½Π° Π±Ρ Β«Π²ΡΠ±ΡΠ°Π»Π° ΡΡΠ΅ΡΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΈΠΌΠ΅Π½Π΅ΠΌ ΠΊΠ»Π°ΡΡΠ° ‘ui-accordion-header’Β». Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π°ΠΉΠ΄Π΅Π½, Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΡΠ΅Π»ΠΊΠ½ΡΠ», ΡΡΠΎΠ±Ρ ΠΎΡΠΊΡΡΡΡ Π΅Π³ΠΎ, Π·Π°ΡΠ΅ΠΌ ΠΎΠ½ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΡ ΠΊ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌΡ Ρ Π΅ΡΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ° ΠΈ ΠΏΠΎΠ²ΡΠΎΡΡΠ΅ΡΡΡ, ΠΏΠΎΠΊΠ° Π½Π΅ Π½Π°ΠΉΠ΄Π΅Ρ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ. ΠΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π΄Π΅Π»Π°ΡΡ ΡΡΠΎΠ»ΡΠΊΠΎ ΡΠ°Π·, ΡΠΊΠΎΠ»ΡΠΊΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ, ΡΡΠΎΠ±Ρ ΠΎΡΠΊΡΡΡΡ Π½ΡΠΆΠ½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ. ΠΠΎΡΠ»Π΅Π΄Π½Π΅Π΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Ρ Π΅Ρ-ΡΡΠ½ΠΊΡΠΈΠΈ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ Π°ΡΡΠΈΠ±ΡΡΠ° id, ΡΡΠΎΠ±Ρ ΡΠ°Π±ΠΎΡΠ°Π»Π° ΡΡΠ°Π½Π΄Π°ΡΡΠ½Π°Ρ ΡΡΠ½ΠΊΡΠΈΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π»ΠΎΠΊΠ°Π»ΡΠ½ΠΎΠΉ ΡΡΡΠ»ΠΊΠΈ. ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ Π΅ΡΠ»ΠΈ ΡΠΎΡΠΊΠ° Π΄Π»Ρ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ° ΠΈΠΌΠ΅Π½ΠΈ ΠΊΠ»Π°ΡΡΠ° ΠΠ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ, Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΡΡΡ ΠΊΠ°ΠΊ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ Π½ΡΠΆΠ½ΠΎ Π½Π°ΠΉΡΠΈ. jq-Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ — npmΠΡΠΎ ΠΎΡΠ²Π΅ΡΠ²Π»Π΅Π½ΠΈΠ΅ jQuery Accordion. ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery Π΄Π»Ρ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π° Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΎΠΉ CSS. JQuery Accordion ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Ρ CSS Π΄Π»Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΎΡΠΊΡΡΡΠΈΡ / Π·Π°ΠΊΡΡΡΠΈΡ Ρ ΠΎΡΠΊΠ°ΡΠΎΠΌ ΠΊ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ jQuery, ΠΊΠΎΠ³Π΄Π° ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Ρ CSS Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ. Π§ΡΠΎΠ±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ Π² Π²Π°ΡΠ΅ΠΌ ΠΏΡΠΎΠ΅ΠΊΡΠ΅, ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π½Π΅Π±ΠΎΠ»ΡΡΠ°Ρ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΡ ΠΈΠ»ΠΈ ΠΊΠΎΠ΄. ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ Π΄Π΅ΠΌΠΎ. ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ IE9 + ΠΈ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ. Π Π°Π·ΡΠ°Π±ΠΎΡΠ°Π½ΠΎ ΠΠΈΠΊΡΠΎΡΠΎΠΌ Π€Π΅ΡΠ½Π°Π½Π΄Π΅ΡΠΎΠΌ. ΠΠΎΠ΄ Π»ΠΈΡΠ΅Π½Π·ΠΈΠ΅ΠΉ MIT. Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅
ΠΠΏΡΠΈΠΈ
Π‘ΠΎΠ±ΡΡΠΈΡ Π‘ΡΡΡΠΊΡΡΡΠ° ΠΎΠ±ΡΠ°Π·ΡΠ°ΠΠ»Ρ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π° / ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π³ΠΎΡΡ ΡΠΏΠΈΡΠΊΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΡΡ ΡΡΡΡΠΊΡΡΡΡ / Π°ΡΡΠΈΠ±ΡΡΡ Π΄Π°Π½Π½ΡΡ :
ΠΠ»Ρ Π³ΡΡΠΏΠΏΡ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ΠΎΠ² Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π°ΡΡΠΈΠ±ΡΡ
ΠΠ°ΠΏΡΡΠΊ Π² ΠΎΡΠΊΡΡΡΠΎΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ Π§ΡΠΎΠ±Ρ ΠΈΠ½ΠΈΡΠΈΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ Π² ΠΎΡΠΊΡΡΡΠΎΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ, ΠΏΡΠΎΡΡΠΎ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΠΊΠ»Π°ΡΡ
ΠΠΊΠ»Π°Π΄ΠΡΠΎΠ²Π΅ΡΠΈΡΡ ΠΠΠΠΠΠΠΠ’ΠΠΠ¬ΠΠ.md Π΄Π»Ρ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ. ΠΠΈΡΠ΅Π½Π·ΠΈΡΠΠΈΡΠ΅Π½Π·ΠΈΡ MIT Β© Nay Zaw Oo ΠΡΠΈΠΌΠ΅Ρ ΡΠΊΠ»Π°Π΄Π½ΠΎΠ³ΠΎ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π° JQuery | ΠΠΎΠ±ΠΈΡΠΊΡΠΎΠ»Π»ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠΊΠ»Π°Π΄Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈ Π³Π°ΡΠΌΠΎΡΠΊΡ, ΡΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡΠ°Π»ΡΠ½ΡΠ΅ ΠΏΠ°Π½Π΅Π»ΠΈ, Π³ΡΡΠΏΠΏΡ ΠΈ ΠΊΠ°ΡΡΠΎΡΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡ ΠΎΠ΄Π½Ρ Π·Π° Π΄ΡΡΠ³ΠΎΠΉ ΠΈΠ»ΠΈ ΠΏΠΎΠΎΡΠ΅ΡΠ΅Π΄Π½ΠΎ Π·Π°ΠΊΡΡΠ²Π°ΡΡ ΠΈ ΠΎΡΠΊΡΡΠ²Π°ΡΡ. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π΅Π³ΠΎ Π΄Π»Ρ ΡΠ΅Π³ΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π΄Π»ΠΈΠ½Π½ΡΡ ΡΠΎΡΠΌ ΠΈ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° ΠΈΠ»ΠΈ Π΄Π»Ρ ΠΏΠΎΡΡΠ΅ΠΏΠ΅Π½Π½ΠΎΠ³ΠΎ ΡΠ°ΡΠΊΡΡΡΠΈΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ. Π Π°Π·Π±ΠΎΡΠ½ΡΠ΅ ΠΈ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π½ΡΠ΅ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΈ Π΄ΠΎΡΡΡΠΏΠ½Ρ Π΄Π»Ρ Π΄ΡΡΠ³ΠΈΡ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΎΠ². ΠΡΠΎΡΠΌΠΎΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΉ ΠΈ ΠΊΠΎΠ΄Π° Π΄Π»Ρ ΠΡΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΈ ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΡΠΊΠ»Π°Π΄Π½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ JQuery. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π΅Π³ΠΎ Π΄Π»Ρ ΡΠ΅Π³ΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π΄Π»ΠΈΠ½Π½ΡΡ ΡΠΎΡΠΌ, Π΄Π΅Π»Π°Ρ Π³ΡΡΠΏΠΏΡ ΠΏΠΎΠ»Π΅ΠΉ ΡΠ°ΡΡΠΈΡΡΠ΅ΠΌΡΠΌΠΈ / ΡΠ²ΠΎΡΠ°ΡΠΈΠ²Π°Π΅ΠΌΡΠΌΠΈ. ΠΠ»Ρ jQuery ΠΈΠ»ΠΈ jQuery Mobile. ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ JQuery Accordion Ρ ΠΎΠ΄Π½ΠΎΠΉ ΠΎΡΠΊΡΡΡΠΎΠΉ / ΡΠ°ΡΡΠΈΡΠ΅Π½Π½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΡΡ.ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΡΠΎ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΌΠΎΠ³Π»ΠΈ ΡΠΎΡΡΠ΅Π΄ΠΎΡΠΎΡΠΈΡΡΡΡ Π½Π° ΠΎΠ΄Π½ΠΎΠΌ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠ΅ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° Π·Π° ΡΠ°Π·. ΠΠ»Ρ jQuery ΠΈΠ»ΠΈ jQuery Mobile. ΠΡΠΈΠΌΠ΅Ρ ΡΠΊΠ»Π°Π΄Π½ΡΡ ΠΊΠ°ΡΡΠΎΡΠ΅ΠΊ JQuery. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π΅Π³ΠΎ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ / ΡΠΊΡΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΊΠ°ΡΡΡ. Π Π°Π·Π²Π΅ΡΡΡΠ²Π°Π½ΠΈΠ΅ ΠΈ ΡΠ²ΠΎΡΠ°ΡΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΡΠΈ ΡΠ΅Π»ΡΠΊΠ΅ ΠΏΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΡ ΠΊΠ°ΡΡΠΎΡΠΊΠΈ. ΠΠ»Ρ jQuery ΠΈΠ»ΠΈ jQuery Mobile. ΠΡΠ΅ΡΠ΅ ΡΡΠΎ-ΡΠΎ, ΡΠ΅Π³ΠΎ Π½Π΅ Π²ΠΈΠ΄Π΅Π»ΠΈ, ΠΈΠ»ΠΈ Ρ Π²Π°Ρ Π΅ΡΡΡ Π²ΠΎΠΏΡΠΎΡ ΠΎ ΠΏΡΠΎΠ΄Π°ΠΆΠ΅? Π‘ΠΏΡΠΎΡΠΈ Π½Π°Ρ ΠΎ ΡΠ΅ΠΌ ΡΠ³ΠΎΠ΄Π½ΠΎ ΠΠ°ΡΡΡΠΎΠΉΡΠ΅ ΠΈ ΠΏΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΈ Π»ΠΎΠΊΠ°Π»ΡΠ½ΠΎ ΠΠΎΠΉΠ΄ΠΈΡΠ΅ ΠΈΠ»ΠΈ Π½Π°ΡΠ½ΠΈΡΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠ±Π½ΠΎΠΉ Π²Π΅ΡΡΠΈΠ΅ΠΉ ΠΠ°ΠΊΠΎΠΉ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅? Javascript jQuery AngularJS Π£Π³Π»ΠΎΠ²ΠΎΠΉ Π Π΅Π°Π³ΠΈΡΠΎΠ²Π°ΡΡ ΠΡΡΠ³ΠΎΠ΅ Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ Π΄Π΅ΠΌΠΎ Π² ΡΠ²ΠΎΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π‘Π»Π΅Π΄ΡΠΉΡΠ΅ ΡΡΠΎΠΌΡ Π±ΡΡΡΡΠΎΠΌΡ Π΄Π²ΡΡ ΠΌΠΈΠ½ΡΡΠ½ΠΎΠΌΡ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Ρ ΠΏΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ΅ ΠΠ°ΠΊΡΡΡΡ ΠΎΠΊΠ½ΠΎ Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ Π΄Π΅ΠΌΠΎ Π² ΡΠ²ΠΎΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π‘Π»Π΅Π΄ΡΠΉΡΠ΅ ΡΡΠΎΠΌΡ Π±ΡΡΡΡΠΎΠΌΡ Π΄Π²ΡΡ ΠΌΠΈΠ½ΡΡΠ½ΠΎΠΌΡ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Ρ ΠΏΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ΅ ΠΠ°ΠΊΡΡΡΡ ΠΎΠΊΠ½ΠΎ ΠΠ°ΡΡΡΠΎΠΉΡΠ΅ ΠΈ ΠΏΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΈ Π»ΠΎΠΊΠ°Π»ΡΠ½ΠΎ ΠΠ°ΠΊ Π±Ρ Π²Ρ Ρ ΠΎΡΠ΅Π»ΠΈ ΡΡΠΎ ΡΠ΄Π΅Π»Π°ΡΡ? Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ Π΄Π΅ΠΌΠΎ Π² ΡΠ²ΠΎΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π‘Π»Π΅Π΄ΡΠΉΡΠ΅ ΡΡΠΎΠΌΡ Π±ΡΡΡΡΠΎΠΌΡ Π΄Π²ΡΡ ΠΌΠΈΠ½ΡΡΠ½ΠΎΠΌΡ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Ρ ΠΏΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ΅ ΠΠ°ΠΊΡΡΡΡ ΠΎΠΊΠ½ΠΎ Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ Π·Π° ΡΠΊΠ°ΡΠΈΠ²Π°Π½ΠΈΠ΅ ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΠΈ Π½Π°ΡΡΡΠΎΠΉΡΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π»ΠΎΠΊΠ°Π»ΡΠ½ΠΎ Π Π°ΡΠΏΠ°ΠΊΡΠΉΡΠ΅ zip-ΡΠ°ΠΉΠ» ΠΈ Π·Π°ΠΏΡΡΡΠΈΡΠ΅ ΠΏΡΠΎΠ΅ΠΊΡ, ΠΊΠ°ΠΊ Π»ΡΠ±ΠΎΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Ionic.Π£Π±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ Ρ Π²Π°Ρ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ Ionic CLI, ΠΈ ΠΎΡΠΊΡΠΎΠΉΡΠ΅ ΡΠ΅ΡΠΌΠΈΠ½Π°Π» Π² ΠΊΠΎΡΠ½Π΅Π²ΠΎΠΉ ΠΏΠ°ΠΏΠΊΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ. Π¨Π°Π³ 1. ΠΠ°ΠΏΡΡΠΊ Π² ΠΊΠΎΡΠ½Π΅Π²ΠΎΠΉ ΠΏΠ°ΠΏΠΊΠ΅ Π¨Π°Π³ 2. ΠΠ°ΠΏΡΡΡΠΈΡΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅. Π‘ΠΎΠΎΠ±ΡΠΈΡΠ΅ Π½Π°ΠΌ, Π΅ΡΠ»ΠΈ ΠΌΡ ΡΠΌΠΎΠΆΠ΅ΠΌ ΠΏΠΎΠΌΠΎΡΡ ΠΈ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΠ΄ΠΎΠ²ΠΎΠ»ΡΡΡΠ²ΠΈΠ΅! Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ Π·Π° ΡΠΊΠ°ΡΠΈΠ²Π°Π½ΠΈΠ΅ ΠΠΎΠΊΠ°Π»ΡΠ½Π°Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠ° Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΉ ΠΡΠ΅ Π½Π°ΡΡΡΠΎΠ΅Π½ΠΎ ΡΠ°ΠΊ, ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΡΠ°Π·Ρ ΠΎΠΊΡΠ½ΡΡΡΡΡ ΠΈ Π½Π°ΡΠ°ΡΡ ΠΈΡΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ. ΠΠ·Π²Π»Π΅ΠΊΠΈΡΠ΅ zip-ΡΠ°ΠΉΠ» ΠΈ ΠΏΡΠΎΡΡΠΎ ΠΎΡΠΊΡΠΎΠΉΡΠ΅ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΡΠ΅ Π²Π΅ΡΡΠΈΠΈ Π² ΡΠ²ΠΎΠ΅ΠΌ Π»ΡΠ±ΠΈΠΌΠΎΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠ΅. Π‘ΠΎΠΎΠ±ΡΠΈΡΠ΅ Π½Π°ΠΌ, Π΅ΡΠ»ΠΈ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΠΎΠΌΠΎΡΡ ΠΈ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΠ΄ΠΎΠ²ΠΎΠ»ΡΡΡΠ²ΠΈΠ΅! π Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ Π·Π° ΡΠΊΠ°ΡΠΈΠ²Π°Π½ΠΈΠ΅ ΠΠΎΠΊΠ°Π»ΡΠ½Π°Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠ° Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΉ ΠΠ·Π²Π»Π΅ΠΊΠΈΡΠ΅ zip-ΡΠ°ΠΉΠ» ΠΈ Π·Π°ΠΏΡΡΡΠΈΡΠ΅ ΠΏΡΠΎΠ΅ΠΊΡ, ΠΊΠ°ΠΊ Π»ΡΠ±ΠΎΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Angular CLI.Π£Π±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ Ρ Π²Π°Ρ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ Angular CLI. ΠΠ»Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠ°ΡΠΏΠ°ΠΊΡΠΉΡΠ΅ zip-ΡΠ°ΠΉΠ», ΠΎΡΠΊΡΠΎΠΉΡΠ΅ ΠΎΠΊΠ½ΠΎ ΡΠ΅ΡΠΌΠΈΠ½Π°Π»Π° ΠΈ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ. Π¨Π°Π³ 1. ΠΠ°ΠΏΡΡΠΊ Π² ΠΊΠΎΡΠ½Π΅Π²ΠΎΠΉ ΠΏΠ°ΠΏΠΊΠ΅ Π¨Π°Π³ 2. ΠΠ°ΠΏΡΡΡΠΈΡΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅. Π‘ΠΎΠΎΠ±ΡΠΈΡΠ΅ Π½Π°ΠΌ, Π΅ΡΠ»ΠΈ ΠΌΡ ΡΠΌΠΎΠΆΠ΅ΠΌ ΠΏΠΎΠΌΠΎΡΡ ΠΈ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΠ΄ΠΎΠ²ΠΎΠ»ΡΡΡΠ²ΠΈΠ΅! π Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ Π·Π° ΡΠΊΠ°ΡΠΈΠ²Π°Π½ΠΈΠ΅ ΠΠΎΠΊΠ°Π»ΡΠ½Π°Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠ° Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΉ ΠΡΠ΅ Π½Π°ΡΡΡΠΎΠ΅Π½ΠΎ ΡΠ°ΠΊ, ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΡΠ°Π·Ρ ΠΎΠΊΡΠ½ΡΡΡΡΡ ΠΈ Π½Π°ΡΠ°ΡΡ ΠΈΡΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ. ΠΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ»ΠΈ ΠΏΡΠΎΠ±Π½ΡΡ Π²Π΅ΡΡΠΈΡ, ΡΡΠΎΠ±Ρ Π²Ρ ΠΌΠΎΠ³Π»ΠΈ ΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΡΠ΅ Π²Π΅ΡΡΠΈΠΈ Π»ΠΎΠΊΠ°Π»ΡΠ½ΠΎ. Π‘Π°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± Π½Π°ΡΠ°ΡΡ — ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ ΠΈΠ½ΡΡΡΡΠΊΡΠΈΡΠΌ ΠΏΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ΅ ΠΈ Π zip-ΡΠ°ΠΉΠ»Π΅ Π²Ρ Π½Π°ΠΉΠ΄Π΅ΡΠ΅ ΠΏΠΎΠ»Π½ΠΎΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Kitchen-Wink Ionic. Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ Π·Π° ΡΠΊΠ°ΡΠΈΠ²Π°Π½ΠΈΠ΅ ΠΠΎΠΊΠ°Π»ΡΠ½Π°Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠ° Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΉ Π Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ Π² Π±ΡΠ°ΡΠ·Π΅Ρ Babel ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°ΡΠ΅Π»Ρ ES6 ΠΈ JSX. ΠΠ·Π²Π»Π΅ΠΊΠΈΡΠ΅ zip-ΡΠ°ΠΉΠ» ΠΈ ΠΎΡΠΊΡΠΎΠΉΡΠ΅ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΡΠ΅ Π²Π΅ΡΡΠΈΠΈ Π² ΡΠ²ΠΎΠ΅ΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠ΅. Π‘ΠΎΠΎΠ±ΡΠΈΡΠ΅ Π½Π°ΠΌ, Π΅ΡΠ»ΠΈ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΠΎΠΌΠΎΡΡ ΠΈ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΠ΄ΠΎΠ²ΠΎΠ»ΡΡΡΠ²ΠΈΠ΅! ΠΠ°ΡΡΡΠΎΠΉΡΠ΅ ΠΈ ΠΏΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ Π»ΠΎΠΊΠ°Π»ΡΠ½ΠΎ ΠΠΎΠΉΠ΄ΠΈΡΠ΅ ΠΈΠ»ΠΈ Π½Π°ΡΠ½ΠΈΡΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠ±Π½ΠΎΠΉ Π²Π΅ΡΡΠΈΠ΅ΠΉ ΠΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΏΠ°ΡΠΎΠ»Ρ ΠΠ΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΠ±Π½ΠΎΠ²ΠΈΡΡ ΠΏΠ°ΡΠΎΠ»Ρ? ΠΠΎΠΉΠ΄ΠΈΡΠ΅ ΠΈ Π½Π°ΠΆΠΌΠΈΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΏΠΎΠ΄ ΠΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΏΠ°ΡΠΎΠ»Ρ ΠΠ΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΠ±Π½ΠΎΠ²ΠΈΡΡ ΠΏΠ°ΡΠΎΠ»Ρ? ΠΠΎΠΉΠ΄ΠΈΡΠ΅ ΠΈ Π½Π°ΠΆΠΌΠΈΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΏΠΎΠ΄ ΠΠ°Ρ ΠΏΠ°ΡΠΎΠ»Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½! 45+ ΠΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌΡΠΉ ΠΌΠΎΠ΄ΡΠ»Ρ jQuery Accordion Menu Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ°ΠΌΠΈ ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ ΡΡΡΠ°Π½ΠΈΡΠ° ΠΎΡΠ·ΡΠ²ΠΎΠ², ΡΠΎΠ·Π΄Π°Π½Π½Π°Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ GSAP TweenMax, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ Π²Π°ΠΌ ΠΏΡΠΎΠΈΠ·Π²Π΅ΡΡΠΈ Π²ΠΏΠ΅ΡΠ°ΡΠ»Π΅Π½ΠΈΠ΅ Π½Π° Π²Π°ΡΠΈΡ ΠΊΠ»ΠΈΠ΅Π½ΡΠΎΠ². Foldable — ΡΡΠΎ ΠΏΠΎΠ»Π½ΡΠΉ ΡΡΠ΅ΠΊ jQuery Accordion Π½Π° Π±Π°Π·Π΅ CSS3. ΠΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ ΠΈ Π³ΠΎΡΠΎΠ²ΡΠΉ ΠΊ ΡΠ°Π±ΠΎΡΠ΅ Ρ ΡΡΡΡΠΎΠΉΡΡΠ²Π°ΠΌΠΈ, Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎΠΌ ΠΎΠΏΡΠΈΠΉ Π΄Π»Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π»Π΅Π³ΠΊΠΎ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΡΠ°ΡΡΡΡ Π²Π°ΡΠΈΡ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ². ΠΠΎΠ»Π½ΠΎΡΡΡΡ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΎΡΠΊΡΡΡΠΈΡ-Π·Π°ΠΊΡΡΡΠΈΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΉ CSS3 Ρ ΡΠΌΠ½ΡΠΌ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΌ ΠΎΡΠΊΠ°ΡΠΎΠΌ ΠΊ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ jQuery Π΄Π»Ρ ΡΡΠ°ΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² ΠΠ°Π½Π΅Π»Ρ Π½Π°Π²ΡΠΊΠΎΠ² — ΡΡΠΎ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± Π²ΡΡΡΠ°Π²ΠΈΡΡ ΠΎΡΠ΅Π½ΠΊΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΡΠ°Π²Π½ΠΈΡΡ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ ΡΠ΅Π»Π΅ΡΠΎΠ½Ρ Ρ ΡΠΎΡΠΊΠΈ Π·ΡΠ΅Π½ΠΈΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ, Π° Π·Π°ΡΠ΅ΠΌ Π½Π°Π²ΡΠΊΠΎΠ² ΠΠ°Π½Π΅Π»Ρ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· Π»ΡΡΡΠΈΡ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ΅ΠΉΡΠΈΠ½Π³Π° ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ ΠΏΠ΅ΡΠ΅Π΄ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΌ. ΠΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΡ ΠΏΠ°Π½Π΅Π»Ρ Π½Π°Π²ΡΠΊΠΎΠ² ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠ³ΠΎ ΠΌΠ΅ΡΠΎΠ΄Π° ΠΎΡΠ΅Π½ΠΊΠΈ.Π ΡΡΠΎΠΌ ΡΡΠΎΠΊΠ΅ ΠΌΡ ΠΏΠΎΠΊΠ°ΠΆΠ΅ΠΌ Π²Π°ΠΌ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΠΏΠ°Π½Π΅Π»Ρ Π½Π°Π²ΡΠΊΠΎΠ² Ρ ΠΏΠΎΠΌΠΎΡΡΡ jQuery, HTML ΠΈ CSS. ΠΠ°ΠΌ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠ½ΡΠ°Π²ΠΈΡΡΡΡ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ ΠΏΠΎΠ»ΠΎΡΠ° ΠΏΡΠΎΠ³ΡΠ΅ΡΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ jquery. Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΎΠ±ΡΡΡΠ½ΡΠ΅ΡΡΡ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠ΅ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΠ΅ ΠΌΠ΅Π½Ρ Π±Π΅Π· jquery ΠΈΠ»ΠΈ javascript. ΠΠ°, ΠΌΡ ΡΠΎΠ±ΠΈΡΠ°Π΅ΠΌΡΡ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠ΅ ΠΌΠ΅Π½Ρ ΡΠΎΠ»ΡΠΊΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS. ΠΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Π½Π° Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅ ΠΈΠ³ΡΠ°Π΅Ρ Π²Π°ΠΆΠ½ΡΡ ΡΠΎΠ»Ρ Π² ΡΠ΄ΠΎΠ±ΡΡΠ²Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΈ ΡΠ΄ΠΎΠ±ΡΡΠ²Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°. ΠΠ΅Π· ΠΌΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ ΠΏΠΎ ΡΠ°ΠΉΡΡ ΠΏΠΎΡ ΠΎΠΆΠ° Π½Π° ΠΊΠΎΠ½ΡΠ΅Π½Ρ, Π½ΠΎ Π±Π΅ΡΠΏΠΎΠ»Π΅Π·Π½Π°. Π‘Π΅Π³ΠΎΠ΄Π½ΡΡΠ½ΠΈΠΉ ΡΠ΅ΡΡΡΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΡΠ΄ΠΎΠ±Π½ΠΎΠ΅ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΎΠΉ Π³ΡΡΠΏΠΏ / ΠΏΠΎΠ΄ΠΏΡΠ½ΠΊΡΠΎΠ².ΠΠ½ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ Ρ CSS, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΠ° ΠΡΠΎΡΡΠΎΠΉ, ΡΠ΄ΠΎΠ±Π½ΡΠΉ ΠΈ Π»Π΅Π³ΠΊΠΈΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery Π΄Π»Ρ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π° Ρ ΠΏΠ»Π°Π²Π½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄ΠΎΠ² CSS3. ΠΠ½ ΠΎΡΠ½ΠΎΠ²Π°Π½ Π½Π° ΠΏΠ»Π°Π³ΠΈΠ½Π΅ Minimal Accordion / Drawer Ρ jQuery ΠΈ CSS3, ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π½Π½ΠΎΠΌ alxndrwcz. Β«ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Β» — ΡΡΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ, Π³ΠΎΡΠΎΠ²ΡΠΉ ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΠΈ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ .ΠΡΠΎ ΠΆΠΈΠ΄ΠΊΠΈΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠΎΡΡ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ. ΠΠ½ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠΊΠΈΠ½Ρ, ΠΎΠΏΡΠΈΠΈ ΠΈ ΡΡΠ½ΠΊΡΠΈΠΈ Π΄Π»Ρ ΠΎΡΠ³Π°Π½ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ . |