Jak stworzyć dynamiczny akordeon Bootstrap

Ostatnia aktualizacja paź 18, 2021

Zadowolony

Jak dodać statyczny akordeon Bootstrap do strony internetowej?

Akordeon (zawartość zwijana) to najlepszy sposób na przełączanie (ukrywanie i pokazywanie) dużej zawartości. Jednym z najczęściej używanych przykładów akordeonu jest FAQ. Akordeon służy do wyświetlania większej ilości danych na mniejszej przestrzeni. Działa w formacie zwiń-rozwiń. Za pomocą akordeonu można ukryć i zobaczyć zawartość między różnymi sekcjami.

Bootstrap zawiera wiele przydatnych komponentów, które można łatwo zintegrować ze stroną internetową. Jednym z nich jest akordeon, którego użyjemy w tym samouczku. Jeśli chcesz zobaczyć, jak działa akordeon Bootstrap, sprawdź przykład tutaj.

W tym artykule pokażę, jak zrobić dynamiczny akordeon Bootstrap. Aby wykonać akordeon dynamiczny, pobierzemy wyniki z bazy danych i stworzymy akordeon z tymi rekordami.

Jak dodać statyczny akordeon Bootstrap do strony internetowej?

Dodanie statycznego akordeonu Bootstrap na stronie jest bardzo łatwe. Wystarczy skopiować kod źródłowy dostarczony przez Bootstrap i umieścić go w dowolnym miejscu, w którym chcesz wyświetlić akordeon. Poniżej znajduje się przykładowy kod dodawania statycznego akordeonu bootstrap.

<html>
<head>
    <title>Accordion Examples</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
    <div class="accordion" id="accordionExample">
        <div class="card">
            <div class="card-header" id="headingOne">
                <h2 class="mb-0">
                    <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        Collapsible Group Item #1
                    </button>
                </h2>
            </div>
            <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
                <div class="card-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header" id="headingTwo">
                <h2 class="mb-0">
                    <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        Collapsible Group Item #2
                    </button>
                </h2>
            </div>
            <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
                <div class="card-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

Powyższy kod wyświetli na Twojej stronie internetowej statyczny akordeon Bootstrap. Jeśli wolisz używać go z treścią statyczną, wystarczy zmienić tytuł i treść z powyższego kodu HTML.

Jednak celem tego samouczka jest stworzenie dynamicznego akordeonu Bootstrap. Więc czytaj dalej, pokażę Ci jak w kolejnych krokach.

Pierwsze kroki

Załóżmy, że musisz pokazać często zadawane pytania na akordeonie. Do najczęściej zadawanych pytań potrzebujemy tabeli bazy danych wypełnionej kilkoma fikcyjnymi wpisami. Stwórz więc bazę danych o nazwie „bootstrap" i uruchom poniższe zapytanie, aby utworzyć w niej tabelę.

CREATE TABLE `faq` ( `id` int(11) NOT NULL AUTO_INCREMENT,
 `title` text NOT NULL,
 `content` text NOT NULL,
 PRIMARY KEY (`id`)) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Po utworzeniu tabeli dodajmy do niej kilka fikcyjnych wpisów. Te pozorne wpisy posłużą do stworzenia dynamicznego akordeonu.

INSERT INTO `faq` (`id`, `title`, `content`) VALUES
(1, 'Question 1', 'This is answer 1.'),
(2, 'Question 2', 'This is answer 2.'),
(3, 'Question 3', 'This is answer 3.');

Kolejna część to napisanie kodu do podłączenia bazy danych w PHP. Utwórz plik index.phpi dodaj kod połączenia, jak pokazano poniżej.

$con = mysqli_connect("localhost", "MYSQL_USERNAME", "MYSQL_PASSWORD", "bootstrap");
 
// Check connection
if (mysqli_connect_errno()) {
    echo "Failed to connect to MySQL: ". mysqli_connect_error();
}

Po pomyślnym podłączeniu bazy danych pobierz wynik z tabeli bazy danych, którego będziemy potrzebować za chwilę.

$sql = "SELECT * FROM faq ORDER BY id DESC";
$result = mysqli_query($con,$sql);

Stwórz dynamiczny akordeon Bootstrap

Pobrałeś rekordy z tabeli bazy danych i przypisałeś je do zmiennej PHP $result. Przejdziemy przez tę zmienną i sprawimy, że wszystko będzie dynamiczne.

Jeśli przyjrzysz się uważnie kodowi HTML akordeonu, zauważysz, że powtarza się ten sam rodzaj znaczników. Dodając dynamikę, musimy zmodyfikować niektóre atrybuty, takie jak id, class, aria-expanded, aria-controls itp. w tym znaczniku.

Poniżej znajduje się kod, który generuje dynamiczny akordeon Bootstrap.

<div class="accordion" id="accordionExample">
    <?php
    $i=1;
    while($row = mysqli_fetch_assoc($result)) {
        ?>
        <div class="card">
            <div class="card-header" id="heading<?php echo $i; ?>">
                <h2 class="mb-0">
                    <button class="btn btn-link <?php if($i>1) echo "collapsed"; ?>" type="button" data-toggle="collapse" data-target="#collapse<?php echo $i; ?>" aria-expanded="<?php echo ($i==1)? 'true': 'false'; ?>" aria-controls="collapse<?php echo $i; ?>">
                        <?php echo $row['title']; ?>
                    </button>
                </h2>
            </div>
            <div id="collapse<?php echo $i; ?>" class="collapse <?php if($i==1) echo 'show'; ?>" aria-labelledby="heading<?php echo $i; ?>" data-parent="#accordionExample">
                <div class="card-body">
                    <?php echo $row['content']; ?>
                </div>
            </div>
        </div>
        <?php
        $i++;
    }
    ?>
</div>

Nasz ostateczny kod jest następujący.

<?php
$con = mysqli_connect("localhost", "root", "", "bootstrap");
 
// Check connection
if (mysqli_connect_errno()) {
    echo "Failed to connect to MySQL: ". mysqli_connect_error();
}
 
$sql = "SELECT * FROM faq ORDER BY id DESC";
$result = mysqli_query($con,$sql);
?>
 
<html>
<head>
    <title>Accordion Examples</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
</head>
<body>
    <div class="accordion" id="accordionExample">
        <?php
        $i=1;
        while($row = mysqli_fetch_assoc($result)) {
            ?>
            <div class="card">
                <div class="card-header" id="heading<?php echo $i; ?>">
                    <h2 class="mb-0">
                        <button class="btn btn-link <?php if($i>1) echo "collapsed"; ?>" type="button" data-toggle="collapse" data-target="#collapse<?php echo $i; ?>" aria-expanded="<?php echo ($i==1)? 'true': 'false'; ?>" aria-controls="collapse<?php echo $i; ?>">
                            <?php echo $row['title']; ?>
                        </button>
                    </h2>
                </div>
                <div id="collapse<?php echo $i; ?>" class="collapse <?php if($i==1) echo 'show'; ?>" aria-labelledby="heading<?php echo $i; ?>" data-parent="#accordionExample">
                    <div class="card-body">
                        <?php echo $row['content']; ?>
                    </div>
                </div>
            </div>
            <?php
            $i++;
        }
        ?>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

Otóż to! Mam nadzieję, że rozumiesz, jak stworzyć dynamiczny akordeon Bootstrap. Podziel się swoimi przemyśleniami i sugestiami w sekcji komentarzy poniżej.

Powiązane artykuły

Źródło nagrywania: artisansweb.net