Bootstrap Accordion with PHP script not working properly - php

I have written a php script which uses Bootstrap Accordion.
My Problem is as follows:-
Data is displayed correctly in the accordion for all records but when i click on respective accordion..none of them pop-open n close except the accordion of the very first record displayed i.e only the first accordion is working perfectly fine but for rest of the records, accordion displays correct data but does not pop-open n close at all.
Please help if anyone can
Here is the code which i have written
<div class="row">
<?php while ($row = mysql_fetch_assoc($sql_result)) { ?>
<div class="col-sm-6">
<div class="card" style="width: 25rem;">
<h3 class="card-header card-warning text-center"><?php echo $row['dlocation'] ?></h3>
<img class="card-img-top img-fluid" src="<?php echo $row['dimage'] ?>" alt="Card image cap">
<!--ACCORDION START-->
<div id="accordion" role="tablist" aria-multiselectable="true">
<div class="card">
<div class="card-header" role="tab" id="headingOne">
<h5 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Image Description
</a>
</h5>
</div>
<div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
<div class="card-block">
<?php echo $row['dimagedescription'] ?>
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingTwo">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Software Used
</a>
</h5>
</div>
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="card-block">
<p class="card-text"><?php echo $row['dsoftwareused'] ?></p>
</div>
</div>
</div>
</div>
<!--ACCORDION END-->
<div class="card-block ">
<div class="alert alert-danger" role="alert">
<p class="card-text"><?php echo $row['dimagedescription'] ?></p>
<p class="card-text"><?php echo $row['dsoftwareused'] ?></p>
</div>
<h4><span class="badge badge-default">Designer Information</span></h4>
<h5 class="card-title"><?php echo $row['dname'] ?></h5>
<h6 class="card-subtitle mb-2 text-muted"><?php echo ($row['dcity'])?></h6>
<h6 class="card-subtitle mb-2 text-muted"><?php echo ($row['dmobile'])?></h6>
<h6 class="card-subtitle mb-2 text-muted"><?php echo ($row['dwebsite'])?></h6>
<h6 class="card-subtitle mb-2 text-muted"><?php echo ($row['demail'])?></h6>
</div>
<div class="card-footer">
<small class="text-muted">Design ID:- <?php echo stripcslashes($row['did']) ?> Submitted on :-<?php echo stripcslashes($row['dsubmissiondate']) ?></small>
<br>
</div>
</div>
</div>
<?php } ?>
</div>

My Problem has been solved by assigning unique Accordion ID for each record in the PHP array generated . Thank You.

Related

How to dynamically create a card grid using Foreach in PHP Show 20 records per page

I have a huge list of clients in a table, I have changed the design to boostrabs grids, but now I have a problem and it is that all the contacts are shown in an endless page, it is very long
enter image description here
Php code
<?php if(count($customers)): foreach($customers as $ct): ?>
<div class="row">
<div class="col-xl-3 col-sm-6">
<div class="card">
<div class="card-body">
<div class="dropdown float-end">
<a class="text-muted dropdown-toggle font-size-16" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true"><i class="bx bx-dots-horizontal-rounded"></i></a>
<div class="dropdown-menu dropdown-menu-end"><a class="dropdown-item" href="#">Edit</a><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">Remove</a></div>
</div>
<div class="d-flex align-items-center">
<div><img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="" class="avatar-md rounded-circle img-thumbnail" /></div>
<div class="flex-1 ms-3">
<h5 class="font-size-16 mb-1"><?php echo $ct->first_name ?></h5>
<span class="badge badge-soft-success mb-0"><?php echo $ct->dni ?></span>
</div>
</div>
<div class="mt-3 pt-1">
<p class="text-muted mb-0"><i class="mdi mdi-phone font-size-15 align-middle pe-2 text-primary"></i><?php echo $ct->mobile ?></p>
<p class="text-muted mb-0 mt-2"><i class="mdi mdi-email font-size-15 align-middle pe-2 text-primary"></i> <?php echo $ct->gender ?></p>
<p class="text-muted mb-0 mt-2"><i class="mdi mdi-google-maps font-size-15 align-middle pe-2 text-primary"></i><?php echo $ct->company ?>/p>
</div>
<div class="d-flex gap-2 pt-4">
<button type="button" class="btn btn-soft-primary btn-sm w-50"><i class="bx bx-user me-1"></i> Profile</button>
<button type="button" class="btn btn-primary btn-sm w-50"><i class="bx bx-message-square-dots me-1"></i> Contact</button>
</div>
</div>
</div>
</div>
<?php endforeach; ?>
<?php else: ?>
<tr>
<td colspan="7" class="text-center">No existen Clientes, agregar un nuevo cliente.</td>
</tr>
<?php endif; ?>
</div>
</div>
</div>
</div>
I need 10 contacts to appear per page

