Nasıl Yapılır - Daralt
Daraltılabilir bir bölümün nasıl oluşturulacağını öğrenin.
katlanabilir
Daraltılabilir içeriği gösterme ve gizleme arasında geçiş yapmak için düğmeyi tıklayın.
Bazı daraltılabilir içerik. Daraltılabilir içeriği gösterme ve gizleme arasında geçiş yapmak için düğmeyi tıklayın. Ağrının kendisi önemlidir, ancak ağrı, yağlanma süreciyle artar, ancak onu kesmesi için zaman veriyorum, böylece harika işler ve acı çekeyim. Çoğunlukla, herhangi birimiz, amaçlarından yararlanmak dışında herhangi bir tür istihdamın uygulanmasına geleceğiz.
Bir Katlanabilir Oluşturun
Adım 1) HTML'yi ekleyin:
Örnek
<button type="button" class="collapsible">Open Collapsible</button>
<div class="content">
<p>Lorem ipsum...</p>
</div>
Adım 2) CSS'yi ekleyin:
Akordeon stili:
Örnek
/* 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;
}
Adım 3) JavaScript'i ekleyin:
Örnek
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";
}
});
}
Hareketli Katlanabilir (Aşağı Kaydır)
Bir animasyonu daraltılabilir hale getirmek için, sınıfa max-height özelliği için max-height: 0
ve overflow: hidden
a ekleyin.transition
panel
max-height
Ardından, farklı ekran boyutlarında panelin yüksekliğine bağlı olarak hesaplanan bir değer ayarlayarak içeriği aşağı kaydırmak için JavaScript'i kullanın
:
Örnek
<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>
Simge Ekle
Daraltılabilir içeriğin açık mı yoksa kapalı mı olduğunu belirtmek için her düğmeye bir sembol ekleyin:
Örnek
.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 (-) */
}