Bootstrap Accordionlar

Hazırlayan: Ömer Faruk YALÇINKAYA

Bootstrap Accordionlar

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.

</h2>

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

<button type="button" class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseTwo">2. What is Bootstrap?</button>

</h2>

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

</h2>

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

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.

Accordion Item #1

</button>

</h2>

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

Accordion Item #2

</button>

</h2>

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

Accordion Item #3

</button>

</h2>

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

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">

<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