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
Related
I've got a bit of a problem here, and i'm not sure how to fix it. It's probably something really small and stupid, but i'm looking over it...
I've got this accordion in bootstrap, and normally the open elements collapse when you select a new one. This is not happening in my version.
Code Below:
<template>
<div class='monsters'>
<div class="loading" v-if="loading">
<div class="loading">Loading…</div>
</div>
<div v-if="error" class="error">
{{ error }}
</div>
<ul v-if="monsters">
<div class="panel-group" id="accordion">
<div class="panel panel-default" v-for="monster in monsters">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" :href="'#monster'+monster.id">{{ monster.name }}</a>
</h4>
</div>
<div :id="'monster'+monster.id" class="panel-collapse collapse in">
<monster-lg v-bind:monster="monster"></monster-lg>
</div>
</div>
</div>
</ul>
</div>
</template>
Any ideas on why how etc?
I know that I haven't styled it too much but I am learning how to do it and I just want to change the background color of the question. I am also not sure as to how I can get it to not take so much room on my page.
/*FAQ Page*/
.panel-title {
font-family: freight-text-pro;
}
.panel-body {
font-family: freight-text-pro;
}
.panel-heading {
background-color: #FF3300;
}
<div class="panel-group" id="accordion">
<div class="panel panel-default"> <!-- Panel One -->
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<span class="glyphicon glyphicon-plus"></span>
Where are you located?
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
We are located in Boston, Massachusetts.
</div>
</div>
</div>
<div class="panel panel-default"> <!-- Panel Two -->
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
<span class="glyphicon glyphicon-plus"></span>
Do you work with overseas/international clients?
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Yes we are open to any client in all countries.
</div>
</div>
</div>
<div class="panel panel-default"><!-- Panel Three -->
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
<span class="glyphicon glyphicon-plus"></span>
What is your average project turnaround?
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Though we do not like to give a specific turnaround, we do like to estimate (depending on the job) about 12-16 weeks.
</div>
</div>
</div>
You may try to:
add the boostrap libraries
change a bit your css
The snippet:
/*FAQ Page*/
.panel-group .panel-default .panel-heading .panel-title {
font-family: freight-text-pro;
}
.panel-group .panel-default .panel-collapse .panel-body {
font-family: freight-text-pro;
}
.panel-group .panel-default .panel-heading {
background-color: #FF3300;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="panel-group" id="accordion">
<div class="panel panel-default"> <!-- Panel One -->
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<span class="glyphicon glyphicon-plus"></span>
Where are you located?
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
We are located in Boston, Massachusetts.
</div>
</div>
</div>
<div class="panel panel-default"> <!-- Panel Two -->
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
<span class="glyphicon glyphicon-plus"></span>
Do you work with overseas/international clients?
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Yes we are open to any client in all countries.
</div>
</div>
</div>
<div class="panel panel-default"><!-- Panel Three -->
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
<span class="glyphicon glyphicon-plus"></span>
What is your average project turnaround?
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Though we do not like to give a specific turnaround, we do like to estimate (depending on the job) about
12-16 weeks.
</div>
</div>
</div>
</div>
When i have make "run the snippet" of your code i have the background-color in #FF3300 (if i haven't bad eyes it's orange) So you have two possibilities :
1) Change the order of your css call :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/YourStyle.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
You have to call bootstrap first -> cause html read your page in normal order.
2) If it doesn't work second option :
.panel-heading {
background-color: #FF3300 !important;
}
If you can avoid to use the !importan it's better but sometime it's necessary. Try to do right clic, inspect element when you have css problem and check in the list if your own css is ok or if he is surclassed by bootstrap.
I hope it's will work for you. (sorry for my write-style so frenchy ^^)
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
I have a toolbar. When I click on it I have many panels appear on the screen as drop-down.
In the tablet view I want all the panels to collapse and When I click on the panel-heading I want the panel-body to open.
I am poor in css can anyone help me.
Here is the code.
<div class="panel-collapse col-md-2 col-sm-4 col-xs-4 collapse in" style="height: auto;">
<div class="panel-body">
<div class="panel panel-info">
<div class="panel-heading">
<a >First heading</a>
</div>
<div class="panel-body">
<ul class="">
<li><a >item1</a></li>
<li><a >item2</a></li>
</ul>
</div>
</div>
</div>
<div class="panel-collapse col-md-2 col-sm-4 col-xs-4 collapse in" style="height: auto;">
<div class="panel-body">
<div class="panel panel-info">
<div class="panel-heading">
<a>second heading</a>
</div>
<div class="panel-body">
<ul class="">
<li><a >item4</a></li>
<li><a >item3</a></li>
</ul>
</div>
</div>
</div>
As you are using bootstrap accordion. You need to remove class in from your panel-collapse div.
Instead of
<div class="panel-collapse col-md-2 col-sm-4 col-xs-4 collapse in" style="height: auto;">
Write
<div class="panel-collapse col-md-2 col-sm-4 col-xs-4 collapse" style="height: auto;">
in is the class, which makes the content panel visible. So if you want all the panels collapse, remove it form every panel container. If you want only one panel to be visible while others should be collapsed, then put it in that panel container only.
Let me know if this helps. :-)
Bootstrap has specialized classes and data-* attributes for these types of tasks.
1) First, in order to make your panel act as an accordion, you need to give:
<a data-toggle="collapse" data-target="#panel1">Heading</a>
where panel1 is the id of your panel-body.
2) Next, since you want your panel-body to be collapsed at first, give the collapse class next to your panel-body:
<div id="panel1" class="panel-body collapse">
Have a look at the demo here to make things clear.
<div class="panel-body columnBody" id="accordion2">
<div class="panel panel-info">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" data-target=".Empty">{{item.key}}</a>
<button class="btn navbar-btn displayMobile" data-parent="#accordion2" data-target=".view{{$index}}"><span class="caret"></span></button>
</div>
<div class="panel-body itemList view{{$index}}">
<ul style="margin-bottom: 0px;">
<li ng-repeat="ke in item.values">{{ke}}</li>
</ul>
</div>
</div>
</div>
css code:
#media screen and (min-width: 850px){
.displayMobile{
display: none;
}
.itemList{
display: none;
}
}
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...