how do i make each query collapse php
Question
I have this PHP and jQuery code which works in coalition with my database. This is the only page. The code runs and gives me a row of data, but when I click the collapse button it only works for the first row. Even if I click any other row, that action affects only the first row and all the other rows collapse, which is useless.
How do I make it so that all rows work? It's like the button is doubled and only works for the first row.
<script>
$(function() {
$('div#dl_box').on('show', function(e) {
console.log('show', $(e.target).attr('class'), $(e.target).attr('id'));
$(e.target).prev('.accordion-heading').addClass('active');
});
$('div#dl_box').on('hidden', function(e) {
console.log('hidden', $(e.target).attr('class'), $(e.target).attr('id'));
$(e.target).prev('.accordion-heading').removeClass('active');
});
});
$(document).ready(function() {});
</script>
<?php
$connection = ($GLOBALS["___mysqli_ston"] = mysqli_connect('localhost', 'root', ''));
((bool)mysqli_query($GLOBALS["___mysqli_ston"], "USE " . 'db'));
$query = "SELECT * FROM AS_Questions";
$result = mysqli_query($GLOBALS["___mysqli_ston"], $query);
if (!$result) {
printf("Errormessage: %s\n", $mysqli->error);
}
echo "<table>";
while($row = mysqli_fetch_array($result)){
echo "
<section class='section swatch-white editable-swatch'>
<div class='container'>
<div class='panel panel-primary panel-ws-download'>
<div class='panel-heading'>
<a href='#group_accordion_stable' class='accordion-toggle collapsed' data-parent='#accordion_download' data-toggle='collapse'>
" . $row['Question'] . "
</a>
</div>
<div id='group_accordion_stable' class='panel-collapse collapse' style='height: 0px;'>
<div class='panel-body'>
<!-- first -->
<ul class='list-unstyled list-ws-download'>
<li>" . $row['Answer'] . "</li>
</ul>
</div>
</div>
</div>
</div>
</section>
"; //$row['index'] the index here is a field name
}
echo "</table>"; //Close the table in HTML
((is_null($___mysqli_res = mysqli_close($GLOBALS["___mysqli_ston"]))) ? false : $___mysqli_res); //Make sure to close out the database connection
?>
3 answers
solution1
1 ACCPTED 2016-02-03 15:00:26
sample for u.
<!DOCTYPE html>
<html>
<head>
<style>
.default {
display: block;
background: pink;
height: 3em;
width: 10em;
transition: height 5s, background 3s; /*collaspe speed*/
margin-top: 1em;
}
.expanded {
height: 10em;
background: yellow;
transition: height 1s, background 2s; /*expand speed*/
/*display: none;*/
}
</style>
</head>
<body>
<?php
$i = 0;
while ($i <5) {
$i++;
echo '<div class="default" id="ChangeThisId_'.$i.'">';
echo '
<a href="#"
name="ChangeThisId_'.$i.'"
onclick="changeHeight(this.name)">
Click me '. $i .'
</a>
';
echo '</div>';
}
// above return in html.
// <div class="default" id="ChangeThisId_1">
// <a href="#" name="ChangeThisId_1">CLick me 1</a>
// </div>
// <div class="default" id="ChangeThisId_2">
// <a href="#" name="ChangeThisId_2">Click me 2</a>
// and so on till ...5
?>
</body>
<script>
function changeHeight(x){
//alert(x); //x return name of clicked <a> tag.
document.getElementById(x).classList.toggle("expanded");
}
</script>
</html>
This is using css, html(+php to create row), and native javascript. The idea is to assign an unique for each row. others are quite self explanatory, hope this helps.
solution2
0 2016-02-03 20:57:32
to anyone coming in here in search of sql data display with accordian collapse. here Qid is my tables auto incremented value. AS_Questions is my table name. db is my database name.
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-theme.min.css">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<?php
$connection = ($GLOBALS["___mysqli_ston"] = mysqli_connect('localhost', 'root', 'password')); //The Blank string is the password
((bool)mysqli_query($GLOBALS["___mysqli_ston"], "USE " . 'db'));
$query = "SELECT * FROM AS_Questions";
$result = mysqli_query($GLOBALS["___mysqli_ston"], $query);
if (!$result) {
printf("Errormessage: %s\n", $mysqli->error);
}
echo "<table>";
while($row = mysqli_fetch_array($result)){
echo "
<div class='panel-group' id='accordion'> <!-- accordion 1 -->
<div class='panel panel-primary'>
<div class='panel-heading'> <!-- panel-heading -->
<h4 class='panel-title'> <!-- title 1 -->
<a data-toggle='collapse' data-parent='#accordion' href='#accordion" . $row['Qid'] . "'>
" . $row['Question'] . " <i class='fa fa-eye' style='float: right;'></i>
</a>
</h4>
</div>
<!-- panel body -->
<div id='accordion" . $row['Qid'] . "' class='panel-collapse collapse'>
<div class='panel-body'>
" . $row['Answer'] . "
</div>
</div>
</div>
"; //$row['index'] the index here is a field name
}
echo "</table>"; //Close the table in HTML
((is_null($___mysqli_res = mysqli_close($GLOBALS["___mysqli_ston"]))) ? false : $___mysqli_res); //Make sure to close out the database connection
?>
solution3
0 2021-11-18 15:35:37
<?php
$con = mysqli_connect("localhost", "root", "", "student_data")
?>
<!doctype html>
<html lang="en">
<head>
<title>Colapse</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<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="container">
<div class="row">
<?php
$count = 0;
$fetch = mysqli_query($con, "SELECT * FROM student_cs");
if (mysqli_num_rows($fetch) > 0) {
while ($record = mysqli_fetch_assoc($fetch)) {
$count++;
?>
<div class="col-4">
<p>
<button <?php $count; ?> class="btn btn-primary mt-3" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
<h5> <?php echo $record['s_name']; ?> </h5>
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
<h3> <?php echo $record['id']; ?> </h3>
<h4> <?php echo $record['s_name']; ?> </h4>
<h5> <?php echo $record['rollnumber']; ?> </h5>
<h6> <?php echo $record['class']; ?> </h6>
</div>
</div>
</div>
<?php }
}
?>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How do I make bootstrap Collapse sections also submit a form?
How do I make my accordion collapse when another is open?
How do I make this expand/collapse FAQ list to work?
How do I make {{#each}} work with these templates?
How do I make each each element in array another array?
How to make draggable elements fit to div and not collapse on each other
How do I make CSS accordions collapse when different tab is selected?
How do I make it so that my search bar does not collapse when it's on focus?
How do I make bootstrap tree view collapse from parent to child?
How do I collapse code for a case in a switch?
Related Tags