If you want to make accordion by using large amount of dynamic data then in this post we are going to learn how to use Bootstrap Collapse with php script. By Bootstrap Collapse we will create accordion from dynamic data get from database and display on web page. By using Bootstrap Collapse we can display large amount of data on web page. We can hide content and only visible after we have click on that content. So by using Bootstrap Collapse we have create accordion and for see particular content by just click on title of that particular content. Here we will use display post title and post description and by using Bootstrap Collapse we will hide post description and only display post title. For seeing post description we have to click on post title then after we can see the post description of that post. So this way we can load large amount of content on single page by using Bootstrap Collapse. So this way we can load large amount of content on single web page in very less amount of space. In this post we have use bootstrap collapse and panels and by using both features we have make simple accordion. For making according first we have fetch data from table and then after we have print that data under panels and collapse class element. This way we have make accordion by using bootstrap collapse and panel class with php script.
Source Code
index.php
<?php
$connect = mysqli_connect("localhost", "root", "", "testing");
$query = "SELECT * FROM tbl_posts ORDER BY post_title ASC";
$result = mysqli_query($connect, $query);
?>
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | Make accordion by using Bootstrap Collapse and Panels with PHP Script</title>
<script src="jquery.js"></script>
<link rel="stylesheet" href="bootstrap.css" />
<script src="bootstrap.js"></script>
</head>
<body>
<br />
<div class="container" style="width:700px;">
<h3 align="center">Make accordion by using Bootstrap Collapse and Panels with PHP Script</h3><br />
<br />
<div class="panel-group" id="posts">
<?php
while($row = mysqli_fetch_array($result))
{
?>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#<?php echo $row["post_id"]; ?>" data-toggle="collapse" data-parent="#posts"><?php echo $row["post_title"]; ?></a>
</h4>
</div>
<div id="<?php echo $row["post_id"]; ?>" class="panel-collapse collapse">
<div class="panel-body">
<?php echo $row["post_desc"]; ?>
</div>
</div>
</div>
<?php
}
?>
</div>
</div>
<br />
</body>
</html>
tbl_posts
--
-- Table structure for table `tbl_posts`
--
CREATE TABLE IF NOT EXISTS `tbl_posts` (
`post_id` int(11) NOT NULL AUTO_INCREMENT,
`post_title` varchar(150) NOT NULL,
`post_desc` text NOT NULL,
PRIMARY KEY (`post_id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
Thanks verything from is good and 100% working and helpful
ReplyDeleteplease describe those category which has no description and link on page from other pages
ReplyDeleteits working thank you very much great
ReplyDeletehi can you attach a script please, i added the script jquery.js, bootstrap.js, bootsrap.css once i click the title it shows the content and it will hide quickly any solution for that ?
ReplyDelete