Bootstrap - Accordion


Kreiranje Accordion widgeta sa Bootstrap-om

Meniji i widgeti za Accordion široko se koriste na web stranicama za upravljanje velikom količinom sadržaja i listama za navigaciju. Pomoću Bootstrap dodatka za kolaps možete stvoriti Accordion ili jednostavnu sklopivu ploču bez pisanja JavaScript koda. Sljedeći primjer će vam pokazati kako da napravite jednostavan widget za Accordion koristeći sklopivi dodatak Bootstrap-a i komponentu panela.

<div class="accordion" id="myAccordion">
    <div class="card">
        <div class="card-header" id="headingOne">
            <h2 class="mb-0">
                <button type="button" class="btn btn-link" data-toggle="collapse" 
                data-target="#collapseOne">1. Šta je HTML?</button>
            </h2>
        </div>
        <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#myAccordion">
            <div class="card-body">
                <p>HTML označava HyperText Markup Language. HTML je 
                osnovni blok World Wide Web-a. HTML je glavni jezik za opis 
                strukture web stranica. Hypertext je tekst prikazan na računaru ili 
                drugom električnom uređaju s referencama na tekst kojem korisnik 
                može odmah pristupiti, obično klikom miša ili pritiskom tipke.</p>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header" id="headingTwo">
            <h2 class="mb-0">
                <button type="button" class="btn btn-link collapsed" data-toggle="collapse" 
                data-target="#collapseTwo">2. Šta je Bootstrap?</button>
            </h2>
        </div>
        <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#myAccordion">
            <div class="card-body">
                <p>Bootstrap je moćan front-end framework za brži i lakši
                web razvoj. Bootstrap uključuje dizajna zasnovane na HTML-u i 
                CSS-u za stvaranje uobičajenih komponenti korisničkog interfejsa 
                poput obrazaca, dugmadi, navigacija, padajućih menija, upozorenja i
                tako dalje. Bootstrap vam daje mogućnost stvaranja fleksibilnih i 
                prilagodljivih web stranica s mnogo manje napora.</p>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header" id="headingThree">
            <h2 class="mb-0">
                <button type="button" class="btn btn-link collapsed" 
                data-toggle="collapse" data-target="#collapseThree">3. Šta je CSS?</button>
            </h2>
        </div>
        <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#myAccordion">
            <div class="card-body">
                <p>CSS je skraćenica za Cascading Style Sheets. CSS je 
                standardni jezik stila koji se koristi za opisivanje izgleda web 
                stranica. Prije CSS-a, gotovo svi prezentacijski atributi HTML 
                dokumenata sadržavali su se u HTML označivanju (tačnije unutar 
                HTML oznaka), sve boje fonta, stilovi pozadine, poravnanja 
                elemenata, borderi i veličine morali su biti izričito opisani u HTML-u. 
                Kao rezultat toga, razvoj velikih web stranica postao je dug i skup 
                proces, jer su se informacije o stilu više puta dodavale na svaku 
                pojedinačnu web stranicu.</p>
            </div>
        </div>
    </div>
</div>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4 Accordion</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
        margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="accordion" id="accordionExample">
        <div class="card">
            <div class="card-header" id="headingOne">
                <h2 class="mb-0">
                    <button type="button" class="btn btn-link" data-toggle="collapse" 
                    data-target="#collapseOne">1. Šta je HTML?</button>                 
                </h2>
            </div>
            <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
                <div class="card-body">
                    <p>HTML označava HyperText Markup Language. HTML je 
                osnovni blok World Wide Web-a. HTML je glavni jezik za opis 
                strukture web stranica. Hypertext je tekst prikazan na računaru ili 
                drugom električnom uređaju s referencama na tekst kojem korisnik 
                može odmah pristupiti, obično klikom miša ili pritiskom tipke.</p>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header" id="headingTwo">
                <h2 class="mb-0">
                    <button type="button" class="btn btn-link collapsed" 
                    data-toggle="collapse" data-target="#collapseTwo">2. Šta je Bootstrap?</button>
                </h2>
            </div>
            <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordionExample">
                <div class="card-body">
                    <p>Bootstrap je moćan front-end framework za brži i lakši
                web razvoj. Bootstrap uključuje dizajna zasnovane na HTML-u i 
                CSS-u za stvaranje uobičajenih komponenti korisničkog interfejsa 
                poput obrazaca, dugmadi, navigacija, padajućih menija, upozorenja i
                tako dalje. Bootstrap vam daje mogućnost stvaranja fleksibilnih i 
                prilagodljivih web stranica s mnogo manje napora.</p>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header" id="headingThree">
                <h2 class="mb-0">
                    <button type="button" class="btn btn-link collapsed" 
                    data-toggle="collapse" data-target="#collapseThree">3. Šta je CSS?</button>                     
                </h2>
            </div>
            <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
                <div class="card-body">
                    <p>CSS je skraćenica za Cascading Style Sheets. CSS je 
                standardni jezik stila koji se koristi za opisivanje izgleda web 
                stranica. Prije CSS-a, gotovo svi prezentacijski atributi HTML 
                dokumenata sadržavali su se u HTML označivanju (tačnije unutar 
                HTML oznaka), sve boje fonta, stilovi pozadine, poravnanja 
                elemenata, borderi i veličine morali su biti izričito opisani u HTML-u. 
                Kao rezultat toga, razvoj velikih web stranica postao je dug i skup 
                proces, jer su se informacije o stilu više puta dodavale na svaku 
                pojedinačnu web stranicu.</p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>


