Yig‘iladigan blok (collapsible)
Yig‘iladigan bo‘lim yaratishni o‘rganing.
Yig‘iladigan blok (collapsible)
Yig‘iladigan kontentni ko‘rsatish va yashirish o‘rtasida almashtirish uchun tugmani bosing.
Yig‘iladigan kontentga misol. Yig‘iladigan kontentni ko‘rsatish va yashirish o‘rtasida almashtirish uchun tugmani bosing. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Yig‘iladigan blok yaratish
1-qadam) HTML qo‘shing:
Misol
<button type="button" class="collapsible">Open Collapsible</button>
<div class="content">
<p>Lorem ipsum...</p>
</div>
2-qadam) CSS qo‘shing:
Akkordeonga uslub bering:
Misol
/* Style the button that is used to open and close the collapsible content */
.collapsible {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
background-color: #ccc;
}
/* Style the collapsible content. Note: hidden by default */
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
3-qadam) JavaScript qo‘shing:
Misol
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
O‘zingiz sinab ko‘ring »
Animatsiyali yig‘iladigan blok (pastga surilib ochiladigan)
Animatsiyali yig‘iladigan blok yaratish uchun panel klassiga max-height: 0, overflow: hidden va max-height xossasi uchun transition qo‘shing.
So‘ngra JavaScript yordamida, turli ekran o‘lchamlaridagi panel balandligiga qarab hisoblangan max-height qiymatini o‘rnatib, kontentni pastga surib oching:
Misol
<style>
.content {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
</style>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
</script>
O‘zingiz sinab ko‘ring »
Ikonkalar qo‘shish
Yig‘iladigan kontent ochiq yoki yopiq ekanini ko‘rsatish uchun har bir tugmaga belgi qo‘shing:
Misol
.collapsible:after {
content: '\02795'; /* Unicode character for "plus" sign (+) */
font-size: 13px;
color: white;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2796"; /* Unicode character for "minus" sign (-) */
}
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!