CÓDIGO HTML
<!-- panel 1 -->
<div class="panel panel-default pulse animated">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a id="link-open" class="text-pan collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<center><i class="glyphicon glyphicon-map-marker gly-circle"></i></center></br>
<h2 id="title-cat">TÍTULO AQUI</h2>
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body" id="panel-mob">
<div class="thumbnail">
<img data-src="holder.js/100%x200" alt="100%x200" src="imagens/background/screens-mob/bg-mob-one.jpg">
<div class="caption-mob panel-body">
<h3 class="caption-title-mob animated fadeInDown">SOLUÇÕES PET ONLINE</h3>
<p class="caption-text-mob animated fadeInDown">Busque as melhores noticias da região.</p>
<a href="petbusca/pet.html" class="btn btn-success btn-lg btn-config btn-mob"><span class="animated rubberBand">acessar »</span></a>
</div>
</div>
</div>
</div>
</div>
CÓDIGO CSS
#link-open {
text-decoration: none;
padding: 100%;
}
Pessoal, estou com o código acima para montar um accordion usando Bootstrap 3. Tudo está funcionando perfeitamente... O único problema é que estou tentando fazer o link "a" refereciado pelo css (link-open), ocupar toda a div, para que quando o usuário clicar no box, o usuário não tenha que clicar apenas no link, mas também consiga clicar na área do panel-heading inteira para abrir o box. O problema, é que quando usuo o padding: 100%, o meu link ocupa a página quase toda, e quando isso acontece, qualquer lugar que eu clico ele abre o box. Como eu faço para determinar a área de clique do meu link, somente dentro do box "panel-title", para assim que o usuário clicar em qualquer área do painel-title ele consiga abrir o box?