Panel-Collapse Bootstrap

Question

HTML CODE

<!-- 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>

CSS CODE

#link-open {
  text-decoration: none;
  padding: 100%;
}

Guys, I have the above code to mount an accordion using Bootstrap 3. Everything is working perfectly... The only problem is that I’m trying to link "a" referenced by css (link-open), occupy the entire div, so that when the user clicks on the box, the user doesn’t just have to click on the link, but also manages to click on the entire panel-Heading area to open the box. The problem is that when I use padding: 100%, my link takes up the whole page, and when it does, anywhere I click it opens the box. How do I determine the click area of my link, only within the "panel-title" box, so as soon as the user clicks on any area of the dashboard-title he can open the box?

Answer 1

By jQuery you can use the function click.

$('.panel-title').click(function(){ 
   // Abrir Box
});

In this case you determine that all space within the panel-title you will receive the click function.