Bootstrap Accordion Nedir ?
Bootstrap Accordion, Bootstrap framework'ünün bir bileşenidir ve web sayfalarında kullanılan bir arayüz öğesidir. Accordion, kullanıcıların bir başlık veya etikete tıkladığında ilgili içeriğin açılmasına izin verir ve sayfa alanının daha verimli kullanılmasını sağlar. Bir sayfada birden fazla başlık-altı içerik bölümü olduğunda, kullanıcılara kolaylık sağlayan bir arayüz öğesidir.
Nasıl Çalışır ?
Accordion bileşeni, <collapse> sınıfı kullanılarak oluşturulur. <data-parent> özelliği kullanılarak, başlık bölümlerinin hangi bileşenlerin kapsamında çalışacağı belirtilir. Accordion, varsayılan olarak yalnızca bir içeriği açık tutar. "<show>" özelliği kullanılarak, birden fazla içeriğin açık tutulması da sağlanabilir.
Bootstrap collapse sınıfları ile içerikleri gösterip gizleme nasıl yapılır ?
Bootstrap collapse sınıfları ile sayfa üzerindeki her hangi bir içeriği bir buton ya da link aracılığı ile gösterebilir ya da gizleyebiliriz.
ÖRNEK:
Gizlenen İçerik
Gösterilen içerik
<.collapse> sınıfını verdiğimiz etiket <div> gösterilecek ya da gizlenecek içeriği kapsarlar ve bu içeriğin gösterilmesi ya da gizlenmesi için bir buton ile ilişkilendirilmesi gerekiyor.
ayrıca bu <.collapse> etiketine bir <id> değeri vermemiz gerekiyor ki bu etiket ile button ilişkilendirilebilsin.
NOT:İçeriği gösterecek ya da gizleyecek olan <button> etiketi için data-toggle="collapse" özelliğini kullanmalıyız ki; bu bilgi ile butona bu collapse özelliği veriliyor, aksi halde butona javascript ile ulaşıp collapse olayını bu şekilde tetiklememiz gerekiyor.
**son olarak "data-target="#demo" şeklinde içeriğin <id> 'si ile ilişkilendirme yapmalıyız.
Varsayılan olarak <collapse> içerikleri kapalı gelir sayfa ilk yüklendiğinde içeriğin gösterilmiş bir şekilde gelmesi için <.show> sınıfını kullanmalıyız.
Açılır Bölümler ve Bölümlerin Düzenlenmesi
Aşağıda sadece bir içeriği açık tutan kod ve bu kodun çıktısı verilmiştir.
<div class="accordion" id="myAccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseOne">1. What is HTML?</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#myAccordion">
<div class="card-body">
<p>HTML stands for HyperText Markup Language. HTML is the standard markup language for describing the structure of web pages. <a href="https://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn more.</a></p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button type="button" class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseTwo">2. What is Bootstrap?</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse show" data-bs-parent="#myAccordion">
<div class="card-body">
<p>Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank">Learn more.</a></p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseThree">3. What is CSS?</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#myAccordion">
<div class="card-body">
<p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. <a href="https://www.tutorialrepublic.com/css-tutorial/" target="_blank">Learn more.</a></p>
</div>
</div>
</div>
</div>
Aşağıdaki örnekte ise <show> (daima açık accordion ögesi) kullanılarak ögelerin daima açık kaldığı isteğe bağlı olarak manuel kapatılabilen bir accordion kodu ve bu kodun çıktısı verilmiştir.
<div class="accordion" id="accordionPanelsStayOpenExample">
<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
Accordion Item #1
</button>
</h2>
<div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show" aria-labelledby="panelsStayOpen-headingOne">
<div class="accordion-body">
<strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false" aria-controls="panelsStayOpen-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingTwo">
<div class="accordion-body">
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false" aria-controls="panelsStayOpen-collapseThree">
Accordion Item #3
</button>
</h2>
<div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingThree">
<div class="accordion-body">
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
</div>
Dış akordiyon(accordion) ile açılır bölümler arasında referans ilişkisi
Bootstrap dış akordion ve açılır bölmeler, web sitelerinde içerikleri daha iyi organize etmek ve kullanıcıların erişimini kolaylaştırmak için kullanılan farklı bileşenlerdir. Ancak, bu iki bileşenin birbirlerine doğrudan bir referans ilişkisi yoktur.
Dış akordionlar, genellikle web sitelerinde sayfalar arasında gezinirken içerikleri dinamik olarak yüklemek için kullanılır. Açılır bölmeler ise sayfa içinde belirli bir bölümü açmak veya gizlemek için kullanılır. Bu iki bileşenin bir arada kullanılması, daha karmaşık web sayfaları için kullanışlı olabilir.
Örneğin, bir web sitesinde, bir ana bölmenin içinde bir açılır bölme bulunabilir. Bu açılır bölmede, daha spesifik bilgilere ulaşmak için dış akordion kullanılabilir. Bu, kullanıcının daha fazla bilgiye hızlıca erişmesini sağlar ve daha iyi bir kullanıcı deneyimi sunar.
ÖRNEK:
<dx:BootstrapAccordion runat="server" AllowSelectItem="true">
<ClientSideEvents ItemClick="onItemClick_ItemsSelection" />
<Groups>
<dx:BootstrapAccordionGroup Text=".NET Controls">
<Items>
<dx:BootstrapAccordionItem Text="WinForms" >
</dx:BootstrapAccordionItem>
<dx:BootstrapAccordionItem Text="ASP.NET" Selected="true">
</dx:BootstrapAccordionItem>
<dx:BootstrapAccordionItem Text="ASP.NET MVC" >
</dx:BootstrapAccordionItem>
<dx:BootstrapAccordionItem Text="WPF" >
</dx:BootstrapAccordionItem>
</Items>
</dx:BootstrapAccordionGroup>
<dx:BootstrapAccordionGroup Text="Cross Platform">
<Items>
<dx:BootstrapAccordionItem Text="Reporting" >
</dx:BootstrapAccordionItem>
<dx:BootstrapAccordionItem Text="Document Server" >
</dx:BootstrapAccordionItem>
</Items>
</dx:BootstrapAccordionGroup>
</Groups>
</dx:BootstrapAccordion>
JS:
function onItemClick_ItemsSelection(s, e) {
dxbsDemo.showToast("The '" + s.GetSelectedItem().GetText() + "' item has been selected.");
}
Gösterilen İçerik
Gizlenen İçerik