Как создать динамический бутстрап-аккордеон

Последнее обновление Июл 12, 2021

Содержание

Как добавить статический загрузочный аккордеон на веб-сайт

Создайте динамический загрузочный аккордеон

Аккордеон (сворачиваемое содержимое) – лучший способ переключать (скрывать и показывать) большое содержимое. FAQ – один из часто используемых примеров аккордеона. Аккордеон используется для отображения большего количества данных на меньшем пространстве. Он работает в формате свертывания-разворачивания. Используя аккордеон, можно скрывать и видеть содержимое между разными разделами.

Bootstrap поставляется с множеством полезных компонентов, которые можно легко интегрировать на веб-сайт. Один из них – аккордеон, который мы будем использовать в этом уроке. Если вы хотите увидеть, как работает аккордеон Bootstrap, посмотрите пример здесь.

В этой статье я покажу вам, как сделать динамический аккордеон на Bootstrap. Чтобы сделать динамический аккордеон, мы извлечем результаты из базы данных и создадим аккордеон с этими записями.

Как добавить статический загрузочный аккордеон на веб-сайт

Добавить статический аккордеон Bootstrap на сайт очень просто. Вам просто нужно скопировать исходный код, предоставленный 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>

Приведенный выше код отобразит статический аккордеон Bootstrap на вашей веб-странице. Если вы предпочитаете использовать его со статическим содержимым, вам просто нужно изменить заголовок и содержимое из приведенного выше HTML.

Однако цель этого руководства – создать динамический аккордеон Bootstrap. Итак, читайте дальше, я покажу вам, как это сделать в следующих шагах.

Начиная

Предположим, вам нужно отобразить часто задаваемые вопросы аккордеоном. Для часто задаваемых вопросов нам нужна таблица базы данных, заполненная несколькими фиктивными записями. Итак, создайте базу данных под названием «bootstrap» и выполните приведенный ниже запрос, чтобы создать внутри нее таблицу.

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;

После создания таблицы давайте добавим в нее несколько фиктивных записей. Эти фиктивные записи будут использоваться для создания динамического аккордеона.

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

Следующая часть – написание кода для подключения базы данных на PHP. Создайте файл index.phpи добавьте код подключения, как показано ниже.

$con = mysqli_connect("localhost", "MYSQL_USERNAME", "MYSQL_PASSWORD", "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);

Создайте динамический загрузочный аккордеон

Вы выбрали записи из таблицы базы данных и назначили их переменной PHP $result. Мы пройдемся по этой переменной и сделаем ее динамичной.

Если вы внимательно посмотрите на HTML-код аккордеона, вы заметите, что такая же разметка повторяется. Делая его динамическим, мы должны настроить в этой разметке некоторые атрибуты, такие как id, class, aria-extended, aria-controls и т.д.

Ниже приведен код, который генерирует динамический аккордеон 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>

Наш окончательный код выглядит следующим образом.

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

Это оно! Надеюсь, вы понимаете, как создать динамический аккордеон Bootstrap. Пожалуйста, поделитесь своими мыслями и предложениями в разделе комментариев ниже.

Статьи по Теме

Источник записи: artisansweb.net