So erstellen Sie ein dynamisches Bootstrap-Akkordeon

Last updated 18. Oktober 2021

Inhalt

So fügen Sie ein statisches Bootstrap-Akkordeon in die Website ein

Erstellen Sie ein dynamisches Bootstrap-Akkordeon

Akkordeon (zusammenklappbarer Inhalt) ist der beste Weg, um große Inhalte umzuschalten (auszublenden und anzuzeigen). Eine FAQ ist eines der am häufigsten verwendeten Beispiele für das Akkordeon. Das Akkordeon wird verwendet, um mehr Daten auf weniger Platz anzuzeigen. Es funktioniert auf einem Minimieren-Erweitern-Format. Mit dem Akkordeon kann man Inhalte zwischen verschiedenen Abschnitten ein- und ausblenden.

Bootstrap bringt viele nützliche Komponenten mit, die sich problemlos auf der Website integrieren lassen. Eines davon ist Akkordeon, das wir in diesem Tutorial verwenden werden. Wenn Sie sehen möchten, wie das Akkordeon von Bootstrap funktioniert, sehen Sie sich das Beispiel hier an.

In diesem Artikel zeige ich Ihnen, wie Sie ein dynamisches Bootstrap-Akkordeon herstellen. Um das dynamische Akkordeon zu erstellen, holen wir die Ergebnisse aus der Datenbank und erstellen ein Akkordeon mit diesen Datensätzen.

So fügen Sie ein statisches Bootstrap-Akkordeon in die Website ein

Das Hinzufügen des statischen Bootstrap-Akkordeons auf der Website ist super einfach. Sie müssen nur den von Bootstrap bereitgestellten Quellcode kopieren und dort platzieren, wo Sie das Akkordeon anzeigen möchten. Unten ist der Beispielcode zum Hinzufügen eines statischen Bootstrap-Akkordeons.

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

Der obige Code zeigt statisches Bootstrap-Akkordeon auf Ihrer Webseite an. Wenn Sie es vorziehen, es mit statischem Inhalt zu verwenden, müssen Sie nur den Titel und den Inhalt aus dem obigen HTML-Code ändern.

Der Zweck dieses Tutorials besteht jedoch darin, ein dynamisches Bootstrap-Akkordeon zu erstellen. Lesen Sie also weiter, ich zeige Ihnen in den nächsten Schritten, wie.

Einstieg

Nehmen wir an, Sie müssen FAQs im Akkordeon anzeigen. Für die FAQs brauchen wir eine Datenbanktabelle, die mit ein paar Dummy-Einträgen gefüllt ist. Erstellen Sie also eine Datenbank namens ‘bootstrap’ und führen Sie die folgende Abfrage aus, um eine Tabelle darin zu erstellen.

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;

Nachdem wir eine Tabelle erstellt haben, fügen wir ihr einige Dummy-Einträge hinzu. Diese Dummy-Einträge werden verwendet, um ein dynamisches Akkordeon zu erstellen.

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.');

Der nächste Teil ist das Schreiben von Code zum Verbinden einer Datenbank in PHP. Erstellen Sie eine Datei index.phpund fügen Sie den Verbindungscode wie unten gezeigt hinzu.

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

Nachdem Sie die Datenbank erfolgreich verbunden haben, holen Sie das Ergebnis aus der Datenbanktabelle, die wir gleich benötigen.

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

Erstellen Sie ein dynamisches Bootstrap-Akkordeon

Sie haben die Datensätze aus der Datenbanktabelle geholt und der PHP-Variablen zugewiesen $result. Wir werden diese Variable durchlaufen und die Dinge dynamisch machen.

Wenn Sie sich den HTML-Code von Akkordeon genau ansehen, werden Sie feststellen, dass dieselbe Art von Markup wiederholt wird. Während wir es dynamisch machen, müssen wir einige der Attribute wie id, class, aria-expanded, aria-controls usw. in diesem Markup optimieren.

Unten ist der Code, der ein dynamisches Bootstrap-Akkordeon generiert.

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

Unser endgültiger Code ist wie folgt.

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

Das ist es! Ich hoffe, Sie verstehen, wie man ein dynamisches Bootstrap-Akkordeon erstellt. Bitte teilen Sie Ihre Gedanken und Vorschläge im Kommentarbereich unten mit.

Zum Thema passende Artikel

Aufnahmequelle: artisansweb.net