Bootstrap Accordion sa plus-minus ikonama

Takođe možete dodati plus-minus ikone u Bootstrap widget Accordion kako biste je učinili vizualno privlačnijom s nekoliko redova jQuery koda, kao što je prikazano u sljedećem prijeru:

<script>
$(document).ready(function(){
    // Dodajte minus ikonu za element sažimanja koji je prema zadanim postavkama otvoren
    $(".collapse.show").each(function(){
        $(this).prev(".card-header").find(".fa").addClass("fa-minus").removeClass("fa-plus");
    });
    
    // Uključite / isključite ikonu plus minus na prikazu skrivanja elementa skupljanja
    $(".collapse").on('show.bs.collapse', function(){
        $(this).prev(".card-header").find(".fa").removeClass("fa-plus").addClass("fa-minus");
    }).on('hide.bs.collapse', function(){
        $(this).prev(".card-header").find(".fa").removeClass("fa-minus").addClass("fa-plus");
    });
});
</script>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4 Accordion sa plus-minus ikonama</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
    .bs-example{
        margin: 20px;
    }
    .accordion .fa{
        margin-right: 0.5rem;
    }
</style>
<script>
    $(document).ready(function(){
        // Dodajte minus ikonu za element sažimanja koji je prema zadanim postavkama otvoren
        $(".collapse.show").each(function(){
          $(this).prev(".card-header").find(".fa").addClass("fa-minus").removeClass("fa-plus");
        });
        
        // Uključite / isključite ikonu plus minus na prikazu skrivanja elementa skupljanja
        $(".collapse").on('show.bs.collapse', function(){
          $(this).prev(".card-header").find(".fa").removeClass("fa-plus").addClass("fa-minus");
        }).on('hide.bs.collapse', function(){
          $(this).prev(".card-header").find(".fa").removeClass("fa-minus").addClass("fa-plus");
        });
    });
</script>
</head>
<body>
<div class="bs-example">
    <div class="accordion" id="accordionExample">
        <div class="card">
            <div class="card-header" id="headingOne">
                <h2 class="mb-0">
                    <button type="button" class="btn btn-link" 
                    data-toggle="collapse" data-target="#collapseOne"><i class="fa fa-plus"></i> Šta je HTML?</button>
                </h2>
            </div>
            <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
                <div class="card-body">
                    <p>HTML označava HyperText Markup Language. HTML je 
                osnovni blok World Wide Web-a. HTML je glavni jezik za opis 
                strukture web stranica. Hypertext je tekst prikazan na računaru ili 
                drugom električnom uređaju s referencama na tekst kojem korisnik 
                može odmah pristupiti, obično klikom miša ili pritiskom tipke.</p>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header" id="headingTwo">
                <h2 class="mb-0">
                    <button type="button" class="btn btn-link collapsed" data-toggle="collapse" 
                    data-target="#collapseTwo"><i class="fa fa-plus"></i> Šta je Bootstrap?</button>
                </h2>
            </div>
            <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordionExample">
                <div class="card-body">
                    <p>Bootstrap je moćan front-end framework za brži i lakši
                web razvoj. Bootstrap uključuje dizajna zasnovane na HTML-u i 
                CSS-u za stvaranje uobičajenih komponenti korisničkog interfejsa 
                poput obrazaca, dugmadi, navigacija, padajućih menija, upozorenja i
                tako dalje. Bootstrap vam daje mogućnost stvaranja fleksibilnih i 
                prilagodljivih web stranica s mnogo manje napora.</p>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header" id="headingThree">
                <h2 class="mb-0">
                    <button type="button" class="btn btn-link collapsed" data-toggle="collapse" 
                    data-target="#collapseThree"><i class="fa fa-plus"></i> Šta je CSS?</button>                     
                </h2>
            </div>
            <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
                <div class="card-body">
                    <p>CSS je skraćenica za Cascading Style Sheets. CSS je 
                standardni jezik stila koji se koristi za opisivanje izgleda web 
                stranica. Prije CSS-a, gotovo svi prezentacijski atributi HTML 
                dokumenata sadržavali su se u HTML označivanju (tačnije unutar 
                HTML oznaka), sve boje fonta, stilovi pozadine, poravnanja 
                elemenata, borderi i veličine morali su biti izričito opisani u HTML-u. 
                Kao rezultat toga, razvoj velikih web stranica postao je dug i skup 
                proces, jer su se informacije o stilu više puta dodavale na svaku 
                pojedinačnu web stranicu.</p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>


