A Web Design Community curated by Chris Coyier

Code Snippets Gallery

Code Snippets > jQuery > Make Entire Div Clickable Submit one!

Make Entire Div Clickable

$(".myBox").click(function(){
     window.location=$(this).find("a").attr("href");
     return false;
});

Looks for a link inside div with class of “myBox”. Redirects to that links value when anywhere in div is clicked.

Reference HTML:

<div class="myBox">
     blah blah blah.
    <a href="http://google.com">link</a>
</div>

12 Responses

  1. Dyllon says:

    works very nicely. thanks.

  2. Nathan says:

    Chris, thanks for this. When I tried this it worked for a hover over empty space in the div but not for the link itself; when I clicked on the link itself it went to a 404 error. Any ideas?

  3. Very cool! Just right now I have used this in my project :D

  4. Bob Hay says:

    Very very nice.

    I had a job interview today. When asked if there were any blogs I read regularly, I mentioned css-tricks, and the interviewer said that was one of his faves, too.

  5. Nathan says:

    Great technique.
    What if you want to have other links inside the linked div? How would you keep those working still?

  6. xRommelx says:

    this is very useful for my current project

  7. Dale Sande says:

    Once again, TOTALLY AWESOME!!!

  8. Christoph says:

    “window.location” seems not to work in IE if you are using RealURL. Any Ideas?

    Thx
    Christoph

  9. Christoph says:

    fixed it this way:

    var base = $j(“base”).attr(“href”);
    $j(“#menu li a”).each(function(){
    $j(this).attr(“href”, base+$j(this).attr(“href”));
    });

  10. Tyler says:

    I think i am going to try this with tables…. Or is there an easier way?

  11. wow … very sweet idea :- )

    thanks

  12. Edwin says:

    Nice work
    really helpful

Leave a Comment

Remember:
  • Be nice.
  • Wrap multiline code in <pre> and <code> tags and escape it first (turn <'s into &lt;'s).
  • You may use regular HTML stuff like <a href="">, <em>, and <strong>
* This website may or may not contain any actual CSS or Tricks.