I want to build a collapse list and that list of data is from my database. That's why i used foreach($mother->result() as $row). Each collapse data shown on the browser has its own sub list again which have Panel Body and Panel Footer. What i got from these code on the browser was when i clicked other collapse data buttons instead of first button, it also showed me the first sub list of first collapse data button.
<div class="container">
<h2>Collapsible Panel</h2>
<p>Click on the collapsible panel to open and close it.</p>
<div class="panel-group">
<div class="panel panel-default">
<?php
$mother = $this->db->query("SELECT Description,ChildNode from mrpreport.report where MotherNode='MAIN'");
foreach($mother->result() as $row) {
?>
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1"><?php echo $row->Description?></a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
<div class="panel-footer">Panel Footer</div>
</div>
<?php } ?>
</div>
</div>
</div>
<a data-toggle="collapse" href="#collapse1"><?php echo $row->Description?></a>
You can see your href point to id collapse1, instead of that, you should set $i = 0 outside, then echo $i++; inside link element.
I hope it can help you.
Related
Help please!
I'm creating a FAQs webpage where theres approx 50 questions. Therefore, I'm using collapsible divs so that the page isn't too long. Below is the code I've used so far.
I'm wondering if its possible to have a hyperlink (e.g. /#question20) where I can jump to a particular div which is automatically expanded by clicking on the hyperlink?
Also, what would be the best way of creating expand all / collapse all buttons?
Thanks in advance!
<div class="panel-group" style="width: 70%; float: right; min-width: 300px;">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><strong>Question 1</strong></h3>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">Answer 1</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><strong>Question 2</strong></h3>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">Answer 2</div>
</div>
</div>
With only html you can use <details> and <summary> tag
If you want use javascript, you should create a tag and add a load event listener to it.
in the function associated for that listener you can toggle a class called hidden or change directly the style, for example we change the style with a new class called hidden to the divs you can expand and hide:
change your html to add a new class to the hidden div:
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><strong>Question 1</strong></h3>
</div>
<div id="collapse1" class="panel-collapse collapse hidden">
<div class="panel-body">Answer 1</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><strong>Question 2</strong></h3>
</div>
<div id="collapse2" class="panel-collapse collapse hidden">
<div class="panel-body">Answer 2</div>
</div>
</div>
add a new css rule
.hidden {
display: none;
}
and finally the script:
<script>
document.addEventListener('DOMContentLoaded',function() {
var expandLinks = document.querySelectorAll('.panel-heading .panel-title a ');
for(var i = 0; i < expandLinks.length; i++) {
expandLinks[i].addEventListener('click', function(event) {
console.log(event.currentTarget);
var selector = event.currentTarget.getAttribute("href");
var answersDiv = document.querySelector(selector);
answersDiv.classList.toggle('hidden');
});
}
});
</script>
I need to collapse other component from a button. So I have a directive name collapse and I want to set target collapseme to the diretive.
<div class="panel-heading">
<h4 class="panel-title">
<a [collapse]="isColapse" [collapseTarget]="collapseme" (click)="isColapse= !isColapse">
</a>
</h4>
</div>
<div id="collapseme">
<div class="panel-body">
collapse content
</div>
</div>
But I cant find solution for it. Do you have any solution?
Add a template variable #collapseme
<div class="panel-heading">
<h4 class="panel-title">
<a [collapse]="isColapse" [collapseTarget]="collapseme" (click)="isColapse= !isColapse">
</a>
</h4>
</div>
<div id="collapseme" #collapseme> <!-- modified -->
<div class="panel-body">
collapse content
</div>
</div>
It seems you have used bootstrap. You can do it via bootstrap
collapse
I was using pure html and css on my views and works perfectly fine but i changed only the views and began to use bootstrap 3, now the div with the map just show a grey square,my view:
<div class="col-md-8">
<div class="panel panel-default">
<div class="panel-heading">
<span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>
Map
</div>
<div class="panel-body">
<?php echo $map['html'];?>
</div>
</div>
</div>
What can i do to make it show?
Here is the code to play with:
Bootply
$('.collapse').on('shown.bs.collapse', function() {
$("span").addClass('glyphicon-chevron-up').removeClass('glyphicon-chevron-down');
});
$('.collapse').on('hidden.bs.collapse', function() {
$("span").addClass('glyphicon-chevron-down').removeClass('glyphicon-chevron-up');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="panel-group" id="accordionMessagesSetup">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionMessagesSetup" href="#collapseMessagesSetup">
<span class="glyphicon glyphicon-chevron-up"></span>
Message Setup
</a>
</h4>
</div>
<div id="collapseMessagesSetup" class="panel-collapse collapse in">
<div class="container">
<p> my content goes here... </p>
</div>
</div>
</div>
</div>
</div>
How can I remove the borders around my panel, except for the top one? I want the top border but not the ones on left, right or bottom.
Sorry if it seems too simple; I'm just new to whole web dev stack.
Make use of the border-width properties.
Check the CSS in this code: Bootply
Basically Currently I have html code which builds a layout of panels and I want to basically expand and collapse these panels , for some reason when i load the assets and run my app , the panels appear collapsed but does not expand when i click the panel title the code is below , i am using angular js with html5 . if someone can help quick i would appreciate that.
<div class="row clearfix" >
<div ng-repeat="i in ctrl.coreControlpanelItems" class="col-md-12 column" >
<div ng-class="{'panel-primary': hover}" ng-mouseenter="hover = true" ng-mouseleave="hover = false" class="panel panel-default animated fadeInUp">
<div class="panel-heading">
<i class="pull-left {{i.icon}}"/>
<h5 class="panel-title">
<a href="#" ng-model="collapsed" ng-click="collapsed=!collapsed">
<a ui-sref="{{i.ref}}">{{i.group}}</a>
</a>
</h5>
</div>
<div ng-show="collapsed">
<div class="panel-body ">
<ul>
<li ng-repeat="s in i.items"><a ui-sref="{{s.ref}}">{{s.name}}<a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
First of all, you have nested a tags in your panel-title element. That's a no-no.
Second, you're can't put ng-model on an a tag.
Third, your panel-title is supposed to expand something but you also have a link inside of it which if clicked on would negate what you're trying to do with the expanding...