Як створити динамічний акордеон Bootstrap

Останнє оновлення Жов 17, 2021

Зміст

Як додати статичний акордеон Bootstrap на веб – сайті

Акордеон (розбірний вміст) – найкращий спосіб перемикання (приховування та показування) великого вмісту. FAQ – це один із найпоширеніших прикладів акордеону. Аккордеон використовується для відображення більшої кількості даних за менший простір. Він працює у форматі згортання-розширення. За допомогою гармошки можна приховати і побачити вміст між різними розділами.

Bootstrap має безліч корисних компонентів, які легко інтегрувати на веб-сайт. Одним з них є акордеон, який ми використаємо в цьому посібнику. Якщо ви хочете побачити, як працює акордеон 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-expand, 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