Panel-Collapse Bootstrap

Navigation
0

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%;
}

Personally, 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 make the "a" link referenced by css (link-open) occupy the entire div, so that when the user clicks on the box, the user does not have to just click on the link, but also can click on the entire area of the panel-heading to open the box. The problem is that when I use padding: 100%, my link occupies the page almost all of it, and when it does, anywhere I click it opens the box. How do I determine the click area of my link, just inside the "panel-title" box, so that once the user clicks on any area of the title-panel he can open the box?     

asked by anonymous 15.05.2015 / 07:30

1 answer

0

For jQuery you can use the click function. 

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

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

    
15.05.2015 / 13:19
Rails does not accept request Page flashes when giving F5