How do i make entire bootstrap panel as hyperlink

Question

am using twitter bootstrap's panel component. i have below code

<div class="panel panel-info">
            <div class="panel-heading">
                <div class="row">
                    <div class="col-xs-6">
                        <i class="fa fa-comments fa-5x"></i>
                    </div>
                    <div class="col-xs-6 text-right">
                        <p class="announcement-text">My queue</p>
                    </div>
                </div>
            </div>
        </div>

how do i make the entire panel as hyperlink. like i should be able to click on any part of the panel and it should navigate to a different page.

Online examples show making the footer as hyperlink, but i thought it would be better if i can make the entire panel a hyperlink.

i don't want to use metro.js.

Thanks.

Answer 1

Using an anchor tag around the element can mess up some layouts due to ancestor selectors in the stylesheet.

Using an anchor tag as the panel itself also may not inherit from the default panel styles.

The simplest solution with javascript is to put an attribute on the panel div, like href or data-href, then a global event listener (delegate).

 $(document).on('click', '.panel[data-href]:not(a)', function(){
     window.location = $(this).attr('data-href');
 });

Answer 2

Just wrap the whole panel in an anchor tag.

 <a href="link.com">    
  <div class="panel panel-info">
    <div class="panel-heading">
      <div class="row">
        <div class="col-xs-6">
          <i class="fa fa-comments fa-5x"></i>
        </div>
        <div class="col-xs-6 text-right">
          <p class="announcement-text">My queue</p>
        </div>
      </div>
    </div>
  </div>
</a>