Question

I have a div as follows:

        <div class="slide_items">
            <div class="slide_item"><a href="/url"><img src="image"/></a></div>
            <div class="slide_title"><a href="/url">title</a></div>
        </div>

What i want to do is, instead of having URL in each item in slide_items div. I want user to click on <div class="slide_items">. I want the slide_items to be clickable as the div itself, rather than putting a href in every inner div.

How can i do this?

Answer 1

The proper way would be to use a single link (but change the inner elements to span for validness)

    <a href="/url" class="slide_items">
        <span class="slide_item"><img src="image"/></span>
        <span class="slide_title">title</span>
    </a>

And make sure that they are treated as block elements from the css

a.slide_items, a.slide_items span{
    display:block;
}

---

If you have to go the div way, then use

<div class="slide_items" data-href="/url">
    <div class="slide_item"><img src="image"/></div>
    <div class="slide_title">title</div>
</div>

and add a script (since you use jquery)

$(function(){
    $('.slide_items').click(function(){
        var href = $(this).data('href');
        window.location = href;
    });
});