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.

score 13 · Answer 1 · answered May 06 '15 at 01:48

13

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>

answered May 06 '15 at 01:48

Alan Thomas

1,006
2
14
31

1

This definitely seems like the correct solution. @seniors, any reason why this isn't the case? – Andrew Allbright Apr 05 '16 at 14:51
1

I did it around the panel and it mucked up the layout. I tried it on an element inside the panel and it worked fine. – Adrian May 26 '16 at 17:55
@Adrian My first guess would be that tags are inline elements by default, which may be the reason it messed up the layout. Should be a fairly simple CSS fix if you look into it. My only concern with not wrapping the entire panel inside of the anchor tag is that certain parts of the panel may not be clickable ie. follow the intended link if not every element is wrapped around. – Alan Thomas Jun 02 '16 at 13:42
@AlanThomas I don't remember the specific project I was tinkering with, but changing the order of the tags solved the problem for me. I sought to avoid overriding Bootstrap's CSS settings, as I don't like to remember what I did to something further down the line. – Adrian Jun 02 '16 at 14:06
[here](http://stackoverflow.com/a/39751131/2218697) is **another working solution**, without any change. hope helps. – Shaiju T Sep 28 '16 at 15:02

score 2 · Answer 2 · answered Aug 22 '16 at 13:55

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');
 });

Mate · Answer 3 · 2014-10-14T20:58:08.523

0

Try

 $('.panel panel-info').click(function(e) {
        e.preventDefault();
        window.location = 'http://stackoverflow.com/';
    });

Or setting panel's id

       <div class="panel panel-info" id="lnkPanel">


        $('#lnkPanel').click(function(e) {
            e.preventDefault();
            window.location = 'http://stackoverflow.com/';
        });

For .NET MVC 3 or 4 :

<script type="text/javascript">
      var lnkDashboard = '@Url.Action("Index", "Dashboard")';
</script>

  $('#lnkPanel').click(function(e) {
            e.preventDefault();
            window.location = lnkDashboard;
        });

DEMO : The page doesn't allow navigate, but you can see a full example

edited Oct 14 '14 at 20:58

answered Dec 04 '13 at 00:32

Mate

4,976
2
32
38

Hi, thanks for the reply. instead of using http:// address, i want to use >@Html.ActionLink("My queue", "Index", "Dashboard", null, null). anyway i can achieve that? – user1447718 Dec 04 '13 at 03:22
@user1447718 Hi, I guess you're using .net mvc 3 or 4. In this case, try with the Update – Mate Dec 04 '13 at 04:56
@MaxGrass Re-Added on jsfiddle – Mate Oct 14 '14 at 20:58

How do i make entire bootstrap panel as hyperlink

3 Answers3