{"id":28612,"date":"2021-05-28T19:58:00","date_gmt":"2021-05-28T16:58:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28612"},"modified":"2021-10-18T03:41:11","modified_gmt":"2021-10-18T00:41:11","slug":"jak-stworzyc-dynamiczny-akordeon-bootstrap","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pl\/jak-stworzyc-dynamiczny-akordeon-bootstrap\/","title":{"rendered":"Jak stworzy\u0107 dynamiczny akordeon Bootstrap"},"content":{"rendered":"

Akordeon (zawarto\u015b\u0107 zwijana) to najlepszy spos\u00f3b na prze\u0142\u0105czanie (ukrywanie i pokazywanie) du\u017cej zawarto\u015bci. Jednym z najcz\u0119\u015bciej u\u017cywanych przyk\u0142ad\u00f3w akordeonu jest FAQ. Akordeon s\u0142u\u017cy do wy\u015bwietlania wi\u0119kszej ilo\u015bci danych na mniejszej przestrzeni. Dzia\u0142a w formacie zwi\u0144-rozwi\u0144. Za pomoc\u0105 akordeonu mo\u017cna ukry\u0107 i zobaczy\u0107 zawarto\u015b\u0107 mi\u0119dzy r\u00f3\u017cnymi sekcjami.<\/p>\n

Bootstrap zawiera wiele przydatnych komponent\u00f3w, kt\u00f3re mo\u017cna \u0142atwo zintegrowa\u0107 ze stron\u0105 internetow\u0105. Jednym z nich jest akordeon, kt\u00f3rego u\u017cyjemy w tym samouczku. Je\u015bli chcesz zobaczy\u0107, jak dzia\u0142a akordeon Bootstrap, sprawd\u017a przyk\u0142ad tutaj<\/a>.<\/p>\n

W tym artykule poka\u017c\u0119, jak zrobi\u0107 dynamiczny akordeon Bootstrap. Aby wykona\u0107 akordeon dynamiczny, pobierzemy wyniki z bazy danych i stworzymy akordeon z tymi rekordami.<\/p>\n

Jak doda\u0107 statyczny akordeon Bootstrap do strony internetowej?<\/h3>\n

Dodanie statycznego akordeonu Bootstrap na stronie jest bardzo \u0142atwe. Wystarczy skopiowa\u0107 kod \u017ar\u00f3d\u0142owy dostarczony przez Bootstrap i umie\u015bci\u0107 go w dowolnym miejscu, w kt\u00f3rym chcesz wy\u015bwietli\u0107 akordeon. Poni\u017cej znajduje si\u0119 przyk\u0142adowy kod dodawania statycznego akordeonu bootstrap.<\/p>\n

<html>\n<head>\n\u00a0\u00a0\u00a0\u00a0<title>Accordion Examples<\/title>\n\u00a0\u00a0\u00a0\u00a0<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\">\n<\/head>\n<body>\n\u00a0\u00a0\u00a0\u00a0<div class=\"accordion\" id=\"accordionExample\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"card\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"card-header\" id=\"headingOne\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h2 class=\"mb-0\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<button class=\"btn btn-link\" type=\"button\" data-toggle=\"collapse\" data-target=\"#collapseOne\" aria-expanded=\"true\" aria-controls=\"collapseOne\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Collapsible Group Item #1\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/button>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/h2>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div id=\"collapseOne\" class=\"collapse show\" aria-labelledby=\"headingOne\" data-parent=\"#accordionExample\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"card-body\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Anim 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.\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"card\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"card-header\" id=\"headingTwo\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h2 class=\"mb-0\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<button class=\"btn btn-link collapsed\" type=\"button\" data-toggle=\"collapse\" data-target=\"#collapseTwo\" aria-expanded=\"false\" aria-controls=\"collapseTwo\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Collapsible Group Item #2\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/button>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/h2>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div id=\"collapseTwo\" class=\"collapse\" aria-labelledby=\"headingTwo\" data-parent=\"#accordionExample\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"card-body\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Anim 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.\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/code.jquery.com\/jquery-3.3.1.slim.min.js\" integrity=\"sha384-q8i\/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo\" crossorigin=\"anonymous\"><\/script>\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.3.1\/js\/bootstrap.min.js\" integrity=\"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf\/nJGzIxFDsf4x0xIM+B07jRM\" crossorigin=\"anonymous\"><\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
Powy\u017cszy kod wy\u015bwietli na Twojej stronie internetowej statyczny akordeon Bootstrap. Je\u015bli wolisz u\u017cywa\u0107 go z tre\u015bci\u0105 statyczn\u0105, wystarczy zmieni\u0107 tytu\u0142 i tre\u015b\u0107 z powy\u017cszego kodu HTML.<\/p>\n
Jednak celem tego samouczka jest stworzenie dynamicznego akordeonu Bootstrap. Wi\u0119c czytaj dalej, poka\u017c\u0119 Ci jak w kolejnych krokach.<\/p>\n
Pierwsze kroki<\/h3>\n
Za\u0142\u00f3\u017cmy, \u017ce musisz pokaza\u0107 cz\u0119sto zadawane pytania na akordeonie. Do najcz\u0119\u015bciej zadawanych pyta\u0144 potrzebujemy tabeli bazy danych wype\u0142nionej kilkoma fikcyjnymi wpisami. Stw\u00f3rz wi\u0119c baz\u0119 danych o nazwie \u201ebootstrap" i uruchom poni\u017csze zapytanie, aby utworzy\u0107 w niej tabel\u0119.<\/p>\n
CREATE TABLE `faq` (\u00a0`id` int(11) NOT NULL AUTO_INCREMENT,\n\u00a0`title` text NOT NULL,\n\u00a0`content` text NOT NULL,\n\u00a0PRIMARY KEY (`id`)) ENGINE=InnoDB DEFAULT CHARSET=latin1;<\/code><\/pre>\n
Po utworzeniu tabeli dodajmy do niej kilka fikcyjnych wpis\u00f3w. Te pozorne wpisy pos\u0142u\u017c\u0105 do stworzenia dynamicznego akordeonu.<\/p>\n
INSERT INTO `faq` (`id`, `title`, `content`) VALUES\n(1, 'Question 1', 'This is answer 1.'),\n(2, 'Question 2', 'This is answer 2.'),\n(3, 'Question 3', 'This is answer 3.');<\/code><\/pre>\n
Kolejna cz\u0119\u015b\u0107 to napisanie kodu do pod\u0142\u0105czenia bazy danych w PHP. Utw\u00f3rz plik index.php<\/code>i dodaj kod po\u0142\u0105czenia, jak pokazano poni\u017cej.<\/p>\n
$con = mysqli_connect(\"localhost\", \"MYSQL_USERNAME\", \"MYSQL_PASSWORD\", \"bootstrap\");\n\u00a0\n\/\/ Check connection\nif (mysqli_connect_errno()) {\n\u00a0\u00a0\u00a0\u00a0echo \"Failed to connect to MySQL: \". mysqli_connect_error();\n}<\/code><\/pre>\n
Po pomy\u015blnym pod\u0142\u0105czeniu bazy danych pobierz wynik z tabeli bazy danych, kt\u00f3rego b\u0119dziemy potrzebowa\u0107 za chwil\u0119.<\/p>\n
$sql = \"SELECT * FROM faq ORDER BY id DESC\";\n$result = mysqli_query($con,$sql);<\/code><\/pre>\n
Stw\u00f3rz dynamiczny akordeon Bootstrap<\/h3>\n
Pobra\u0142e\u015b rekordy z tabeli bazy danych i przypisa\u0142e\u015b je do zmiennej PHP $result<\/code>. Przejdziemy przez t\u0119 zmienn\u0105 i sprawimy, \u017ce wszystko b\u0119dzie dynamiczne.<\/p>\n
Je\u015bli przyjrzysz si\u0119 uwa\u017cnie kodowi HTML akordeonu, zauwa\u017cysz, \u017ce powtarza si\u0119 ten sam rodzaj znacznik\u00f3w. Dodaj\u0105c dynamik\u0119, musimy zmodyfikowa\u0107 niekt\u00f3re atrybuty, takie jak id, class, aria-expanded, aria-controls itp. w tym znaczniku.<\/p>\n
Poni\u017cej znajduje si\u0119 kod, kt\u00f3ry generuje dynamiczny akordeon Bootstrap.<\/p>\n
<div class=\"accordion\" id=\"accordionExample\">\n\u00a0\u00a0\u00a0\u00a0<?php\n\u00a0\u00a0\u00a0\u00a0$i=1;\n\u00a0\u00a0\u00a0\u00a0while($row = mysqli_fetch_assoc($result)) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"card\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"card-header\" id=\"heading<?php echo $i; ?>\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h2 class=\"mb-0\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<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; ?>\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php echo $row['title']; ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/button>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/h2>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div id=\"collapse<?php echo $i; ?>\" class=\"collapse <?php if($i==1) echo 'show'; ?>\" aria-labelledby=\"heading<?php echo $i; ?>\" data-parent=\"#accordionExample\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"card-body\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php echo $row['content']; ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$i++;\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0?>\n<\/div><\/code><\/pre>\n
Nasz ostateczny kod jest nast\u0119puj\u0105cy.<\/p>\n
<?php\n$con = mysqli_connect(\"localhost\", \"root\", \"\", \"bootstrap\");\n\u00a0\n\/\/ Check connection\nif (mysqli_connect_errno()) {\n\u00a0\u00a0\u00a0\u00a0echo \"Failed to connect to MySQL: \". mysqli_connect_error();\n}\n\u00a0\n$sql = \"SELECT * FROM faq ORDER BY id DESC\";\n$result = mysqli_query($con,$sql);\n?>\n\u00a0\n<html>\n<head>\n\u00a0\u00a0\u00a0\u00a0<title>Accordion Examples<\/title>\n\u00a0\u00a0\u00a0\u00a0<link rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.3.1\/css\/bootstrap.min.css\" \/>\n<\/head>\n<body>\n\u00a0\u00a0\u00a0\u00a0<div class=\"accordion\" id=\"accordionExample\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$i=1;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0while($row = mysqli_fetch_assoc($result)) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"card\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"card-header\" id=\"heading<?php echo $i; ?>\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h2 class=\"mb-0\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<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; ?>\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php echo $row['title']; ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/button>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/h2>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div id=\"collapse<?php echo $i; ?>\" class=\"collapse <?php if($i==1) echo 'show'; ?>\" aria-labelledby=\"heading<?php echo $i; ?>\" data-parent=\"#accordionExample\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"card-body\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php echo $row['content']; ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$i++;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0?>\n\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/code.jquery.com\/jquery-3.3.1.slim.min.js\"><\/script>\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.3.1\/js\/bootstrap.min.js\"><\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
Ot\u00f3\u017c \u200b\u200bto! Mam nadziej\u0119, \u017ce rozumiesz, jak stworzy\u0107 dynamiczny akordeon Bootstrap. Podziel si\u0119 swoimi przemy\u015bleniami i sugestiami w sekcji komentarzy poni\u017cej.<\/p>\n
Powi\u0105zane artyku\u0142y<\/h4>\n