How to set a panel as active by default on the first load, The code below shows as the dynamic page show help me to solve the issue:
<div class="panel-group collapse-style-1" id="accordion">
<?php foreach ($careers['result'] as $resclients){?>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne<?php echo $conn->stripval($resclients['career_id']);?>" aria-expanded="true" class="collapsed">
<i class="fa fa-life-ring pr-10"></i><?php echo $conn->stripval($resclients['job_title']);?> - <?php echo $conn->stripval($resclients['experience']);?>
</a>
</h4>
</div><br>
<div id="collapseOne<?php echo $conn->stripval($resclients['career_id']);?>" class="panel-collapse collapse" aria-expanded="true" style="height: 0px;">
<div class="panel-body">
<?php echo $conn->stripval($resclients['job_desc']);?>
</div>
</div>
</div>
<?php } ?>
</div>
try this,
<div class="panel-group collapse-style-1" id="accordion">
<?php $i=1; foreach ($careers['result'] as $resclients){?>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne<?php echo $conn->stripval($resclients['career_id']);?>" aria-expanded="<?=($i==1)?'true':'false';?>" class="<?=($i==1)?'collapsed':'';?>">
<i class="fa fa-life-ring pr-10"></i><?php echo $conn->stripval($resclients['job_title']);?> - <?php echo $conn->stripval($resclients['experience']);?>
</a>
</h4>
</div><br>
<div id="collapseOne<?php echo $conn->stripval($resclients['career_id']);?>" class="panel-collapse collapse <?=($i==1)?'in':'';?>" aria-expanded="<?=($i==1)?'true':'false';?>" style="height: 0px;">
<div class="panel-body">
<?php echo $conn->stripval($resclients['job_desc']);?>
</div>
</div>
</div>
<?php $i++; } ?>
</div>
I tried myself now it is working fine thank you for giving a idea to solve the problem
<div class="panel-group collapse-style-1" id="accordion">
<?php $c=0; foreach ($careers['result'] as $resclients){ $c++;?>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne<?php echo $conn->stripval($resclients['career_id']);?>" aria-expanded="<?php if($c==1){ echo "true"; }else{ echo "false"; } ?>" class="<?php if($c==1){ echo ""; }else{ echo "collapsed"; } ?>">
<i class="fa fa-life-ring pr-10"></i><?php echo $conn->stripval($resclients['job_title']);?> - <?php echo $conn->stripval($resclients['experience']);?>
</a>
</h4>
</div><br>
<div id="collapseOne<?php echo $conn->stripval($resclients['career_id']);?>" class="panel-collapse collapse <?php if($c==1){ echo "in"; }else{ echo ""; } ?>" aria-expanded="<?php if($c==1){ echo "true"; }else{ echo "false"; } ?>" style="<?php if($c==1){ echo "true"; }else{ echo "height: 0px;"; } ?>">
<div class="panel-body">
<?php echo $conn->stripval($resclients['job_desc']);?>
</div>
</div>
</div>
<?php } ?>
</div>
Related
Hi I'm trying to do foreach loop on a view but it's not showing. I've checked the database and there's data. I've checked the QueryBuilder on the model and run the query on phpmyadmin and its working. Do you guys know what happened?
view:
<div class="content-wrapper">
<section class="content">
<div class="row">
<?php
foreach ($node as $d) {
?>
<div class="col-lg-6 col-md-6 col-xs-6">
<div class="box box-device box-solid" id="device_<?php echo $d['id_device']; ?>">
<div class="box-header">
<div class="row">
<div class="col-sm-3 col-xs-3">
<button aria-pressed="false" data-device="<?php echo $d['id_device']; ?>" class="btn btn-onoff btn-sm btn-toggle<?php echo ($d['status_device'] == 1) ? ' active': ''; ?>" data-toggle="button" type="button">
<div class="handle"></div>
</button>
</div>
<div class="col-sm-9 col-xs-9">
<h3 class="box-title<?php echo ($d['rule'] == 0) ? ' notactive': ''; ?>"><?php echo $d['nama_device']; ?></h3>
</div>
</div>
</div>
<div class="box-body text-center" onclick="window.location.href = '<?php echo site_url('Setting/rule/' . $d['id_device']); ?>'">
<img alt="<?php echo $d['nama_device']; ?>" src="<?php echo base_url('uploads/device/' . $d['foto']); ?>" />
<h4><?php echo $d['nama_device']; ?></h4>
<p><?php echo $d['id_device']; ?></p>
</div>
<div class="box-footer">
<a class="btn btn-default btn-block btn-lg btn-detail" href="<?php echo site_url('Setting/rule/' . $d['id_device']); ?>">View Rule</a>
</div>
</div>
</div>
<?php
}
?>
</div>
</section>
<?php $this->load->view('components/version'); ?>
</div>
Controller:
public function rulenode() {
$this->data['sub_title'] = 'Setting - Rule';
$this->load->model('Mrule');
$this->data['node'] = $this->Mrule->device();
$this->load->view('setting/rulenode', $this->data);
}
Model:
public function device() {
$this->db->select('id_device, nama_device, foto, status_device');
$this->db->from('tb_device');
$this->db->join('arduino_rule', 'id_device = id_node');
return $this->db->get()->result_array();
// var_dump($this->db->last_query());
}
<?php
$node = $this->db->get('table_name');
foreach ($node as $d) {
?>
This question already has answers here:
Bootstrap 3 - style a site with 3 columns per row on medium & large devices and two columns on small
(2 answers)
Closed 2 years ago.
I am trying to display cards but in this way, all three cards are showing the same information whereas I want every card to show specific entries in the database like 1st one the first entry and second one the second then the third one the third then change line and restart to display 4,5,6 entry and so on. Can anyone please help?
include_once('db/connection.php');
$query="select * from news ORDER BY id DESC";
$result=mysqli_query($conn,$query);
?>
<?php
while($rows=mysqli_fetch_array($result))
{
$cc =$rows['category2'];
?>
<div>
<div class="container">
<div class="cust_bloglistintro">
<div class="row">
<div class="col-md-6 col-lg-4 cust_blogteaser" style="padding-bottom: 20px;margin-bottom: 32px;height: 750px;">
<div class="card" data-aos="fade-up" style="height: 700px;"><img class="card-img-top w-100 d-block" src="images/<?php echo $rows['thumbnail'];?>">
<div class="card-body">
<h4 class="card-title"><?php echo $rows['title']; ?></h4><span style="font-family: 'Open Sans', sans-serif;font-size: 12px;margin-bottom: 5px;"><?php echo $rows['3']; ?></span>
<p class="card-text"><?php echo substr($rows['2'],0,400); ?></p><?php if($cc=="bigbites"){?><a class="card-link" href="bigbites.php?ii=<?php echo $rows['0']?>>" target="_top">Read more...</a><?php } else{?><a class="card-link" href="<?php echo $rows['7']; ?>" target="_top">Read more...</a><?php }?>
</div>
<div class="text-center" style="bottom: 10px;"><i class="fab fa-whatsapp-square" id="whatsapp"></i><i class="fab fa-facebook-square" id="facebook"></i><i class="fab fa-linkedin" id="linkedin"></i><a href="extra.php?ii=<?php echo $rows['0']?>"><i class="fas fa-share" id="share"></i></div>
</div>
</div>
<div class="col-md-6 col-lg-4 cust_blogteaser" style="padding-bottom: 20px;margin-bottom: 32px;height: 750px;">
<div class="card" data-aos="fade-up" style="height: 700px;"><img class="card-img-top w-100 d-block" src="images/<?php echo $rows['thumbnail'];?>">
<div class="card-body">
<h4 class="card-title"><?php echo $rows['title']; ?></h4><span style="font-family: 'Open Sans', sans-serif;font-size: 12px;margin-bottom: 5px;"><?php echo $rows['3']; ?></span>
<p class="card-text"><?php echo substr($rows['2'],0,400); ?></p><?php if($cc=="bigbites"){?><a class="card-link" href="bigbites.php?ii=<?php echo $rows['0']?>>" target="_top">Read more...</a><?php } else{?><a class="card-link" href="<?php echo $rows['7']; ?>" target="_top">Read more...</a><?php }?>
</div>
<div class="text-center" style="bottom: 10px;"><i class="fab fa-whatsapp-square" id="whatsapp"></i><i class="fab fa-facebook-square" id="facebook"></i><i class="fab fa-linkedin" id="linkedin"></i><a href="extra.php?ii=<?php echo $rows['0']?>"><i class="fas fa-share" id="share"></i></div>
</div>
</div>
<div class="col-md-6 col-lg-4 cust_blogteaser" style="padding-bottom: 20px;margin-bottom: 32px;height: 750px;">
<div class="card" data-aos="fade-up" style="height: 700px;"><img class="card-img-top w-100 d-block" src="images/<?php echo $rows['5'];?>">
<div class="card-body">
<h4 class="card-title"><?php echo $rows['1']; ?></h4><span style="font-family: 'Open Sans', sans-serif;font-size: 12px;margin-bottom: 5px;"><?php echo $rows['3']; ?></span>
<p class="card-text"><?php echo substr($rows['2'],0,400); ?></p><?php if($cc=="bigbites"){?><a class="card-link" href="bigbites.php?ii=<?php echo $rows['0']?>>" target="_top">Read more...</a><?php } else{?><a class="card-link" href="<?php echo $rows['7']; ?>" target="_top">Read more...</a><?php }?>
</div>
<div class="text-center" style="bottom: 10px;"><i class="fab fa-whatsapp-square" id="whatsapp"></i><i class="fab fa-facebook-square" id="facebook"></i><i class="fab fa-linkedin" id="linkedin"></i><a href="extra.php?ii=<?php echo $rows['0']?>"><i class="fas fa-share" id="share"></i></div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php
}
?>
Many ways of doing this, but I've used this approach recently...
<?php
$resultCount=0;
if(mysqli_num_rows($result) >0)
{
?>
<div>
<div class="container">
<div class="cust_bloglistintro">
<div class="row">
<?php
while($rows=mysqli_fetch_array($result))
{
$cc =$rows['category2'];
?>
<div class="col-md-6 col-lg-4 cust_blogteaser" style="padding-bottom: 20px;margin-bottom: 32px;height: 750px;">
<div class="card" data-aos="fade-up" style="height: 700px;"><img class="card-img-top w-100 d-block" src="images/<?php echo $rows['thumbnail'];?>">
<div class="card-body">
<h4 class="card-title"><?php echo $rows['title']; ?></h4><span style="font-family: 'Open Sans', sans-serif;font-size: 12px;margin-bottom: 5px;"><?php echo $rows['3']; ?></span>
<p class="card-text"><?php echo substr($rows['2'],0,400); ?></p><?php if($cc=="bigbites"){?><a class="card-link" href="bigbites.php?ii=<?php echo $rows['0']?>>" target="_top">Read more...</a><?php } else{?><a class="card-link" href="<?php echo $rows['7']; ?>" target="_top">Read more...</a><?php }?>
</div>
<div class="text-center" style="bottom: 10px;"><i class="fab fa-whatsapp-square" id="whatsapp"></i><i class="fab fa-facebook-square" id="facebook"></i><i class="fab fa-linkedin" id="linkedin"></i><a href="extra.php?ii=<?php echo $rows['0']?>"><i class="fas fa-share" id="share"></i></div>
</div>
</div>
<?php
$resultCount++;
if ($resultCount % 3 == 0) // start new row
{
?>
</div>
<div class="row">
<?php
}
}
if ($resultCount % 3 != 0) // if we didn't just end a row in the loop, end it now
{
?>
</div>
<?php
}
// now close divs
?>
</div>
</div>
</div>
<?php
} // end of if num_rows>0
?>
Here is the situation. I have an accordion, setup and the problem is that multiple accordions are opening and closing the same time.
Here is the code:
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<?php $x = 0; ?>
<?php foreach ($testFaqs as $faqs) { ?>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading-<?php echo $x; ?>">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-<?php echo $x; ?>" aria-expanded="true" aria-controls="collapse-<?php echo $x; ?>">
<?php echo $faqs['name']; ?>
</a>
</h4>
</div>
<div id="collapse-<?php echo $x; ?>" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading-<?php echo $x; ?>">
<div class="panel-body">
<?php if ($faqs['videoUrl'] != '' ) { ?>
<iframe align="center" class="youtube" src="https://www.youtube.com/embed/<?php echo $faqs['videoUrl']?>"> </iframe>
<?php } ?>
<?php echo htmlspecialchars_decode(($faqs['answer'])); ?>
</div>
</div>
</div>
<?php $x++; } ?>
</div>
Any help would be appreciated.
Thank you,
Kevin Davis
You can use latest Bootstrap 4 Accordion. More about it here https://getbootstrap.com/docs/4.3/components/collapse/#accordion-example
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="heading-1">
<h2>
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse-1" aria-expanded="true" aria-controls="collapse-1">
111
</button>
</h2>
</div>
<div id="collapse-1" class="collapse show" aria-labelledby="heading-1" data-parent="#accordionExample">
<div class="card-body">
111
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading-2">
<h2>
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapse-2" aria-expanded="false" aria-controls="collapse-2">
222
</button>
</h2>
</div>
<div id="collapse-2" class="collapse" aria-labelledby="heading-2" data-parent="#accordionExample">
<div class="card-body">
222
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading-3">
<h2>
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapse-3" aria-expanded="false" aria-controls="collapse-3">
333
</button>
</h2>
</div>
<div id="collapse-3" class="collapse" aria-labelledby="heading-3" data-parent="#accordionExample">
<div class="card-body">
333
</div>
</div>
</div>
</div>
So your code will be
<div class="accordion" id="accordionExample">
<?php $x = 0; ?>
<?php foreach ($testFaqs as $faqs) { ?>
<div class="card">
<div class="card-header" id="heading-<?php echo $x; ?>">
<h2>
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse-<?php echo $x; ?>" aria-expanded="true" aria-controls="collapse-<?php echo $x; ?>">
<?php echo $faqs['name']; ?>
</button>
</h2>
</div>
<div id="collapse-<?php echo $x; ?>" class="collapse<?php if ($x == 0) { ?> show<?php } ?>" aria-labelledby="heading-<?php echo $x; ?>" data-parent="#accordionExample">
<div class="card-body">
<?php if ($faqs['videoUrl'] != '' ) { ?>
<iframe align="center" class="youtube" src="https://www.youtube.com/embed/<?php echo $faqs['videoUrl']?>"></iframe>
<?php } ?>
<?php echo htmlspecialchars_decode(($faqs['answer'])); ?>
</div>
</div>
</div>
<?php $x++; } ?>
</div>
Added this class="collapse<?php if ($x == 0) { ?> show<?php } ?>" for the first box to be opened.
If you have more then one accordion on one page - don't forget to change id="accordionExample" and data-parent="#accordionExample", maybe by adding them an increment for counting accordions.
As title implies this code shows all the questions that i add to the loop/accordion but no matter which one i click on it only opens and closes the first and i cant tell why.
<div class="container">
<div class="row">
<div id="accordion" role="tablist" aria-multiselectable="false" class="py-4">
<?php
$counter = 0;
$loop = get_field('questions');
foreach($loop as $row) : ?>
<div class="card card-no-border card-no-shadow">
<div class="card-header" role="tab" id="heading<?php echo $counter++ ?>">
<h5 class="mb-0">
<a class="body2 uppercase bold" data-toggle="collapse" data-parent="#accordion"
href="#collapse<?php the_ID(); ?>"
aria-expanded="<?php echo $first; ?>" aria-controls="collapse<?php the_ID(); ?>">
<i class="fa fa-chevron-right" aria-hidden="true"></i>
<span style='padding-right: 20px;'></span>
<?php echo $row['question_title']?>
</a>
</h5>
</div>
<div id="collapse<?php the_ID(); ?>" class="collapse<?php if ($first) {
echo "show";
} ?>" role="tabpanel"
aria-labelledby="heading<?php the_ID(); ?>">
<div class="card-block body2">
<?php echo $row['answer'] ?>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
I would say you need to look at your id's
href="#collapse<?php the_ID(); ?>"
id="collapse<?php the_ID(); ?>"
the_id function is outputting the current page id not the id of each loop/question
You could use your counter instead
id="collapse<?php echo $counter; ?>"
I have this following snippet:
<?php
if($people->num_rows >= 1) {
while($person = $people->fetch_object()) {
echo '
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="card card-user">
<div class="content">
<div class="author">
<a href="'.$system->getDomain()?>/user/<?=$person->id.'">
<img class="avatar" src="'.$system->getProfilePicture($person).'">
<h4 class="title">'.$system->getFirstName($person->full_name).', '.$person->age.'</h4>
</a>
</div>
<p class="text-center text-muted">
';
echo $person->city.$system->ifComma($person->city); echo ' '.$person->country.'
</p>
</div>
</div>
</div>
';
}
} else {
?>
however next to the actual age (after the closing H4 tag) I'd like to add a further function which shows the current online status of the user.
The code for this would be as follows:
<?php if($system->isOnline($profile->last_active)) { echo '<i class="online-status online"></i>'; } else { echo '<i class="online-status offline"></i>'; } ?>
What is the best way to combine this snippet (online status) with the statement above?
Some expert help would be greatly appreciated
Separate your HTML and PHP code and do it like the below. Your requirement is done using a single line ternary operator.
<?php
if($people->num_rows >= 1) {
while($person = $people->fetch_object()) { ?>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="card card-user">
<div class="content">
<div class="author">
<a href="<?php echo $system->getDomain().'/user/'.$person->id;?>">
<img class="avatar" src="<?php echo $system->getProfilePicture($person);?>">
<h4 class="title"><?php echo $system->getFirstName($person->full_name).', '.$person->age;?></h4>
<?php echo ($system->isOnline($profile->last_active)) ? '<i class="online-status online"></i>' : '<i class="online-status offline"></i>'; ?>
</a>
</div>
<p class="text-center text-muted">
<?php echo $person->city.$system->ifComma($person->city); echo ' '.$person->country;?>
</p>
</div>
</div>
</div>
<?php
}
}
?>