Proširivanje i sažimanje elemenata putem atributa podataka (Data Attributes)

Možete koristiti Bootstrap funkciju collapse za proširenje i skupljanje bilo kog određenog elementa putem atributa podataka (Data Attributes) bez upotrebe oznake accordion.

<!-- Dugme okidača HTML -->
<input type="button" class="btn btn-primary" data-toggle="collapse" data-target="#toggleDemo" value="Toggle dugme">
    
<!-- Sklopivi HTML element -->
<div id="toggleDemo" class="collapse show"><p>Ovo je jednostavan primjer proširivanja i skupljanja pojedinog 
elementa putem atributa podataka. Kliknite na dugme <b> Toggle dugme</b> da vidite efekat.</p></div>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kreiranje Bootstrap 4 sklopivog elementa putem atributa podataka</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
p{
    background: #eee;
    border: 1px solid #ccc;
    margin: 20px 0;
    padding: 30px;
}
</style>
</head>
<body>
<div class="container-lg my-3">
    <!-- Dugme okidača HTML -->
    <input type="button" class="btn btn-primary" data-toggle="collapse" 
    data-target="#myCollapsible" value="Toggle dugme">

    <!-- Sklopivi HTML element -->
    <div id="myCollapsible" class="collapse show"><p>Ovo je jednostavan primjer proširivanja i skupljanja pojedinog 
    elementa putem atributa podataka. Kliknite na dugme <b> Toggle dugme</b> da vidite efekat.</p></div>
</div>
</body>
</html>

Upravo smo stvorili sklopivu kontrolu bez pisanja JavaScript koda.



Proširivanje i sažimanje elemenata putem JavaScript

Pojedinačni element možete i proširiti i sažeti ručno putem JavaScripta - samo pozovite Bootstrap metodu collapse() pomoću id-a ili selektora klase sklopivog elementa u vašem JavaScript kodu.

<!-- JavaScript to Expand and Collapse Element -->
<script>
$(document).ready(function(){
    $(".btn").click(function(){
        $("#toggleDemo").collapse('toggle');
    });
});
</script>

<!-- Dugme okidača HTML -->
<input type="button" class="btn btn-primary" data-toggle="collapse" data-target="#toggleDemo" value="Toggle dugme">
    
<!-- Sklopivi HTML element -->
<div id="toggleDemo" class="collapse show"><p>Ovo je jednostavan primjer proširivanja i skupljanja pojedinog 
elementa putem atributa podataka. Kliknite na dugme <b> Toggle dugme</b> da vidite efekat.</p></div>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kreiranje Bootstrap 4 sklopivog elementa putem JavaScript</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function(){
    $(".btn").click(function(){
        $("#myCollapsible").collapse('toggle');
    });
});
</script>
<style>
p{
    background: #eee;
    border: 1px solid #ccc;
    margin: 20px 0;
    padding: 30px;
}
</style>
</head>
<body>
<div class="container-lg my-3">
    <!-- Dugme okidača HTML -->
<input type="button" class="btn btn-primary" data-toggle="collapse" data-target="#toggleDemo" value="Toggle dugme">
    
<!-- Sklopivi HTML element -->
<div id="toggleDemo" class="collapse show"><p>Ovo je jednostavan primjer proširivanja i skupljanja pojedinog 
elementa putem atributa podataka. Kliknite na dugme <b> Toggle dugme</b> da vidite efekat.</p></div>
</body>
</html>


Opcije

Postoje određene opcije koje se mogu prosljediti Bootstrap metodi collaps() za prilagođavanje funkcionalnosti sklopivog elementa.

Ime Tip Vrijednost Opis
parent selector false Svi drugi sklopivi elementi pod navedenim roditeljem će biti zatvoreni dok se ova sklopiva stavka prikazuje pri pozivanju.
toggle boolean true Uključuje / isključuje sklopivi element pri pozivanju.

Ove opcije takođe možete postaviti koristeći atribute podataka na accordion. Samo dodajte naziv opcije u data-, kao što je: parent="#myAccordion", data-toggle="false" itd. kao što je prikazano u osnovnoj implementaciji.