I'm trying make a page with accordion using UI-Bootstrap.
I found this example that is fine for me. So I copied the code in my project but it doesn't works, obviously...
I made this snippet in plunker for a faster debug.
In any case this is the main code:
<div class="container">
<div class="row">
<div class="col-md-8" id="main">
<h3>Doesn't it look better ?</h3>
<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">
Why is it better
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<ul>
<li>The titles are block, so you don't have to click the text part to activate it</li>
<li>Indicators for expand / collapsing items</li>
<li>Removed title links' obnoxious :hover underlinings, and outlines.</li>
</ul>
</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">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</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">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Can you tell me why it doesn't work?
Thank you
You are missing jquery.js and bootstrap.js in the plunker. I added the following lines to make it work:
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.js"></script>
Also, notice your accordion component is not a ui-bootstrap accordion.
See updated plunker
replace data-toggle with ng-click and in collapse div add attribute collapse="!collapseOne"
for example
<a role="button" ng-click="collapseOne = !collapseOne" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<div id="collapseTwo" collapse="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
First off, you need to decide whether or not you want to go the Angular route or the jQuery route. Don't use both in this case. The Angular route has you using the Angular UI Bootstrap library and ONLY the Bootstrap CSS file. The jQuery route has you using jQuery (obviously), the Bootstrap JS library, and the Bootstrap CSS.
Don't mix the two. If you find that you are, you're doing it wrong. Here is your accordion demo.
Related
Using Reactjs and Bootstraps to show one collapse content at a time.
Here the code below uses jquery and bootstrap4 to show and hide a collapse content when each button is click one at a time
and is working fine.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script>
$( document ).ready(function() {
$('.collapse').on('show.bs.collapse', function () {
// hide all accordion except the clicked one
$('.collapse').not(this).collapse('hide');
});
});
</script>
</head>
<body>
Content1..
Content2
Content3
<br>
<div id="content1" class="collapse ">
<h1>Content 1 records</h1>
Close
</div>
<div id="content2" class="collapse ">
<h1>Content 2 records</h1>
Close
</div>
<div id="content3" class="collapse ">
<h1>Content 3 records</h1>
Close
</div>
</body></html>
Now I have to obtain its equivalents in reactjs.
I have install Bootstrap and Reactjs code shows collapse content each time
the button is click.
Here is my Issue with Reactjs. I want it to show as only one collapse content just like in jquery code above.
Please How do convert this jquery code to reactjs equivalents or is there any other options
$( document ).ready(function() {
$('.collapse').on('show.bs.collapse', function () {
// hide all accordion except the clicked one
$('.collapse').not(this).collapse('hide');
});
});
Here is Reactjs Code
import React, { Component, Fragment } from "react";
import { render } from "react-dom";
import $ from 'jquery';
class Collapse extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
return (
<span>
<label>
<ul>
Content1..
Content2
Content3
<br />
<div id="content1" class="collapse ">
<h1>Content 1 records</h1>
Close
</div>
<div id="content2" class="collapse ">
<h1>Content 2 records</h1>
Close
</div>
<div id="content3" class="collapse ">
<h1>Content 3 records</h1>
Close
</div>
</ul>
</label>
</span>
);
}
}
Here's a sample code showing how to do this:
class App extends React.Component {
constructor(props) {
super(props);
this.toggleAccordion = this.toggleAccordion.bind(this);
this.state = {
accordion: [true, false, false],
};
}
toggleAccordion(tab) {
const prevState = this.state.accordion;
const state = prevState.map((x, index) => tab === index ? !x : false);
this.setState({
accordion: state,
});
}
render() {
return (
<div className='wrapper'>
<div id="accordion">
<Reactstrap.Card className="mb-0">
<Reactstrap.CardHeader id="headingOne">
<Reactstrap.Button block color="link" className="text-left m-0 p-0" onClick={() => this.toggleAccordion(0)} aria-expanded={this.state.accordion[0]} aria-controls="collapseOne">
<h5 className="m-0 p-0">Collapsible Group Item #1</h5>
</Reactstrap.Button>
</Reactstrap.CardHeader>
<Reactstrap.Collapse isOpen={this.state.accordion[0]} data-parent="#accordion" id="collapseOne" aria-labelledby="headingOne">
<Reactstrap.CardBody>
1. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non
cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</Reactstrap.CardBody>
</Reactstrap.Collapse>
</Reactstrap.Card>
<Reactstrap.Card className="mb-0">
<Reactstrap.CardHeader id="headingTwo">
<Reactstrap.Button block color="link" className="text-left m-0 p-0" onClick={() => this.toggleAccordion(1)} aria-expanded={this.state.accordion[1]} aria-controls="collapseTwo">
<h5 className="m-0 p-0">Collapsible Group Item #2</h5>
</Reactstrap.Button>
</Reactstrap.CardHeader>
<Reactstrap.Collapse isOpen={this.state.accordion[1]} data-parent="#accordion" id="collapseTwo">
<Reactstrap.CardBody>
2. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non
cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</Reactstrap.CardBody>
</Reactstrap.Collapse>
</Reactstrap.Card>
<Reactstrap.Card className="mb-0">
<Reactstrap.CardHeader id="headingThree">
<Reactstrap.Button block color="link" className="text-left m-0 p-0" onClick={() => this.toggleAccordion(2)} aria-expanded={this.state.accordion[2]} aria-controls="collapseThree">
<h5 className="m-0 p-0">Collapsible Group Item #3</h5>
</Reactstrap.Button>
</Reactstrap.CardHeader>
<Reactstrap.Collapse isOpen={this.state.accordion[2]} data-parent="#accordion" id="collapseThree">
<Reactstrap.CardBody>
3. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non
cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</Reactstrap.CardBody>
</Reactstrap.Collapse>
</Reactstrap.Card>
</div>
</div>
);
}
}
ReactDOM.render( < App / > ,
document.getElementById('root')
);
.wrapper {
margin: 50px;
}
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reactstrap/6.0.1/reactstrap.full.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css" crossorigin="anonymous">
<div id="root" />
I dont know what's wrong with my code and I dont see any errors in console. My div panels are not working properly. I am having ng-click and when I click I am showing a div. Also arrow symbol on top right corner does not work.
Is there anything I am missing
Html
<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 data-toggle="collapse" style="cursor:pointer" ng-click="ShowDefinition()" aria-expanded="true" aria-controls="collapseOne">Definition</a> </h4>
</div>
<div id="collapseOne" ng-show="IsDefinitionVisible" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. </div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title"> <a class="collapsed" data-toggle="collapse" style="cursor:pointer" ng-click="ShowValues()" aria-expanded="false" aria-controls="collapseTwo"> What We Do? </a> </h4>
</div>
<div id="collapseTwo" ng-show="IsValuesVisible" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. </div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title"> <a class="collapsed" data-toggle="collapse" style="cursor:pointer" ng-click="ShowPrinciples()" aria-expanded="false" aria-controls="collapseThree"> Where We Do It? </a> </h4>
</div>
<div id="collapseThree" ng-show="IsPrinciplesVisible" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. </div>
</div>
</div>
</div>
Angular Controller
(function () {
var app = angular.module('myApp');
app.controller('aboutController', ['$scope',
function ($scope) {
$scope.TestAbout = "Test";
$scope.ShowDefinition = function () {
//If DIV is visible it will be hidden and vice versa.
$scope.IsDefinitionVisible = $scope.IsDefinitionVisible ? false : true;
}
$scope.ShowValues = function () {
//If DIV is visible it will be hidden and vice versa.
$scope.IsValuesVisible = $scope.IsValuesVisible ? false : true;
}
$scope.ShowPrinciples = function () {
//If DIV is visible it will be hidden and vice versa.
$scope.IsPrinciplesVisible = $scope.IsPrinciplesVisible ? false : true;
}
console.log($scope.TestAbout);
}
]);
})();
Here you go, working code:
Html:
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne"><i ng-if="!IsDefinitionVisible" style="float:right" class="glyphicon glyphicon-arrow-down"></i><i ng-if="IsDefinitionVisible" style="float:right" class="glyphicon glyphicon-arrow-up"></i>
<h4 class="panel-title"> <a data-toggle="collapse" style="cursor:pointer" ng-click="ShowDefinition()" aria-expanded="true" aria-controls="collapseOne">Definition</a> </h4>
</div>
<div id="collapseOne" ng-show="IsDefinitionVisible" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. </div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo"><i ng-if="!IsValuesVisible" style="float:right" class="glyphicon glyphicon-arrow-down"></i><i ng-if="IsValuesVisible" style="float:right" class="glyphicon glyphicon-arrow-up"></i>
<h4 class="panel-title"> <a data-toggle="collapse" style="cursor:pointer" ng-click="ShowValues()" aria-expanded="true" aria-controls="collapseTwo">What We Do?</a> </h4>
</div>
<div id="collapseTwo" ng-show="IsValuesVisible" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. </div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree"><i ng-if="!IsPrinciplesVisible" style="float:right" class="glyphicon glyphicon-arrow-down"></i><i ng-if="IsPrinciplesVisible" style="float:right" class="glyphicon glyphicon-arrow-up"></i>
<h4 class="panel-title"> <a data-toggle="collapse" style="cursor:pointer" ng-click="ShowPrinciples()" aria-expanded="true" aria-controls="collapseThree">Where We Do It?</a> </h4>
</div>
<div id="collapseThree" ng-show="IsPrinciplesVisible" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. </div>
</div>
</div>
</div>
Plunker : http://plnkr.co/edit/CsMKy6ctHAgXg9O4gkob?p=preview
I also added bootstrap arrows.
I have a jsfiddle example illustrating an accordion that works when using no angular; in the no angular example you can see that the previous panel closes when I click on a new panel, you can also see that there is spacing between each panel. When I add angular and have the panels build from an object array the accordion no longer works correctly; instead the previous panel does not collapse when clicking a new panel and the spacing between each panel no longer exists. I have compared the code and I can't figure out what I am doing wrong, can you see what is wrong?
HTML:
<div class="container" ng-controller="cntrl">
<p>No angular:</p>
<div class="panel-group" id="accordion">
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordion" data-target="#collapse1">
<div class="panel-heading">
<h4 class="panel-title">
Collapsible Group 1
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordion" data-target="#collapse2">
<div class="panel-heading">
<h4 class="panel-title">
Collapsible Group 2
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordion" data-target="#collapse3">
<div class="panel-heading">
<h4 class="panel-title">
Collapsible Group 3
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
</div>
<!-- now using angular -->
<p>Using angular (<em>notice the previous panel no longer collapses and the spacing between the panels does not exist like in my no angular example</em>):</p>
<div class="panel-group" id="ngaccordion">
<div ng-repeat="prop in someObj">
<div class="panel panel-default" data-toggle="collapse" data-parent="#ngaccordion" data-target="#{{prop.id}}">
<div class="panel-heading">
<h4 class="panel-title">
{{prop.contractName}}
</h4>
</div>
<!-- Instead of {{prop.id}} for id below and data-target above I have also tried "test{{$index}}" -->
<div id="{{prop.id}}" class="panel-collapse collapse" ng-class="{ 'in' : $first}">
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item">
<label>Price:</label> {{prop.price | currency:"$" }}</li>
<li class="list-group-item">
<label>Start Date:</label> {{prop.startDate}}</li>
<li class="list-group-item">
<label>End Date:</label> {{prop.endDate}}</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
JS:
var app = angular.module('app', []);
app.controller('cntrl', ['$scope', function($scope) {
$scope.someObj = [{
id: 'test1',
contractName: 'Test One',
price: 0.00,
startDate: moment().format("YYYY-MM-DD"),
endDate: moment().add(6, 'months').format("YYYY-MM-DD")
}, {
id: 'test2',
contractName: 'Test Two',
price: 20.00,
startDate: moment().add(6, 'months').format("YYYY-MM-DD"),
endDate: moment().add(12, 'months').format("YYYY-MM-DD")
}, {
id: 'test3',
contractName: 'Test Three',
price: 40.00,
startDate: moment().add(12, 'months').format("YYYY-MM-DD"),
endDate: 'NO END'
}];
}]);
Any help would be appreciated!
Since you are adding the ng-repeat in another div which is a parent of the accordion element (Bootstrap is confounded as to where the other ones are! :) ), this problem is occurring, to solve this issue just set the ng-repeat inside the panel div itself, refer my below example.
Before:
<div class="panel-group" id="ngaccordion">
<div ng-repeat="prop in someObj">
<div class="panel panel-default" data-toggle="collapse" data-parent="#ngaccordion" data-target="#{{prop.id}}">
<div class="panel-heading">
<h4 class="panel-title">
After:
<div class="panel-group" id="ngaccordion">
<div ng-repeat="prop in someObj" class="panel panel-default" data-toggle="collapse" data-parent="#ngaccordion" data-target="#{{prop.id}}">
<div class="panel-heading">
<h4 class="panel-title">
var app = angular.module('app', []);
app.controller('cntrl', ['$scope', function($scope) {
$scope.someObj = [{
id: 'test1',
contractName: 'Test One',
price: 0.00,
startDate: moment().format("YYYY-MM-DD"),
endDate: moment().add(6, 'months').format("YYYY-MM-DD")
}, {
id: 'test2',
contractName: 'Test Two',
price: 20.00,
startDate: moment().add(6, 'months').format("YYYY-MM-DD"),
endDate: moment().add(12, 'months').format("YYYY-MM-DD")
}, {
id: 'test3',
contractName: 'Test Three',
price: 40.00,
startDate: moment().add(12, 'months').format("YYYY-MM-DD"),
endDate: 'NO END'
}];
}]);
.container {
margin-top: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<div class="container" ng-controller="cntrl">
<p>
No angular:
</p>
<div class="panel-group" id="accordion">
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordion" data-target="#collapse1">
<div class="panel-heading">
<h4 class="panel-title">
Collapsible Group 1
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordion" data-target="#collapse2">
<div class="panel-heading">
<h4 class="panel-title">
Collapsible Group 2
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordion" data-target="#collapse3">
<div class="panel-heading">
<h4 class="panel-title">
Collapsible Group 3
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
</div>
<!-- now using angular -->
<p>
Using angular (<em>notice the previous panel no longer collapses and the spacing between the panels does not exist like in my no angular example</em>):
</p>
<div class="panel-group" id="ngaccordion">
<div ng-repeat="prop in someObj" class="panel panel-default" data-toggle="collapse" data-parent="#ngaccordion" data-target="#{{prop.id}}">
<div class="panel-heading">
<h4 class="panel-title">
{{prop.contractName}}
</h4>
</div>
<!-- Instead of {{prop.id}} for id below and data-target above I have also tried "test{{$index}}" -->
<div id="{{prop.id}}" class="panel-collapse collapse" ng-class="{ 'in' : $first}">
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item">
<label>Price:</label> {{prop.price | currency:"$" }}</li>
<li class="list-group-item">
<label>Start Date:</label> {{prop.startDate}}</li>
<li class="list-group-item">
<label>End Date:</label> {{prop.endDate}}</li>
</ul>
</div>
</div>
</div>
</div>
</div>
I am looping thru items with ng-repeat. Here is the code:
<div class="row"
<div class="w3-card-3 col-xs-18 col-sm-6 col-md-3" ng-repeat="p in products">
<div class="thumbnail">
<img ng-src="{{p.img}}" alt="...">
<div class="caption">
<h4 class="text-danger">{{p.brand}}</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p>
<a href="car/{{ p.id }}" class="btn btn-default btn-xs pull-right" role="button"><i class="glyphicon glyphicon-edit"></i>
</a> Info
Bid
</div>
</div>
</div>
My problem is that when the repeater enters a new line the cards generated gets messed up. Here's an image of the problem:
What's wrong with my code? Why won't the cards align underneath each other. Tell me if there is anything else you want to see.
use height of image and description wrapper it should solve the problem
Try to add style="float: left" in the div below:
<div class="thumbnail" style="float: left">
I'm having a problem with bootstrap ui collapsed directive, It show open as default and I needed collapsed on page load, I'm setting the variables correctly but still doesn't work correctly
here's part of my code:
aside class="col-md-3 leftSidebar separator-right" ng-controller="Collapse as vm">
<div class="row separator">
<div class="sidebarPosition">
<div class="leftSidebar__toggle">
<a class="mod" ng-click="vm.isCollapsedLeft = !vm.isCollapsedLeft"><span class="fa fa-bars"></span> Outline</a>
<ul uib-collapse="vm.isCollapsedLeft">
<li><a href="#scientific_abstract" du-smooth-scroll>Scientific Abstract</a></li>
<li><a href="#layperson_abstract" du-smooth-scroll>Layperson’s Abstract</a></li>
<li><a href="#introduction" du-smooth-scroll>Introduction</a></li>
<li>Results</li>
<li>Discussion</li>
<li>Methods</li>
<li>Additional Information</li>
<li>Change History</li>
<li>Acknowledgements</li>
<li>Author Information</li>
<li>Author Contributions</li>
</ul>
</div>
</div>
</div>
<div class="row leftSidebar__sections">
<ul>
<li><a ui-sref="article.figures"><span class="fa fa-picture-o"></span> Figures</a></li>
<li><a ui-sref="article.references"><span class="fa fa-link"></span> References</a></li>
<li><span class="fa fa-retweet"></span> Related</li>
<li>
<span class="fa fa-area-chart"></span> Stats Impact
</li>
<li><a ui-sref="article.comments"><span class="fa fa-comment"></span> Comments</a></li>
</ul>
</div>
</aside>
my Controller:
(function () {
'use strict';
angular
.module('app.bootstrap')
.controller('Collapse', Collapse);
function Collapse() {
var vm = this;
vm.isCollapsedLeft = false;
vm.isCollapsedRight = false;
}
})();
and here's a plunkr: https://plnkr.co/edit/D0vFMEQe4a2GT1yJLTLk?p=preview
Thanks for the help.
You said you want it to be collapsed on page load, but you are setting vm.isCollapsedLeft = false;. Set vm.isCollapsedLeft = true; and it will be collapsed on page load.
<html >
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style class="cp-pen-styles">.panel-heading .accordion-toggle:after {
/* symbol for "opening" panels */
font-family: 'Glyphicons Halflings'; /* essential for enabling glyphicon */
content: "\e114"; /* adjust as needed, taken from bootstrap.css */
float: left; /* adjust as needed */
color: grey; /* adjust as needed */
}
.panel-heading .accordion-toggle.collapsed:after {
/* symbol for "collapsed" panels */
content: "\e080"; /* adjust as needed, taken from bootstrap.css */
}
</style>
</head>
<body>
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="container">
<div class="panel-group" id="accordion" aria-multiselectable="true" >
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" href="#collapseOne" >
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" href="#collapseTwo" >
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse in" >
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" href="#collapseThree" aria-expanded="false">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse in" >
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
</div> <!-- end container -->
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body></html>