Link in class list-group-item (link itself) on Twitter Bootstrap

Question

(How) Can I put a link on twitter bootstrap "list-group-item", which in itself is a link, without ruining the list-group format? (see below)

<div class="list-group"> <a href="#" class="list-group-item active"> <h4 class="list-group-item-heading">List group item heading</h4> <p class="list-group-item-text">...</p> <a href="https://www.facebook.com/sharer/sharer.php?u=http" target="_blank"> Share on Facebook </a> </a> </div> 

Answer 1

You cannot use <a> tags inside other <a> tags that are not valid for HTML. Check out this question.

You can make it clickable with jQuery, although with a hack like this:

HTML - use a div instead with a custom class and some data tags:

 <div class="list-group"> <div class="list-group-item active list-group-item-linkable" data-link="http://www.google.com"> <h4 class="list-group-item-heading">List group item heading</h4> <p class="list-group-item-text">...</p> <a href="https://www.facebook.com/sharer/sharer.php?u=http" target="_blank"> Share on Facebook </a> </div> </div> 

CSS is like a link:

 .list-group-item-linkable:hover { color: #555; text-decoration: none; background-color: #f5f5f5; cursor: pointer; } 

JS is the fun part:

 $(document).ready(function() { $('.list-group-item-linkable').on('click', function() { // same window/tab: window.location.href = $(this).data('link'); // new window/tab: //window.open($(this).data('link')); }); $('.list-group-item-linkable a, .list-group-item-linkable button') .on('click', function(e) { e.stopPropagation(); }); }); 

I also created a JSFiddle .

Answer 2

I am confused, do you want all this to be a link? This may take a few more steps - nothing but a small number of copies and pasted controls, but why not just manually specify the “a” tag to each of the children of the “list group”