That's basically my question, here a Plunker
http://plnkr.co/edit/SNFy2XcOBefUavG1QCqD?p=preview
<button class="btn btn-default"
data-template="customer.tpl.html"
bs-modal="modal">New Customer
</button>
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" ng-show="title">
<button type="button" class="close" ng-click="$hide()">×</button>
<h4 class="modal-title" ng-bind="title">Hello</h4>
</div>
<div class="modal-body" ng-bind="content">
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. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="$hide()">Close</button>
</div>
</div>
</div>
</div>
why ?
It is showing the template, but it does not seems that way because you have ng-bind="content" in the template. This means that the modal will replace any modal-body content with the content of the data-content attribute (or if passed by javascript). Your data-content is nothing, so the "Lorem ipsum ..." is replaced with "".
So change
<div class="modal-body" ng-bind="content">
to
<div class="modal-body">
and it works.
forked plnkr -> http://plnkr.co/edit/18cyHRx8fQ6gXrdLnWG8?p=preview
Related
I am using anchor tags to link navbar to the headers inside of a div on same page. When I click on the last header it shows up in the middle of the container instead of at the very top.
I want the bottom header to show up at the very top of the container and leave some white space below it.
Here is codepen https://codepen.io/sasha-code/pen/qBOyBrW
Is there an html way to do it? if not, is there a js way to add white space dynamically below the last section to make sure the header is at the top.
PS. I know this is happening because there is no scroll left. I want to somehow add it dynamically. I don't want to add hardcoded white space.
<div>
<a href='#top'>Top</a>
<a href='#middle'>Middle</a>
<a href='#bottom'>Bottom</a>
</div>
<div class="content">
<div>
<h2 id="top">Header Top</h2>
text
</div>
<div>
<h2 id="middle">Header Middle</h2>
text
</div>
<div>
<h2 id="bottom">Header Bottom</h2>
text
</div>
You could set the min-height of the last div section to 100% of the parent:
.content {
height: 400px;
width: 300px;
overflow:scroll;
}
#last {
min-height: 100%;
}
<div>
<a href='#top'>Top</a>
<a href='#middle'>Middle</a>
<a href='#bottom'>Bottom</a>
</div>
<div class="content">
<div>
<h2 id="top">Header Top</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div >
<h2 id="middle">Header Middle</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="last">
<h2 id="bottom">Header Bottom</h2>
Lorem ipsum dolor sit amet.
</div>
</div>
Put this code at the end of your file:
<br> <br> <br>
Now it should work fine 😊
This question already has an answer here:
Bootstrap 3 Equal Height Columns with jQuery need assistance with the js
(1 answer)
Closed 6 years ago.
I am trying to have 2 Divs with in a row, each has slightly different content. I managed to resize them equal with js, the problem is, when it loads the collapsed content, it won't resize to the new size.
This is my try :
JS Fiddle
Html:
<div class="row">
<div class="col-md-6">
<div class="col-content">
<div id="accordion" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4>BOX 1</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<p>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. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">more...</a>
</div>
</div>
</div>
<div class="panel panel-default">
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body background-solid">
<p>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. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">...less</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="col-content">
<div id="accordion2" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4>BOX 2</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse in">
<div class="panel-body">
<p>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. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<a data-toggle="collapse" data-parent="#accordion2" href="#collapseFour">more...</a>
</div>
</div>
</div>
<div class="panel panel-default">
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body background-solid">
<p>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. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>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. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<a data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">...less</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
js:
var heightTallest = Math.max.apply(null, $(".col-content").map(function ()
{
return $(this).outerHeight();
}).get());
$('.col-content').css({ height: heightTallest + 'px' });
CSS:
.col-content {
overflow: hidden;
border-style: solid;
border-color: rgba(5, 47, 90, 0.8);
border-width: medium;
border-radius: 5px;
padding: 0 15px;
max-height: auto;
}
You can use min-height css property.
Now, on your JS do this:
$('.col-content').css({ "min-height": heightTallest + 'px' });
What happened here? This means that your div will obey the minimum height of whatever value you set to it, but will have any height greater than the min-height you provided.
See demo
I am struggling with this. All of the divs open and close when you click on their buttons. But what I want them to do is the following: If one div is open and I click a button to open the next I want the open one to close and the new one to open if that makes sense. Here is a link to the code:
https://codepen.io/iamdesfranco/pen/QNVqLO
<div class="container-fluid hidden-xs">
<div class="row blue">
<!-- Block One -->
<div class="col-sm-4 fixed-height-twofive">
<div class="text-center vertical-allign">
<h3>Background Image</h3>
</div>
</div>
<!-- Block Two -->
<div class="col-sm-4 fixed-height-twofive">
<div class="text-center vertical-allign">
<h3>Personal Involvement</h3>
<p>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<a class="btn btn-default" role="button" data-toggle="collapse" href="#aPInvolveD" aria-expanded="false" aria-controls="aPInvolveD" >
See More
</a>
</div>
</div>
<!-- Block Three -->
<div class="col-sm-4 fixed-height-twofive">
<div class="text-center vertical-allign">
<h3>Background Image</h3>
</div>
</div>
</div>
</div>
<!-- ALL ACCORDIONS FOR DESKTOP AND TABLET
=========================================== -->
<!-- ACCORDION 1 -->
<div class="collapse blue" id="aPInvolveD">
<div class="text-center">
<h3>Bobby Rangecroft</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna<br />
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint<br />
occaecat cupidatat non proident, sunt in culpa qui officia<br />
deserunt mollit anim id est laborum.
</p>
<br />
<h3>Dick Bruyns</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna<br />
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint<br />
occaecat cupidatat non proident, sunt in culpa qui officia<br />
deserunt mollit anim id est laborum.
</p>
</div>
</div>
<!-- ACCORDION 2 -->
<div class="collapse blue " id="aClientD">
<div class="text-center">
<h3>Bobby Rangecroft</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna<br />
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint<br />
occaecat cupidatat non proident, sunt in culpa qui officia<br />
deserunt mollit anim id est laborum.
</p>
<br />
<h3>Dick Bruyns</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna<br />
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint<br />
occaecat cupidatat non proident, sunt in culpa qui officia<br />
deserunt mollit anim id est laborum.
</p>
</div>
</div>
<!-- ACCORDION 3 -->
<div class="collapse blue " id="aTestD">
<div class="text-center">
<h3>Bobby Rangecroft</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna<br />
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint<br />
occaecat cupidatat non proident, sunt in culpa qui officia<br />
deserunt mollit anim id est laborum.
</p>
<br />
<h3>Dick Bruyns</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna<br />
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint<br />
occaecat cupidatat non proident, sunt in culpa qui officia<br />
deserunt mollit anim id est laborum.
</p>
</div>
</div>
<!-- ROW TWO
==============-->
<div class="container-fluid blue hidden-xs">
<div class="row">
<!-- Block One -->
<div class="col-sm-4 fixed-height-twofive">
<div class="text-center vertical-allign">
<h3>Our Clients</h3>
<p>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</p>
<a class="btn btn-default" role="button" data-toggle="collapse" href="#aClientD" aria-expanded="false" aria-controls="aClientD">
See More
</a>
</div>
</div>
<!-- Block Two -->
<div class="col-sm-4 fixed-height-twofive">
<div class="text-center vertical-allign">
<h3>Background Image</h3>
</div>
</div>
<!-- Block Three -->
<div class="col-sm-4 fixed-height-twofive">
<div class="text-center vertical-allign">
<h3>Testimonials</h3>
<p>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<a class="btn btn-default" role="button" data-toggle="collapse" href="#aTestD" aria-expanded="false" aria-controls="aTestD">
See More
</a>
</div>
</div>
</div>
</div>
Try the following
$('.collapse').on('show.bs.collapse', function () {
$('.collapse').not($(this)).collapse('hide');
});
demo https://codepen.io/anon/pen/dMqVOY
Wrap all the collapsable divs in a parent div
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
Then wrap each one in a panel div
<div class="panel">
And then reference the parent for each toggle button
parent="#accordion"
https://codepen.io/partypete25/pen/BKOwzZ
I need your help, like the title I have to change the id of the child of a cloned element in Jquery but I don't know how to do that ....
There my code (thanks a lot) :
Jquery :
//Clone news
var i = 0;
body.on("click", "button.clone", function(e) {
e.preventDefault();
i++;
var box = $(this).parent().parent();
var name = "contenu" + i;
box.clone().insertAfter(box).attr("id", name);
});
HTML :
<div class="drag col-md-12">
<div id="content" class="content col-md-12">
<div id="contenu" class="col-md-9">
<span class="text-left">Lorem ipsum dolor sit amet</span>
<span style="float: right;">Jeudi 25/02/2016 | 12:00</span>
<hr>
<h1>Lorem ipsum dolor sit amet</h1>
<br />
<p class="text-justify test" data-type="text">
Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<hr>
<img src="img/img_content.png" alt="header" class="img-responsive element_center">
<br />
<br />
</div>
<p class="text-center col-md-3">
<button class="clone btn btn-primary btn-perso">
<span class="glyphicon glyphicon-duplicate" aria-hidden="false"></span>
Dupliquer
</button>
<br />
<button class="delete btn btn-primary btn-perso">
<span class="glyphicon glyphicon-trash" aria-hidden="false"></span>
Supprimer
</button>
</p>
</div>
</div>
Try this
$(box).next().prop("id","new name");
after
box.clone().insertAfter(box).attr("id", name);
https://jsfiddle.net/Ljnxn680/
I have created one page in that there is on button like MORE.if i click on MORE next page will display.In next page there are 5 accordion tab created..the issue is that accordion tab click event is not working.Please help me..
<html>
<head>
<meta charset="utf-8">
<title>DUMMY</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<meta name="format-detection" content="telephone=no">
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css">
<link rel="stylesheet" href="css/themes.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
.accordion-toggle{
display:inline-block;
width:100%;
}
</style>
</head>
<body class="blue-skin">
<div class="wrapper">
<!-- SECTION -->
<section id="home">
<div class="wrap inverse bg-dark vpadding-strong anima">
</div>
</section>
<section id="advs">
<div class="wrap">
<header class="content-header"></header>
<article id="fumeExhaustSystem" class="container_12 content center">
<div class="grid_1"></div>
<div class="grid_10">
<div class="grid_6">
"Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<span>More</span>
</div>
</div>
<div class="grid_1"></div>
</article>
<footer class="content-footer"></footer>
</div>
</section>
</div> <!-- /wrapper -->
<div class="overlay"></div> <!-- overlay layer -->
<!-- POPUP: portfolio -->
<div id="work-popup-2" class="popup work-popup">
<div class="slides-container fullslider">
<ul class="sliderwrap">
<li><div class="bgimg"><img src="images/slides/slide-3.jpg" alt=""></div></li>
<li><div class="bgimg"><img src="images/slides/slide-4.jpg" alt=""></div></li>
<li><div class="bgimg"><img src="images/slides/slide-5.jpg" alt=""></div></li>
<li><div class="bgimg"><img src="images/slides/slide-6.jpg" alt=""></div></li>
<li><div class="bgimg"><img src="images/slides/slide-9.jpg" alt=""></div></li>
</ul>
</div>
<div class="container_12 vpadding">
<div class="grid_3">
<h2> System</h2>
</div>
<div class="grid_9">
"Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
1.
</a><i class="indicator glyphicon glyphicon-chevron-down pull-right"></i>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
2.
</a><i class="indicator glyphicon glyphicon-chevron-up pull-right"></i>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
"Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
3.
</a><i class="indicator glyphicon glyphicon-chevron-up pull-right"></i>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
"Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
</div>
</div> <div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapsefour">
4.
</a><i class="indicator glyphicon glyphicon-chevron-up pull-right"></i>
</h4>
</div>
<div id="collapsefour" class="panel-collapse collapse">
<div class="panel-body">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapsefive">
5.
</a><i class="indicator glyphicon glyphicon-chevron-up pull-right"></i>
</h4>
</div>
<div id="collapsefive" class="panel-collapse collapse">
<div class="panel-body">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
</div>
</div>
</div>
<script>
function toggleChevron(e) {
$(e.target)
.prev('.panel-heading')
.find("i.indicator")
.toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
}
$('#accordion').on('hidden.bs.collapse', toggleChevron);
$('#accordion').on('shown.bs.collapse', toggleChevron);
</script>
<script src="js/jquery-2.1.0.min.js"></script>
<script src="js/jquery.plugins.js"></script>
<script src="js/custom.js"></script>
</body>
</html>
What you are doing here is that you are collapsing div on click of anchor tag.
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
and it's working fine, but maybe you want it to be opened on click of whole slide,
you can do it with CSS workaround by making anchor spread on whole clickable panel.
see the attached fiddle for more info
Updated Fiddle : http://jsfiddle.net/RockRathore/f6au4bn9/3/