Advanced custom fields pro repeater, working with bootstrap slider

Hi guys im using WP advanced custom fields pro repeater function, trying get my bootstrap slider to work with advanced custom fields.
here is my ACF set up
ACF setup WP side
and here is my bootsrap code with ACF integrated.
my code
<section class="pb-5">
<div class="container">
<div id="carousel_03" class="carousel slide" data-ride="carousel">
<div class="row">
<div class="col-lg-4">
<ol class="carousel-indicators tabs row">
<li class="col-lg-12 col-sm-6 mb-2 active">
<div data-target="#carousel_03" data-slide-to="0" role="button" class="carousel-indicator p-3">
<h4 class="mb-1">one</h4>
</div>
</li>
<li class="col-lg-12 col-sm-6 mb-2">
<div data-target="#carousel_03" data-slide-to="1" role="button" class="carousel-indicator p-3">
<h4 class="mb-1">two</h4>
</div>
</li>
<li class="col-lg-12 col-sm-6 mb-2">
<div data-target="#carousel_03" data-slide-to="2" role="button" class="carousel-indicator p-3">
<h4 class="mb-1">three</h4>
</div>
</li>
<li class="col-lg-12 col-sm-6 mb-2">
<div data-target="#carousel_03" data-slide-to="3" role="button" class="carousel-indicator p-3">
<?php
if( have_rows('slider') ):
while ( have_rows('slider') ) : the_row();
the_sub_field( 'title');
?>
<h4 class="mb-1"><?php the_sub_field($section . 'title') ?></h4>
<?php
endwhile;
endif;
?>
</div>
</li>
</ol>
</div>
<div class="col-lg-8 mb-3">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="some.svg" class="d-block w-100" alt="alt">
</div>
<div class="carousel-item">
<img src="some.svg" class="d-block w-100" alt="alt">
</div>
<div class="carousel-item">
<img src="some.svg" class="d-block w-100" alt="alt">
</div>
<div class="carousel-item">
<?php
if( have_rows('slider') ):
while ( have_rows('slider') ) : the_row();
the_sub_field( 'image');
?>
<img class="img-fluid"
src="<?php the_sub_field($section . 'image') ?>"
alt="<?php the_sub_field($section . 'alt') ?>">
<?php
endwhile;
endif;
?>
</div>
</div>
<a class="carousel-control-prev" href="#carousel_03" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only"></span>
</a>
<a class="carousel-control-next" href="#carousel_03" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only"></span>
</a>
</div>
</div>
</div>
</div>
</section>
My aim
for less code and to have ACF to pull all images for the slider in the correct order.
My problem
as I currently do not have my images in a array they all display where I cal my sub field, whats the best solution to get this working correctly ?
You are better off using get_field() (https://www.advancedcustomfields.com/resources/get_field/) to retrieve the repeater values in this instance, as this returns an associative array containing all sub-field values.
You can then iterate that array to output the HTML you need for the Bootstrap carousel.
Also worth noting that the image values returned will also contain a key sizes with URLs to the images of all of your themes thumbnail sizes in it, if you want to output a particular image size in the carousel.
Note: I haven't actually tested this with Bootstrap, but it should work.
<?php
// get the ACF values using get_field()
$sliderImages = get_field('slider');
?>
<section class="pb-5">
<div class="container">
<div id="carousel_03" class="carousel slide" data-ride="carousel">
<div class="row">
<div class="col-lg-4">
<ol class="carousel-indicators tabs row">
<!-- Iterate images to output indicators -->
<?php foreach ($sliderImages as $imgNumber => $image) : ?>
<li class="col-lg-12 col-sm-6 mb-2<?php if ($imgNumber === 0) : ?> active<?php endif ?>">
<div data-target="#carousel_<?= $imgNumber ?>" data-slide-to="<?= $imgNumber ?>" role="button" class="carousel-indicator p-3">
<h4 class="mb-1"><?= $imgNumber + 1 ?></h4>
</div>
</li>
<?php endforeach ?>
</ol>
</div>
<div class="col-lg-8 mb-3">
<div class="carousel-inner">
<!-- Iterate images again to output carousel items -->
<?php foreach ($sliderImages as $imgNumber => $image) : ?>
<div class="carousel-item<?php if ($imgNumber === 0) : ?> active<?php endif ?>">
<img src="<?= $image['image']['url'] ?>" alt="<?= $image['image']['alt'] ?>">
</div>
<?php endforeach ?>
</div>
<a class="carousel-control-prev" href="#carousel_03" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only"></span>
</a>
<a class="carousel-control-next" href="#carousel_03" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only"></span>
</a>
</div>
</div>
</div>
</div>
</section>

Bootstrap 2 cards in a row using PHP and mysql

I am trying to get data from a database and in the frontend I am showing data in cards in 1 row and 2 columns using bootstrap and PHP. But, I am getting the data for the first row but the remaining are cards coming one below one
<?php
$con = mysqli_connect('localhost', 'root', '', 'applicants');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
$qry = "select * from feedback";
$result = mysqli_query($con, $qry);
?>
<div class="main-content">
<div class="main-content-inner">
<div class="row">
<div class="col-6 mt-5">
<?php $i=0;
while ($row = $result->fetch_assoc()) {
$i++;?>
<?php if ($i %2 == 0){?>
<!-- <div class="row"> -->
</div>
<div class="col-6 mt-5"><?php } ?>
<div class="card">
<div class="card-body">
<h5 class="card-title"> <?php echo $row['username']?></h5>
<h6 class="card-subtitle mb-2 text-muted"><?php echo $row['email'] ?></h6>
<ul>
<li>
<div class="left alert alert-success" role="alert">
<h6><?php echo $row['subject'] ?></h6>
<p class="card-text"><?php echo $row['message'] ?></p>
</div>
</li>
</ul>
</div>
</div>
<?php if ($i %2 == 0){?>
</div>
<!-- </div> --><?php } ?>
<!-- </div> -->
</div>
<?php } ?>
</div>
</div>
Your tags for the row and cols seem to be off. Please compare them against this code that generates two rows:
<div class="main-content-inner">
<div class="row">
<div class="col-6 mt-5">
<div class="card">
<div class="card-body">
<h5 class="card-title">Name</h5>
<h6 class="card-subtitle mb-2 text-muted">Email</h6>
<ul>
<li>
<div class="left alert alert-success" role="alert">
<h6>Subject</h6>
<p class="card-text">Message</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-6 mt-5">
<div class="card">
<div class="card-body">
<h5 class="card-title">Name</h5>
<h6 class="card-subtitle mb-2 text-muted">Email</h6>
<ul>
<li>
<div class="left alert alert-success" role="alert">
<h6>Subject</h6>
<p class="card-text">Message</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6 mt-5">
<div class="card">
<div class="card-body">
<h5 class="card-title">Name</h5>
<h6 class="card-subtitle mb-2 text-muted">Email</h6>
<ul>
<li>
<div class="left alert alert-success" role="alert">
<h6>Subject</h6>
<p class="card-text">Message</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-6 mt-5">
<div class="card">
<div class="card-body">
<h5 class="card-title">Name</h5>
<h6 class="card-subtitle mb-2 text-muted">Email</h6>
<ul>
<li>
<div class="left alert alert-success" role="alert">
<h6>Subject</h6>
<p class="card-text">Message</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>

Expand/Collapse works only for the first item

I'm trying to create an accordion/panel with expand/collapse. All the data from model are printed correctly, the only issue I get is that collapse/expand work for the first item. How can I implement it for each item?
my code:
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<?php
$html_ret = '
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls=".collapse">
<b>%s</b> (%s)
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
%s
</div>
</div>
</div>';
foreach($arr_table_content as $row)
{
echo sprintf($html_ret, $row['TrainingName'],$row['TrType'],$row['Tr_description']);
}
?>
</div>
Thank you for any suggestions
because the rest panel have the same ID as the first panel #collapseOne, try to concatinate an increment number with the id, ex:
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<?php
$html_ret = '
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne%u" aria-expanded="false" aria-controls=".collapse">
<b>%s</b> (%s)
</a>
</h4>
</div>
<div id="collapseOne%u" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
%s
</div>
</div>
</div>';
$counter = 1;
foreach($arr_table_content as $row)
{
echo sprintf($html_ret,$counter,$row['TrainingName'],$row['TrType'],$counter,$row['Tr_description']);
$counter++;
}
?>
</div>
I believe your problem comes from the fact that all your panel-headings have the same id="headingOne". Try setting a dynamic ID in your foreach loop (same thing for your panel-collapse)

Page load in div with jquery or php

I created an accordion and div. The accordion is working. I want to put php files in div. When I clicked a list link I want to bring page content on the div. How should I track a way? İs there another way?. You can see https://jsfiddle.net/y8fuwtg6/1/
<div style="width:200px; float:left; margin:20px 20px;">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
List1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<a href="index1.php">
List1
</a>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
List2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<a href="index2.php">
List2
</a>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
List3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<a href="index3.php">
List3
</a>
</div>
</div>
</div>
</div>
<div id="test" style="width: 150px; min-height:200px; background-color: #cdcdcd; margin:20px 20px; height: auto; display:inline-block;">
</div>
I solved my problem. I just used a script. İt can solve with ajax. Maybe this document may help someone.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css" >
<link rel="stylesheet" href="css/bootstrap-theme.min.css" >
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div style="width:400px; float:left;">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
List1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<a href="homepage.php">
List1
</a>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
List2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<a href="computer.php">
List2
</a>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
List3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<a href="electronic.php">
List3
</a>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFour">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
List4
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="panel-body">
<a href="phone.php">
List4
</a>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFive">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
List5
</a>
</h4>
</div>
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
<div class="panel-body">
<a href="books.php">
List5
</a>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingSix">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
List6
</a>
</h4>
</div>
<div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix">
<div class="panel-body">
<a href="services.php">
List6
</a>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingSeven">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSeven" aria-expanded="false" aria-controls="collapseSeven">
List7
</a>
</h4>
</div>
<div id="collapseSeven" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSeven">
<div class="panel-body">
<a href="contact.php">
List7
</a>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingEight">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseEight" aria-expanded="false" aria-controls="collapseEight">
List8
</a>
</h4>
</div>
<div id="collapseEight" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingEight">
<div class="panel-body">
<a href="about.php">
List8
</a>
</div>
</div>
</div>
</div>
</div>
<div id="test" style="width: 600px; background-color: #cdcdcd; margin-left: 20px; height: auto; display:inline-block;">
</div>
<script>
$(".panel-body a").click(function(){
var x=$(this).attr("href");
$("#test").load(x);
return false;
});
</script>
</body>
</html>

Categories