ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ ΠΌΠ΅Π½Ρ Π½Π° 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.
eco
Dolor sit amet.
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
ΠΠΎΠ΄ΠΏΠΈΡΠ°ΡΡΡΡ Π½Π° Telegram-ΠΊΠ°Π½Π°Π» Π±Π»ΠΎΠ³Π°
Π‘ΠΎΠ·Π΄Π°ΡΠΌ 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 ΠΏΠ»Π°Π³ΠΈΠ½ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ ΠΌΠ΅Π½Ρ Π΄Π»Ρ Π±Π»ΠΎΠ³Π° WordPress
ΠΠ΄ΡΠ°Π²ΡΡΠ²ΡΠΉΡΠ΅, Π΄ΠΎΡΠΎΠ³ΠΈΠ΅ ΡΠΈΡΠ°ΡΠ΅Π»ΠΈ Π±Π»ΠΎΠ³Π°.
Π ΡΡΠΎΡ Π΄Π΅Π½Ρ ΡΠ°ΡΡΠΊΠ°ΠΆΡ ΠΠ°ΠΌ Ρ ΠΏΡΠΎ ΠΏΡΠ΅Π²ΠΎΡΡ
ΠΎΠ΄Π½ΡΠΉ ΠΏΠ»Π°Π³ΠΈΠ½, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΎΠ·Π΄Π°ΡΡ Π½Π° Π±Π»ΠΎΠ³Π΅Β WordPress ΠΊΠ»Π°ΡΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ βΒ JQuery Accordion Menu Widget.Β Π― ΡΠ°ΠΌ ΠΏΠΎΠ»ΡΠ·ΡΡΡΡ ΡΡΠΈΠΌ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ², ΠΈ Π΅ΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎ ΠΡ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π² Π΄Π΅ΠΉΡΡΠ²ΠΈΠΈ ΡΠΏΡΠ°Π²Π° Π² ΡΡΠ±ΡΠΈΠΊΠ°Ρ
. ΠΡΠ΅Π½Ρ ΡΠ΄ΠΎΠ±Π½ΡΠΉ ΠΏΠ»Π°Π³ΠΈΠ½, ΠΏΡΠΎΡΡΠΎ Π²ΡΡΠ°Π²Π»ΡΠ΅ΡΡ ΡΠ΅ΡΠ΅Π· Π°Π΄ΠΌΠΈΠ½ΠΊΡ Π²ΠΈΠ΄ΠΆΠ΅Ρ ΠΈ ΡΠ°Π΄ΡΠΉΡΡ.
ΠΠ»Π°Π³ΠΈΠ½
ΠΠ»Π°Π³ΠΈΠ½Β JQuery Accordion Menu Widget Π»Π΅Π³ΠΎΠΊ Π² ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ΅ ΠΈ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ, ΠΊ ΡΠΎΠΌΡ ΠΆΠ΅ ΠΎΡΠ΅Π½Ρ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»Π΅Π½. Π Π½Π΅ΠΌ ΠΏΡΠΈΡΡΡΡΡΠ²ΡΠ΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ΅ΠΌ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ, ΡΠ²Π΅ΡΠΎΠ² ΡΠ°ΠΌΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ, Π° ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΊΡΠ°ΡΠ½ΠΎΠ΅, ΡΠΈΠ½Π΅Π΅, ΡΡΡΠ½ΠΎΠ΅ ΠΈ Β ΡΠ΅ΡΠΎΠ΅. Π‘ΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ ΡΡΠΎ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ ΠΌΠ΅Π½Ρ Π²ΠΎΠ»ΡΡΡΡΡ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π² Π»ΡΠ±ΠΎΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π±Π»ΠΎΠ³Π°.
ΠΡΡ ΠΎΠ³ΡΠΎΠΌΠ½ΡΠΉ ΠΏΠ»ΡΡ ΠΏΠ»Π°Π³ΠΈΠ½Π° β ΡΡΠΎ ΠΏΡΠΎΡΡΠΎΡΠ° ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ. ΠΡΠ΅Π³ΠΎ Π»ΠΈΡΡ Π½ΡΠΆΠ½ΠΎ Π΅Π³ΠΎ ΡΠΊΠ°ΡΠ°ΡΡ, Π·Π°ΡΠ΅ΠΌ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ, ΠΏΠΎΡΠ»Π΅ ΠΏΠ»Π°Π³ΠΈΠ½ ΡΠΎΠ·Π΄Π°ΡΡ Π²ΠΈΠ΄ΠΆΠ΅Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΠ°ΠΌ ΠΏΡΠΎΡΡΠΎ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π² ΡΠ°ΠΉΠ΄Π±Π°Ρ ΠΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠ³Π°.
ΠΡ Π° ΡΠ΅ΠΏΠ΅ΡΡ Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΉΠ΄ΡΠΌ ΠΊ ΠΏΡΠΎΡΠ΅ΡΡΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΠΈ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΠΏΠ»Π°Π³ΠΈΠ½Π°.
Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΠΏΠ»Π°Π³ΠΈΠ½Π°
Π’Π΅ΠΏΠ΅ΡΡ Π½ΡΠΆΠ½ΠΎ, Π² Π°Π΄ΠΌΠΈΠ½ΠΊΠ΅ Π±Π»ΠΎΠ³Π°, Π·Π°ΠΉΡΠΈ Π²ΠΎ Π²ΠΊΠ»Π°Π΄ΠΊΡ ΠΏΠ»Π°Π³ΠΈΠ½Ρ, Π·Π°ΡΠ΅ΠΌ Π²ΡΠ±ΡΠ°ΡΡ ΠΠΎΠ±Π°Π²ΠΈΡΡ Π½ΠΎΠ²ΡΠΉ ΠΈ Π² ΠΏΠΎΠ»Π΅ Π΄Π»Ρ ΠΏΠΎΠΈΡΠΊΠ° Π²ΠΏΠΈΡΠ°ΡΡΒ JQuery Accordion Menu Widget Π΄Π°Π»Π΅Π΅ Π½Π°ΠΆΠ°ΡΡ ΠΏΠΎΠΈΡΠΊ.
ΠΡΠΆΠ½ΡΠΉ Π½Π°ΠΌ ΠΏΠ»Π°Π³ΠΈΠ½ Π±ΡΠ΄Π΅Ρ ΡΠ°ΠΌΡΠΉ ΠΏΠ΅ΡΠ²ΡΠΉ Π² ΡΠΏΠΈΡΠΊΠ΅. Π ΠΏΠΎΠ΄ Π½ΠΈΠΌ Π±ΡΠ΄Π΅Ρ ΡΡΡΠ»ΠΊΠ° Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΏΠ»Π°Π³ΠΈΠ½. ΠΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ ΠΊΠ°ΠΊ ΠΎΠ½ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ Π½ΡΠΆΠ½ΡΠΉ Π½Π°ΠΌ Π²ΠΈΠ΄ΠΆΠ΅Ρ ΠΏΠΎΡΠ²ΠΈΡΡΡ Π²ΠΎ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ ΠΠ½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ β ΠΠΈΠ΄ΠΆΠ΅ΡΡ.
ΠΠ° ΡΠΈΡΡΠ½ΠΊΠ΅ Π²ΡΡΠ΅ Ρ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠ½ΡΠ» Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΡΠ°ΠΌΠΎΠ³ΠΎ Π²ΠΈΠ΄ΠΆΠ΅ΡΠ°.
ΠΠΎΡΠ»Π΅ ΠΠ°ΠΌ Π²ΡΠ΅Π³ΠΎ Π»ΠΈΡΡ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡ ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΈΡΡ Π΅Π³ΠΎ Π² ΡΠ°ΠΉΠ΄Π±Π°Ρ, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ ΡΠΏΠ»Π°Π²Π°, Π² Π½ΡΠΆΠ½ΠΎ ΠΠ°ΠΌ ΠΌΠ΅ΡΡΠΎ.
ΠΠ°ΡΡΡΠΎΠΉΠΊΠΈ ΠΏΠ»Π°Π³ΠΈΠ½Π°
ΠΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ ΠΊΠ°ΠΊ Π²ΠΈΠ΄ΠΆΠ΅Ρ Π±ΡΠ΄Π΅Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ Π² ΡΠ°ΠΉΠ΄Π±Π°Ρ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ Π½Π°ΡΡΡΠΎΠΈΡΡ ΠΏΠΎ ΠΠ°ΡΠ΅ΠΌΡ Π²ΠΊΡΡΡ. Π ΠΈΠΌΠ΅Π½Π½ΠΎ Π²ΡΠ±ΡΠ°ΡΡ ΡΠ²Π΅Ρ ΡΠ°ΠΌΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ, ΡΠ΅ΠΌΡ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ. ΠΠ°ΠΊ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΊΡΡΠ²Π°ΡΡΡΡ ΠΌΠ΅Π½Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Π³ΠΎ ΠΈΠ»ΠΈ ΠΏΡΠΈ ΠΊΠ»ΠΈΠΊΠ΅. Π£Π³Π»ΡΠ±Π»ΡΡΡΡΡ ΡΠΈΠ»ΡΠ½ΠΎ Π² Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ Π½Π΅ Π±ΡΠ΄Ρ, ΠΎΠ½ΠΈ Π»ΡΠ³ΠΊΠΈΠ΅ ΠΈ ΠΏΠΎΠ½ΡΡΠ½ΡΠ΅.
ΠΠ°ΠΆΠ½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ: ΡΡΠ±ΡΠΈΠΊΠΈ ΠΈ ΠΏΠΎΠ΄ΡΡΠ±ΡΠΈΠΊΠΈ.
ΠΡΠ»ΠΈ Π½Π° ΠΠ°ΡΠ΅ΠΌ Π±Π»ΠΎΠ³Π΅ Π΅ΡΡΡ ΠΏΠΎΠ΄ΡΡΠ±ΡΠΈΠΊΠΈ ΠΊ ΡΡΠ±ΡΠΈΠΊΠ°ΠΌ, ΠΠ°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ. ΠΡΠΎ Π½ΡΠΆΠ½ΠΎ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΏΠ»Π°Π³ΠΈΠ½ ΠΌΠ΅Π½Ρ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎ ΠΈΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π» ΠΈ Π²ΠΎΠΎΠ±ΡΠ΅ ΡΠ°Π±ΠΎΡΠ°Π».
Π§ΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π²Β WordPress ΠΠ°ΠΌ Π½ΡΠΆΠ½ΠΎ Π·Π°ΠΉΡΠΈ Π² ΠΠ½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄, Π° Π·Π°ΡΠ΅ΠΌ Π² ΠΠ΅Π½Ρ.
ΠΠ°Π»Π΅Π΅ Π½ΡΠΆΠ½ΠΎ ΠΏΡΠΈΠ΄ΡΠΌΠ°ΡΡ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΌΠ΅Π½Ρ, Π²ΡΠ±Π΅ΡΠΈΡΠ΅ ΠΊΠ°ΠΊΠΎΠ΅ ΠΠ°ΠΌ ΠΏΠΎΠ½ΡΠ°Π²ΠΈΡΡΡ:-) ΠΏΠΎΡΠ»Π΅ Π½Π°ΠΆΠΈΠΌΠ°Π΅ΠΌ Π½Π° ΠΊΠ½ΠΎΠΏΠΎΡΠΊΡ Π‘ΠΎΠ·Π΄Π°ΡΡ ΠΌΠ΅Π½Ρ.
ΠΠΎΠ³Π΄Π° ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΡΠΎΠ·Π΄Π°Π½ΠΎ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ Π²ΡΠ±ΡΠ°ΡΡ Π΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π² Π½Π°ΡΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΡΠΎ Π±ΡΠ΄ΡΡ ΡΡΠ±ΡΠΈΠΊΠΈ. ΠΠΈΠΆΠ΅ Π±ΡΠ΄Π΅Ρ Π½Π΅ Π±ΠΎΠ»ΡΡΠΎΠ΅ ΠΎΠΊΠΎΡΠΊΠΎ Ρ ΡΡΠ±ΡΠΈΠΊΠ°ΠΌΠΈ, Π² ΡΡΠΎΠΌ ΠΎΠΊΠΎΡΠΊΠ΅ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ Π²ΡΠ±ΡΠ°ΡΡ Π²ΠΊΠ»Π°Π΄ΠΊΡ ΠΡΠ΅, Π·Π°ΡΠ΅ΠΌ Π½Π°ΠΆΠ°ΡΡ ΠΡΠ΄Π΅Π»ΠΈΡΡ Π²ΡΠ΅, Π° ΠΏΠΎΡΠ»Π΅ Π½Π°ΠΆΠ°ΡΡ ΠΠΎΠ±Π°Π²ΠΈΡΡ Π² ΠΌΠ΅Π½Ρ. Π’Π΅ΠΏΠ΅ΡΡ Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ ΡΡΠΎ Ρ ΠΌΠ΅Π½Ρ ΠΏΠΎΠ»ΡΡΠΈΠ»ΠΎΡΡ Ρ ΡΡΠ±ΡΠΈΠΊΠ°ΠΌΠΈ Π½Π°Β beloweb.ru.
Π’Π΅ΠΏΠ΅ΡΡ Π½ΡΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΠΏΠΎΠ΄ΡΡΠ±ΡΠΈΠΊΠΈ. Π Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Ρ ΡΡΠ±ΡΠΈΠΊΠΈΒ WordPress Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ΄ΡΡΠ±ΡΠΈΠΊΠ° ΠΠ»Π°Π³ΠΈΠ½Ρ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΠ»Π°Π³ΠΈΠ½Ρ Π½ΡΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΈΡΡ ΡΡΡΡ ΠΏΡΠ°Π²Π΅Π΅. Π‘ΠΌΠΎΡΡΠΈΡΠ΅ Π½Π° ΡΠΈΡΡΠ½ΠΊΠ΅ Π½ΠΈΠΆΠ΅, ΡΡΠΎ Ρ ΠΌΠ΅Π½Ρ ΠΏΠΎΠ»ΡΡΠΈΠ»ΠΎΡΡ.
ΠΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ ΠΊΠ° ΠΡ ΡΠ΄Π΅Π»Π°Π΅ΡΠ΅ ΡΡΠΎΡ ΡΠ°Π³, ΠΏΠ»Π°Π³ΠΈΠ½Β JQuery Accordion Menu Widget Π±ΡΠ΄Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ.
ΠΠ°Π΄Π΅ΡΡΡ, ΡΡΠΎ Π²ΡΡ ΡΡΠ½ΠΎ ΠΈ Π΄ΠΎΡΡΡΠΏΠ½ΠΎ ΠΎΠ±ΡΡΡΠ½ΠΈΠ». ΠΡΠ»ΠΈ ΠΠ°ΠΌ Π²ΡΡ ΡΠ°ΠΊΠΈ ΠΠ°ΠΌ Π±ΡΠ΄Π΅Ρ ΡΡΠΎ ΡΠΎ Π½Π΅ ΠΏΠΎΠ½ΡΡΠ½ΠΎ ΡΠΏΡΠ°ΡΠΈΠ²Π°ΠΉΡΠ΅ Π² ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΡΡ . ΠΠΎ ΡΠΊΠΎΡΡΡ Π²ΡΡΡΠ΅Ρ, Π΄ΡΡΠ·ΡΡ.
33 jQuery Accordions
ΠΠΎΠ»Π»Π΅ΠΊΡΠΈΡ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΡ
Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΡ
ΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ
Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ΠΎΠ² jQuery UI ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΠΊΠΎΠ΄Π° ΠΈ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² ΠΎΡ Codepen ΠΈ GitHub.
ΠΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΠΈ ΡΠ΅Π½ΡΡΠ±ΡΡ 2021 Π³ΠΎΠ΄Π°. 2 Π½ΠΎΠ²ΡΡ
ΠΏΡΠ΅Π΄ΠΌΠ΅ΡΠ°.
- ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Ρ CSS
- ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Ρ Bootstrap
- ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Ρ React
- ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Ρ Ρ ΠΏΠΎΠΏΡΡΠ½ΡΠΌ Π²Π΅ΡΡΠΎΠΌ
- HTML ΠΈ
Ρ CSS
- ΠΡΠΈΠΌΠ΅ΡΡ jQuery Accordion
- ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π½ΡΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Ρ jQuery
Π ΠΊΠΎΠ΄Π΅
ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ jQuery ΡΠΎ ΡΡΡΠ΅Π»ΠΊΠΎΠΉ (Π±Π΅Π· Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ)
ΠΡΠΎΡΡΠΎ, Π½ΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: font-awesome.css
Π ΠΊΠΎΠ΄Π΅
Π Π°ΡΠΊΡΡΠ²Π°ΡΡΠΈΠΉΡΡ ΡΠΏΠΈΡΠΎΠΊ/Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½
ΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ Π² jQuery.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: font-awesome.css
Π ΠΊΠΎΠ΄Π΅
ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ ΠΏΠΎ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡΠ°Π»ΡΠ½ΠΎΠΌΡ Π·Π°ΠΊΠ°Π·Ρ ΡΠΏΡΠ°Π²Π°
ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ jQuery ΡΠΎ ΡΡΠΈΡΡΠΎΠΌ Material Design Iconic.![]()
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: material-design-iconic-font.css
Π ΠΊΠΎΠ΄Π΅
ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ jQuery
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΠ΅ΡΡ Π½ΡΡ ΡΠ°ΡΡΡ ΡΠΏΠΈΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π°
ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π² jQuery.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅ΡΠ°Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: ionicons.css
Π ΠΊΠΎΠ΄Π΅
ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ ΠΈ ΡΡ Π΅ΠΌΠ° Google
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π½ΡΠ΅ ΡΡΠΈΠ»ΠΈ jQuery
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΡΠΎΡΡΠ°Ρ ΡΠ°Π·Π΄Π²ΠΈΠΆΠ½Π°Ρ Π³Π°ΡΠΌΠΎΡΠΊΠ°
ΠΡΠΎΡΡΠ°Ρ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½Π°Ρ ΡΠΊΠΎΠ»ΡΠ·ΡΡΠ°Ρ Π³Π°ΡΠΌΠΎΡΠΊΠ° Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΠΌ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎΠΌ jQuery.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π½ΡΠΉ ΡΠ»Π°ΠΉΠ΄Π΅Ρ
ΠΡΠΎΡΡΠΎΠΉ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠ»Π°ΠΉΠ΄Π΅Ρ-Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ jQuery.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Ρ Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ
ΠΠ΅ΠΌΠΎ-Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Ρ swiper.js
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: swiper.css, swiper.js
Π‘ ΠΊΠΎΠ΄
ΠΠ°ΡΠΌΠΎΡΠΊΠ° Ρ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ Π·Π°ΠΊΡΡΡΠΈΡ
ΠΡΠΎ ΠΏΡΠΎΡΡΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ ΠΈΠ· ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ ΡΠ΅Π³Π° HTML ΠΈ ΠΏΠ°ΡΡ ΡΡΡΠΎΠΊ jQuery. ΠΡ ΡΠ°ΡΡΠΎ ΠΏΡΠΈΠ±Π΅Π³Π°Π΅ΠΌ ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠ»ΠΎΠΆΠ½ΡΡ
ΡΠ°Π±Π»ΠΎΠ½ΠΎΠ² ΠΈ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΡ Π΄Π»ΠΈΠ½Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° ΠΏΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ ΡΠ»Π°ΠΉΠ΄Π΅ΡΠΎΠ² ΠΈ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ΠΎΠ², ΡΠΎΠ²Π΅ΡΡΠ΅Π½Π½ΠΎ Π·Π°Π±ΡΠ²Π°Ρ, ΡΡΠΎ Π΅ΡΡΡ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΡΠ΅ ΡΠΏΠΎΡΠΎΠ±Ρ ΡΠ΅ΡΠ΅Π½ΠΈΡ ΡΡΠΈΡ
Π·Π°Π΄Π°Ρ.
ΠΠ΄Π΅ΡΡ Π½Π΅ Π½ΡΠΆΠ½ΠΎ Ρ
ΠΎΡΠΎΡΠΎ ΡΠ°Π·Π±ΠΈΡΠ°ΡΡΡΡ Π² ΠΊΠΎΠ΄Π΅, ΡΡΠΎΠ±Ρ Π΅Π³ΠΎ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΡΠΎΡΡΠΎΠΉ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ jQuery
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: font-awesome.css
Π ΠΊΠΎΠ΄Π΅
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ jQuery
ΠΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ jQuery, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΡΡ ΠΎΡ ΡΠΎΡΠΌΡ ΠΊ ΡΠΎΡΠΌΠ΅, ΡΠ΅Π»ΠΊΠ°Ρ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΊΠ»Π°Π²ΠΈΡΠΈ ΡΠΎ ΡΡΡΠ΅Π»ΠΊΠ°ΠΌΠΈ ΠΈ Π½Π°ΠΆΠΈΠΌΠ°Ρ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»Π΅Π½Π½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΠΎ ΡΡΡΠ΅Π»ΠΊΠ°ΠΌΠΈ. Π‘ΠΎΠ·Π΄Π°Π½ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ jQuery ΠΈ Bootstrap.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: font-awesome.css, bootstrap.css
Π ΠΊΠΎΠ΄Π΅
ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ Ρ ΡΠ΅Π³Π°ΠΌΠΈ dt ΠΈ dd.
ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ jQuery Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΏΠΈΡΠΊΠΎΠ² ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: font-awesome.css
Π ΠΊΠΎΠ΄Π΅
ΠΠ½ΠΎΠ³ΠΎΡΡΠΎΠ²Π½Π΅Π²ΡΠΉ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ CSS-JS
ΠΠ½ΠΎΠ³ΠΎΡΡΠΎΠ²Π½Π΅Π²ΡΠΉ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ CSS ΠΈ JS (jQuery). ΠΡΠΎ ΠΈΠΌΠ΅Π΅Ρ ΡΡΠ½ΠΊΡΠΈΡ ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΎΡΠΊΡΡΡΠΈΡ Π³ΡΡΠΏΠΏΡ ΡΠΏΠΈΡΠΊΠ° ΠΏΡΠΈ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΏΡΠΎΡΡΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΠ² ΠΊΠ»Π°ΡΡ is-open ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΏΠΈΡΠΊΠ°, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΠΌΠ΅Π΅Ρ ΠΊΠ»Π°ΡΡ has-children . HTML ΠΈ CSS Π½Π°ΠΏΠΈΡΠ°Π½Ρ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠ° ΠΠΠ.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅ΡΠ°Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: font-awesome.css
Π ΠΊΠΎΠ΄Π΅
CSS-Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π΄Π»Ρ jQuery Accordion
ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ Π΄Π»Ρ ΠΌΠ΅ΡΠ΅ΠΎ-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π½Π° jQuery Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ CSS.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: font-awesome.js
Π ΠΊΠΎΠ΄Π΅
ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½
ΠΠ΅Π½Ρ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π° jQuery.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: font-awesome.css
Π ΠΊΠΎΠ΄Π΅
ΠΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ jQuery Accordion
ΠΠ½ΠΎΠ³ΠΎΡΠ°Π·ΠΎΠ²ΠΎΠ΅ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ jQuery-Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½, ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Ρ Π»ΡΠ±ΡΠΌ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎΠΌ ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΠΉ ΠΈ ΠΏΠΎΠ΄ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΠΉ.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅ΡΠ°Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ
Π‘Π»Π°ΠΉΠ΄-ΠΌΠ΅Π½Ρ Β«ΠΠ°ΠΌΠ±ΡΡΠ³Π΅ΡΒ» Ρ jQuery.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: jquery.js
Π ΠΊΠΎΠ΄Π΅
4 ΡΡΡΠΎΠΊΠΈ ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ jQuery
ΠΡΠΎΡΡΠΎΠΉ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ jQuery.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ 3D
ΠΡΠΎΡΡΠΎΠΉ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ jQuery Ρ ΡΡΠ΅Ρ
ΠΌΠ΅ΡΠ½ΡΠΌ ΡΡΡΠ΅ΠΊΡΠΎΠΌ ΡΠΊΠ»Π°Π΄ΡΠ²Π°Π½ΠΈΡ Π±ΡΠΌΠ°Π³ΠΈ.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π½ΡΠΉ ΠΏΡΠΎΡΠΈΠ»Ρ
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: font-awesome.css
Π ΠΊΠΎΠ΄Π΅
ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ jQuery
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: font-awesome.css
Π‘ ΠΊΠΎΠ΄
ΠΠ°Ρ Π°Π»ΡΠ½ΡΠΉ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½
ΠΡΠΎΡΡΠΎΠΉ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ ΡΠΎΠ»ΡΠΊΠΎ Π½Π° CSS, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΉ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Sass Π² ΠΏΠ΅ΡΠ²ΡΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ Π΄Π»Ρ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΎΠΉ ΡΠ²Π΅ΡΠΎΠ²ΠΎΠΉ ΡΡ Π΅ΠΌΡ.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: font-awesome.css, bootstrap.js, lastoftype.js
Π ΠΊΠΎΠ΄Π΅
ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ ΠΡΠ»ΡΡΠΈΠΌΠ΅Π½Ρ
ΠΡΠΎΡΡΠΎΠ΅, ΡΡΠΈΠ»ΡΠ½ΠΎΠ΅ ΠΈ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠ΅ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ-Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: font-awesome.css
Π ΠΊΠΎΠ΄Π΅
jQuery (Π±Π΅Π· ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°) ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΡΠΎΡΡΠΎΠΉ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ Sass/jQuery
ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½CSS3/Sass/jQuery, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΠΌΠ΅Π΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΎΡΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΉ ΡΠΎ ΡΡΡΠ΅Π»ΠΊΠ°ΠΌΠΈ, ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π²ΡΠΏΠΎΠ»Π½Π΅Π½Π½ΡΡ Π² CSS (ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΡΠΊΠΎΠ»ΡΠΆΠ΅Π½ΠΈΡ ΠΈ ΡΠ΅Π»ΡΠΊΠ°, Π²ΡΠΏΠΎΠ»Π½Π΅Π½Π½ΡΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ jQuery).
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ Ρ jQuery
ΠΡΠΎΡΡΠΎΠΉ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ Ρ jQuery.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΡΠ°ΠΈ ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½
com/DavideTriso/aria-accordion»> HTML, CSS ΠΈ JS Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ UI-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π΄Π»Ρ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΡΡ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ². Π£Π΄ΠΎΠ±ΡΡΠ²ΠΎ ΠΈ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΡ: ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ Ρ WAI ARIA 1.1.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΠ΅Π³Π°ΡΠΌΠΎΠ½ΠΈΠΊΠ°
ΠΠ΅Π³ΠΊΠΈΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π° jQuery.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΡΠΎΡΡΠΎΠΉ ΠΌΡΠ»ΡΡΠΈΠ°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ Jquery
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: bootstrap.css
Π ΠΊΠΎΠ΄Π΅
ΠΠΎΡΡΡΠΏΠ½Π°Ρ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π½Π°Ρ ΡΠΈΡΡΠ΅ΠΌΠ° jQuery
ΠΡΠΎΡ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΡΠ΅Ρ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠΏΠΈΡΠΎΠΊ hx ΠΈ div Π² ΡΠ°Π½ΡΠ°ΡΡΠΈΡΠ΅ΡΠΊΡΡ Π±Π»Π΅ΡΡΡΡΡΡ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π½ΡΡ ΡΠΈΡΡΠ΅ΠΌΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ARIA.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ jQuery
ΠΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ, Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ CSS, ΠΏΠ»Π°Π³ΠΈΠ½ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π° jQuery. Jquery Accordion ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Ρ CSS Π΄Π»Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΎΡΠΊΡΡΡΠΈΡ/Π·Π°ΠΊΡΡΡΠΈΡ Ρ ΠΎΡΠΊΠ°ΡΠΎΠΌ ΠΊ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ jQuery, ΠΊΠΎΠ³Π΄Π° ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Ρ CSS Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ. Π§ΡΠΎΠ±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ Π² ΡΠ²ΠΎΠ΅ΠΌ ΠΏΡΠΎΠ΅ΠΊΡΠ΅, ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π½Π΅Π±ΠΎΠ»ΡΡΠ°Ρ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΡ ΠΈΠ»ΠΈ ΠΊΠΎΠ΄.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ jQuery
ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ jQueryΠΡΡΡΡΡΡΠ²ΡΠ΅Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌΡΠΉ ΠΌΠΎΠ΄ΡΠ»Ρ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π° Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ CSS (Π·Π°ΠΏΠ°ΡΠ½ΠΎΠΉ Π²Π°ΡΠΈΠ°Π½Ρ jQuery).
Π€ΠΎΡΠΊ Π½Π° Github ΠΠΎΠΆΠ΅ΡΡΠ²ΠΎΠ²Π°ΡΡ ΡΠ΅ΡΠ΅Π· PaypalΠΠ°ΡΠΌΠΎΡΠΊΠ°
(ΠΎΠ΄ΠΈΠ½Π°ΡΠ½Π°Ρ ΠΎΡΠΊΡΡΡΠ°Ρ) ΠΠ»Π΅ΠΌΠ΅Π½Ρ ItemHoodie ΡΠΎΡΠΊΠ° ΠΏΠΎ ΡΡΡΠ΅ΡΠΈΠΊΠ΅ ΠΠΎΠ΄Π°ΡΠ°, Ρ ΡΠ΄ΠΎΠΆΠ΅ΡΡΠ²Π΅Π½Π½Π°Ρ Π²Π΅ΡΠ΅ΡΠΈΠ½ΠΊΠ° Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΡΠ°ΡΡΠΎΠ²ΠΎΠ³ΠΎ ΡΠΎΠ½Π΄Π° ΠΌΠ΅Π΄Π»Π΅Π½Π½ΡΡ ΡΠ³Π»Π΅Π²ΠΎΠ΄ΠΎΠ², ΠΊΠΎΠ³ΠΈ, ΡΠ°ΡΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΊΠΎΡΠ΅ΠΉΠ½ΡΠ΅ Π±Π°Π½Π΄ΠΆΠΎ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠΆΠ΄Π΅Π½ΠΈΡ.
ΠΡΠ°Π½Ρ Ρ Π³Π»ΡΠ±ΠΎΠΊΠΈΠΌΠΈ v-ΠΎΠ±ΡΠ°Π·Π½ΡΠΌΠΈ ΡΡΠΌΠΊΠ°ΠΌΠΈ, ΡΠ΅ΠΌΠ΅ΡΠ»Π΅Π½Π½ΡΠΉ Π»ΠΈΠΊΠ΅ΡΠΎ-Π²ΠΎΠ΄ΠΎΡΠ½ΡΠΉ Π·Π°Π²ΠΎΠ΄ Chillwave Williamsburg. Π£ΡΠ°ΡΡΠΉ Π±Π»ΠΎΠ³ ΠΏΡΡΠ½ΠΈΠΊΠΎΠ² ΠΠ°ΡΠ»Π΅ΡΠ°, ΡΡΡΠ°ΠΆΠ½ΠΎΠ³ΠΎ Π±ΠΈΠΎΠ΄ΠΈΠ·Π΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΌΡΡΠ½ΠΈΠΊΠ°, ΡΡΡΠΈΡ-Π°ΡΡΠ°. Hashtag Π½Π΅Π±ΠΎΠ»ΡΡΠΈΠ΅ ΠΏΠ°ΡΡΠΈΠΈ Π±ΠΈΡΡΠ΅ΡΠΎΠ² Π±Π΅Π· Π³Π»ΡΡΠ΅Π½Π°. ΠΠ»ΠΎΠ³ ΠΌΡΡΠ½ΠΈΠΊΠ° ΠΎ ΡΠ΅ΠΌΠΈΠΎΡΠΈΠΊΠ΅, ΠΏΠ°Π»Π΅ΠΎ-Π°ΡΠΈΠΌΠΌΠ΅ΡΡΠΈΡΠ½ΡΠΉ ΠΌΠΎΠΏΡ Ρ ΠΊΡΠ°Π΅ΠΌ Π½Π°ΡΠ²Π°Π»Π°. ΠΠΈΠ»Ρ ΠΠ°ΡΡΠ΅Ρ-ΡΠ΄Π΅Π»Π°ΠΉ ΡΠ°ΠΌ Π£ΡΡ ΠΠ½Π΄Π΅ΡΡΠΎΠ½ ΠΏΠΎΡΠ°Π΄ΠΈΠ» Π½Π° Π½Π΅Π³ΠΎ ΠΏΡΠΈΡΡ, ΠΏΡΡΡΡΡ ΡΠΊΡΡΡ, ΡΡΠΎ ΡΠ³ΠΎΠ΄Π½ΠΎ. Artisan McSweeney’s Shoreditch, wolf yr Marfa, ΡΠ»ΠΈΡΠ½ΠΎΠ΅ ΠΈΡΠΊΡΡΡΡΠ²ΠΎ, locavore, ΠΊΡΠ°ΡΡΠΎΠ²ΠΎΠ΅ ΠΏΠΈΠ²ΠΎ, ΡΡΡΠ΅ΡΠΈΠΊΠ° 90 ΠΎΠ±Π»Π°Π³ΠΎΡΠΎΠ΄ΠΈΡΡ. Yr hella fingerstache, Echo Park VHS +1 ΡΠ΅ΡΠΊΠΎΠ²Π½ΡΠΉ ΠΊΠ»ΡΡ XOXO Vice Selvage Gastropub Readymade Π±ΡΠΊΠ²Π°Π»ΡΠ½ΠΎ wayfarers.ItemItemItemItem
ΠΡΠ΅Π΄ΠΌΠ΅ΡΠΡΠ΅Π΄ΠΌΠ΅Ρ
ΠΡΠ΅Π΄ΠΌΠ΅ΡΠΠ»Π΅ΠΌΠ΅Π½ΡΠΠ»Π΅ΠΌΠ΅Π½ΡΠΠ»Π΅ΠΌΠ΅Π½ΡΠΠ»Π΅ΠΌΠ΅Π½ΡΠΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΡΠ΅Π΄ΠΌΠ΅ΡΠΠ»Π΅ΠΌΠ΅Π½ΡΠΠ»Π΅ΠΌΠ΅Π½ΡΠΠ»Π΅ΠΌΠ΅Π½ΡΠΠ»Π΅ΠΌΠ΅Π½ΡΠΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΡΠ΅Π΄ΠΌΠ΅ΡΠΡΠ΅Π΄ΠΌΠ΅ΡΠΡΠ΅Π΄ΠΌΠ΅Ρ
ΠΡΠ΅Π΄ΠΌΠ΅ΡΠΠ»Π΅ΠΌΠ΅Π½ΡΠΠ»Π΅ΠΌΠ΅Π½ΡΠΠ»Π΅ΠΌΠ΅Π½ΡΠΠ»Π΅ΠΌΠ΅Π½ΡΠΠ»Π΅ΠΌΠ΅Π½ΡΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π½Π°Ρ Π³ΡΡΠΏΠΏΠ°
(Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΎΡΠΊΡΡΡΡΡ ) ΠΠ»Π΅ΠΌΠ΅Π½Ρ ItemHoodie ΡΠΎΡΠΊΠ° ΠΏΠΎ ΡΡΡΠ΅ΡΠΈΠΊΠ΅ ΠΠΎΠ΄Π°ΡΠ°, Ρ ΡΠ΄ΠΎΠΆΠ΅ΡΡΠ²Π΅Π½Π½Π°Ρ Π²Π΅ΡΠ΅ΡΠΈΠ½ΠΊΠ° Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΡΠ°ΡΡΠΎΠ²ΠΎΠ³ΠΎ ΡΠΎΠ½Π΄Π° ΠΌΠ΅Π΄Π»Π΅Π½Π½ΡΡ ΡΠ³Π»Π΅Π²ΠΎΠ΄ΠΎΠ², ΠΊΠΎΠ³ΠΈ, ΡΠ°ΡΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΊΠΎΡΠ΅ΠΉΠ½ΡΠ΅ Π±Π°Π½Π΄ΠΆΠΎ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠΆΠ΄Π΅Π½ΠΈΡ.
ΠΡΠ°Π½Ρ Ρ Π³Π»ΡΠ±ΠΎΠΊΠΈΠΌΠΈ v-ΠΎΠ±ΡΠ°Π·Π½ΡΠΌΠΈ ΡΡΠΌΠΊΠ°ΠΌΠΈ, ΡΠ΅ΠΌΠ΅ΡΠ»Π΅Π½Π½ΡΠΉ Π»ΠΈΠΊΠ΅ΡΠΎ-Π²ΠΎΠ΄ΠΎΡΠ½ΡΠΉ Π·Π°Π²ΠΎΠ΄ Chillwave Williamsburg. Π£ΡΠ°ΡΡΠΉ Π±Π»ΠΎΠ³ ΠΏΡΡΠ½ΠΈΠΊΠΎΠ² ΠΠ°ΡΠ»Π΅ΡΠ°, ΡΡΡΠ°ΠΆΠ½ΠΎΠ³ΠΎ Π±ΠΈΠΎΠ΄ΠΈΠ·Π΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΌΡΡΠ½ΠΈΠΊΠ°, ΡΡΡΠΈΡ-Π°ΡΡΠ°. Hashtag Π½Π΅Π±ΠΎΠ»ΡΡΠΈΠ΅ ΠΏΠ°ΡΡΠΈΠΈ Π±ΠΈΡΡΠ΅ΡΠΎΠ² Π±Π΅Π· Π³Π»ΡΡΠ΅Π½Π°. ΠΠ»ΠΎΠ³ ΠΌΡΡΠ½ΠΈΠΊΠ° ΠΎ ΡΠ΅ΠΌΠΈΠΎΡΠΈΠΊΠ΅, ΠΏΠ°Π»Π΅ΠΎ-Π°ΡΠΈΠΌΠΌΠ΅ΡΡΠΈΡΠ½ΡΠΉ ΠΌΠΎΠΏΡ Ρ ΠΊΡΠ°Π΅ΠΌ Π½Π°ΡΠ²Π°Π»Π°. ΠΠΈΠ»Ρ ΠΠ°ΡΡΠ΅Ρ-ΡΠ΄Π΅Π»Π°ΠΉ ΡΠ°ΠΌ Π£ΡΡ ΠΠ½Π΄Π΅ΡΡΠΎΠ½ ΠΏΠΎΡΠ°Π΄ΠΈΠ» Π½Π° Π½Π΅Π³ΠΎ ΠΏΡΠΈΡΡ, ΠΏΡΡΡΡΡ ΡΠΊΡΡΡ, ΡΡΠΎ ΡΠ³ΠΎΠ΄Π½ΠΎ. Artisan McSweeney’s Shoreditch, wolf yr Marfa, ΡΠ»ΠΈΡΠ½ΠΎΠ΅ ΠΈΡΠΊΡΡΡΡΠ²ΠΎ, locavore, ΠΊΡΠ°ΡΡΠΎΠ²ΠΎΠ΅ ΠΏΠΈΠ²ΠΎ, ΡΡΡΠ΅ΡΠΈΠΊΠ° 90 ΠΎΠ±Π»Π°Π³ΠΎΡΠΎΠ΄ΠΈΡΡ. Yr hella fingerstache, Echo Park VHS +1 ΡΠ΅ΡΠΊΠΎΠ²Π½ΡΠΉ ΠΊΠ»ΡΡ XOXO Vice Selvage Gastropub Readymade Π±ΡΠΊΠ²Π°Π»ΡΠ½ΠΎ wayfarers.ItemItemItemItem
ΠΡΠ΅Π΄ΠΌΠ΅ΡΠΡΠ΅Π΄ΠΌΠ΅Ρ
ΠΡΠ΅Π΄ΠΌΠ΅ΡΠΠ»Π΅ΠΌΠ΅Π½ΡΠΠ»Π΅ΠΌΠ΅Π½ΡΠΠ»Π΅ΠΌΠ΅Π½ΡΠΠ»Π΅ΠΌΠ΅Π½ΡΠΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΡΠ΅Π΄ΠΌΠ΅ΡΠΠ»Π΅ΠΌΠ΅Π½ΡΠΠ»Π΅ΠΌΠ΅Π½ΡΠΠ»Π΅ΠΌΠ΅Π½ΡΠΠ»Π΅ΠΌΠ΅Π½ΡΠΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΡΠ΅Π΄ΠΌΠ΅ΡΠΡΠ΅Π΄ΠΌΠ΅ΡΠΡΠ΅Π΄ΠΌΠ΅Ρ
ΠΡΠ΅Π΄ΠΌΠ΅ΡΠΠ»Π΅ΠΌΠ΅Π½ΡΠΠ»Π΅ΠΌΠ΅Π½ΡΠΠ»Π΅ΠΌΠ΅Π½ΡΠΠ»Π΅ΠΌΠ΅Π½ΡΠΠ»Π΅ΠΌΠ΅Π½ΡSingle Accordion
(easeInOutQuad, ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ 600 ΠΌΡ) ΠΡΠ΅Π΄ΠΌΠ΅ΡΠΠ»Π΅ΠΌΠ΅Π½ΡΠΠ»Π΅ΠΌΠ΅Π½ΡΠΠ»Π΅ΠΌΠ΅Π½ΡΠΠ»Π΅ΠΌΠ΅Π½ΡΠΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΏΡΠΈΠΈ
| ΠΠ΅ΡΠ΅ΠΌΠ΅Π½Π½Π°Ρ | ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ | Π’ΠΈΠΏ | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ |
|---|---|---|---|
| ΡΠΊΠΎΡΠΎΡΡΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π° | 300 | ΠΌΠ΅ΠΆΠ΄Ρ | Π‘ΠΊΠΎΡΠΎΡΡΡ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄Π° Π² ΠΌΠΈΠ»Π»ΠΈΡΠ΅ΠΊΡΠ½Π΄Π°Ρ
.![]() ΠΡΡΠ°Π²ΠΈΡΡ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ
. |

</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.