Make entire DIV clickable using inline JavaScript

What exactly is a DIV in HTML?

Before we discuss how to make entire Div clickable using inline JavaScript, it is important to understand various terms we will be using in this tutorial.

Syntax:

<div>Other elements go here</div>

Div tags above define sections or divisions in HTML documents. By using this div tag element to a section of HTML elements, you are able to style the elements using CSS. Furthermore, you can manipulate the elements using JavaScript.

What is a DIV class in HTML?

By specifying a class to a div tag, it makes it easy to use the class attribute in a stylesheet file. The class is then used to perform styling tasks to the elements enclosed in the div tag.

The div class is not only useful in CSS but also crucial in the manipulation of the HTML elements by JavaScript. JavaScript manipulation is done through HTML DOM, exactly what we will be doing in this tutorial.

Tip: Documents loaded into web browsers become document objects. The DOM (Document Object Model) is a standard method of accessing such documents. Access is done by programs and scripts such as JavaScript. On accessing the document objects, the scripts can then update styles, structures, and content of such elements.

You can check this article for more information on HTML DOM Document Objects and HTML Document Object Properties and Methods.

Also read: How to easily find and replace WordPress Strings

Example:

<div class="the-class"><a href="https://example.com">Example </a></div>

We can, therefore, use the CSS class “the-class” above to manipulate the content of the division/container (div) above.

Example:

.the-class{
   color: #fff;
}

The example above changes the color of the content in the container/div to white (#fff / #ffffff).

So, how do we make entire Div clickable using inline JavaScript?

Normally, we can make texts, images, spans and DIVs etc clickable using the simple syntaxes below:

<a href="https://example.com">this is the text</a> /*text clickable*/
<a href="https://example.com"><img src="https://example.com/image.jpg" /></a> /*image clickable*/
<a href="https://example.com"><div>the div elements</div></a> /* DIV elements clickable*/

But making the DIV elements clickable may not work in some cases. In WordPress, for example, when using page builders like WPBakery , it may not work. Unless you use raw HTML code.

But, with this simple code, you can make entire Div clickable using inline JavaScript. You can also assign a class to the HTML DIV and have the link open in a new tab on any browser.

You can copy and paste this code onto the W3Schools Tryit Online Editor here and see it in action. Remember to replace the dummy link “https://example.com”.

<div class="the-class" onclick="window.open('https://example.com')" style="cursor: pointer;">Hyperlink Text</div>

Parts explained

onclick="window.open('#')"

– This is the JavaScript part that will determine how the DIV will handle the “click” actions by the visitor.

"window.open"

– Opens the link in a new tab “on click”

"style=" cursor: pointer;"

– This is a CSS style that adds a “hand pointer” to the DIV on mouse hover over the HTML DIV.

Replace:

Hyperlink Text – with the text/span/div/image you want to make clickable.

https://example.com – with the target anchor link
the-class – with the CSS class you want to use to customize the DIV element.

Note: To have the link open in the same window, simply use an example below:

onclick="window.open('example.com','_self')"

Also read our blog about 6 Cool image CSS effects and hover tricks and proven ways to increase WordPress speed and performance.

We have an amazing offer for those with WordPress websites and are looking for premium themes and plugins like Astra Pro, Yoast Pro, Elementor Pro, WP Rocket etc… find out more here