Como Criar Acordeão Bootstrap Dinâmico
Acordeão (conteúdo recolhível) é a melhor maneira de alternar (ocultar e mostrar) conteúdo grande. Um FAQ é um dos exemplos mais usados de acordeão. O acordeão é usado para exibir mais dados em menos espaço. Ele funciona em um formato de recolhimento-expansão. Usando o acordeão, pode-se ocultar e ver o conteúdo entre as diferentes seções.
O Bootstrap vem com muitos componentes úteis que podem ser facilmente integrados no site. Um deles é o acordeão que usaremos neste tutorial. Se você quiser ver como funciona o acordeão do Bootstrap, verifique o exemplo aqui.
Neste artigo, mostrarei como fazer um acordeão Bootstrap dinâmico. Para fazer o acordeão dinâmico, buscaremos os resultados do banco de dados e criaremos o acordeão com esses registros.
Como adicionar acordeão bootstrap estático no site
Adicionar o acordeão Bootstrap estático no site é muito fácil. Você só precisa copiar o código-fonte fornecido pelo Bootstrap e colocá-lo onde quiser exibir o acordeão. Abaixo está o código de amostra de adição de um acordeão de bootstrap estático.
<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>O código acima exibirá uma configuração estática do Bootstrap em sua página da web. Se você preferir usá-lo com conteúdo estático, basta alterar o título e o conteúdo do HTML acima.
No entanto, o objetivo deste tutorial é criar um acordeão Bootstrap dinâmico. Então, continue lendo Eu mostro como nas próximas etapas.
Começando
Vamos supor que você precise mostrar faqs em acordeão. Para os faqs, precisamos de uma tabela de banco de dados preenchida com algumas entradas fictícias. Portanto, crie um banco de dados chamado ‘bootstrap’ e execute a consulta abaixo para criar uma tabela dentro dele.
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;Depois de criar uma tabela, vamos adicionar algumas entradas fictícias a ela. Essas entradas fictícias serão usadas para criar um acordeão dinâmico.
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.');A próxima parte é escrever código para conectar um banco de dados em PHP. Crie um arquivo index.phpe adicione o código de conexão conforme mostrado abaixo.
$con = mysqli_connect("localhost", "MYSQL_USERNAME", "MYSQL_PASSWORD", "bootstrap");
// Check connection
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: ". mysqli_connect_error();
}Uma vez que você conectou o banco de dados com sucesso, busque o resultado da tabela do banco de dados que iremos solicitar em um momento.
$sql = "SELECT * FROM faq ORDER BY id DESC";
$result = mysqli_query($con,$sql);Crie um acordeão de bootstrap dinâmico
Você buscou os registros da tabela do banco de dados e os atribuiu à variável PHP $result. Faremos um loop por essa variável e tornaremos as coisas dinâmicas.
Se você olhar atentamente para o código HTML de sanfona, notará que o mesmo tipo de marcação se repete. Ao torná-lo dinâmico, temos que ajustar alguns dos atributos como id, class, aria expandido, aria-controls, etc. nesta marcação.
Abaixo está o código que gera um acordeão Bootstrap dinâmico.
<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>Nosso código final é o seguinte.
<?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>É isso! Espero que você entenda como criar um acordeão Bootstrap dinâmico. Por favor, compartilhe seus pensamentos e sugestões na seção de comentários abaixo.
Artigos relacionados
- Arrastar e soltar o upload de arquivos usando JavaScript e PHP
- Upload de arquivo Ajax com PHP e jQuery
- Como implementar jQuery Datepicker com Timepicker