Wrap div tags inside a <a> tag?

[Nocktis]

Hello everyone.  I'm using Prestashop 1.6 and I'm trying to take advantage of the fact that HTML 5 now allows block level elements to be wrapped inside an <a> tag.  Specifically I'm looking to wrap a few <div> tags inside an <a> tag.

 

For example:

 

<a href="http://www.google.com"><div>Div content without other links here</div></a>

 

However, the editor is not allowing this.  Can anyone help me out with this?  At first I was trying to use a onclick event on the div container but I realize that's not the best option and the editor strips out onclick tags.  I've already followed the instructions here (http://mypresta.eu/en/art/prestashop-16/extended-rich-text-editor.html) to extend TinyMCE but this still is not working.

 

Any help is greatly appreciated!

[tuk66]

Set style for the <a> element

display: block;

and use jQuery onclick event instead. There is no need to nest <div> inside <a>.

[Nocktis]

The problem I'm having with using an onclick event is the editor is stripping it out even after extending TinyMCE following the instructions posted above.

[tuk66]

Use jQuery

$('#your_element').on('click', function(e){
    ...
});

[Nocktis]

Is it possible to use that right inside the body of the CMS page?  I'm going to have a CMS page with about 8 <div> containers that I need clickable.  I'd hate to have to include a bunch of extra jQuery code in a global file that is only needed on one CMS page.  Thanks for the help.

[Nocktis]

Ahh looks like you can.  Perhaps there's a more efficient way to do this but for now this is what's working for me (all inside one CMS page):

 

<div class="divlink1">Content here</div>
<div class="divlink2">Content here</div>
<div class="divlink3">Content here</div>


<script>
$(".divlink1").on('click', function() {
  window.location = "http://www.google.com";
});


$(".divlink2").on('click', function() {
  window.location = "http://www.someotherurl.com";
});


$(".divlink3").on('click', function() {
  window.location = "http://www.thirdurl.com";
});
</script>

Now all I need to do is add some CSS and this will work great.  Thanks again for the help!

Edited February 5, 2015 by Nocktis (see edit history)

[li.va.mold]

Or you can use just something like that (direct in html):

 

<div class="..." style="cursor: pointer;" onclick="document.location='https://www.google.com'"></div>