bootstrap div colapse on title bar click - html

Question

There is a bootstrap panel which collapses when its title is clicked.
How can I have two modifications on this panel?
The panel collapses and re-opens when a user click on any location in
the title bar (The gray aria).
Is there any way to avoid using fontawesome and sticking to
Glyphicons?
No onload script is preferred as the panel might be dynamically added.
.panel-heading a:after {
font-family:'Glyphicons Halflings';
content:"\e114";
float: right;
color: grey;
}
.panel-heading a.collapsed:after {
content:"\e080";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<div class="panel-group" id="accordion">
<div class="panel panel-default" id="panel1">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#collapseOne"
href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consequat eget leo vel condimentum. In dignissim sed nunc et malesuada. Etiam elit lacus, auctor sed mi sed, luctus convallis augue. Aenean tristique eu magna eu sodales. Sed sit amet enim ut quam tincidunt consectetur vitae eu purus. Sed lectus turpis, gravida sit amet arcu id, malesuada ornare nisl. Sed dignissim quam non tellus congue vestibulum non vel turpis. Fusce vehicula augue lacinia felis mattis, quis ultricies ex faucibus. Nulla quis arcu a nunc pulvinar egestas ac elementum elit. Morbi ultricies condimentum fermentum. Vivamus a purus dui. Suspendisse nulla arcu, molestie sed cursus et, luctus id quam. Donec enim est, consequat vel luctus vitae, fringilla id tortor. Nullam eget justo malesuada, porttitor mauris sit amet, luctus quam.
</div>
</div>
</div>
</div>

Answer 1

Try below code for click anywhere in gray area:
.panel-heading a:after {
font-family:'Glyphicons Halflings';
content:"\e114";
float: right;
color: grey;
}
.panel-heading a.collapsed:after {
content:"\e080";
}
.panel-default>.panel-heading {
padding: 0;
}
.panel-title a {
width: 100%;
display: inline-block;
text-decoration: none;
padding: 10px 15px;
}
.panel-title a:hover, .panel-title a:focus {
text-decoration: none;
outline: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<div class="panel-group" id="accordion">
<div class="panel panel-default" id="panel1">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#collapseOne"
href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consequat eget leo vel condimentum. In dignissim sed nunc et malesuada. Etiam elit lacus, auctor sed mi sed, luctus convallis augue. Aenean tristique eu magna eu sodales. Sed sit amet enim ut quam tincidunt consectetur vitae eu purus. Sed lectus turpis, gravida sit amet arcu id, malesuada ornare nisl. Sed dignissim quam non tellus congue vestibulum non vel turpis. Fusce vehicula augue lacinia felis mattis, quis ultricies ex faucibus. Nulla quis arcu a nunc pulvinar egestas ac elementum elit. Morbi ultricies condimentum fermentum. Vivamus a purus dui. Suspendisse nulla arcu, molestie sed cursus et, luctus id quam. Donec enim est, consequat vel luctus vitae, fringilla id tortor. Nullam eget justo malesuada, porttitor mauris sit amet, luctus quam.
</div>
</div>
</div>
</div>

Answer 2

You can use display:block; inside anchor tag which is inside of panel-title
.collapseAnchor{ display:block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<div class="panel-group" id="accordion">
<div class="panel panel-default" id="panel1">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#collapseOne"
href="#collapseOne" class="collapseAnchor">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consequat eget leo vel condimentum. In dignissim sed nunc et malesuada. Etiam elit lacus, auctor sed mi sed, luctus convallis augue. Aenean tristique eu magna eu sodales. Sed sit amet enim ut quam tincidunt consectetur vitae eu purus. Sed lectus turpis, gravida sit amet arcu id, malesuada ornare nisl. Sed dignissim quam non tellus congue vestibulum non vel turpis. Fusce vehicula augue lacinia felis mattis, quis ultricies ex faucibus. Nulla quis arcu a nunc pulvinar egestas ac elementum elit. Morbi ultricies condimentum fermentum. Vivamus a purus dui. Suspendisse nulla arcu, molestie sed cursus et, luctus id quam. Donec enim est, consequat vel luctus vitae, fringilla id tortor. Nullam eget justo malesuada, porttitor mauris sit amet, luctus quam.
</div>
</div>
</div>
</div>