Make Entire DIV Clickable Using Inline JavaScript

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 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:

This is a link within the a div with class “the-class” above Example

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

Example:

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:

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”.

Parts explained

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

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

– 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:

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

Freelance Desk

Lance Desk, a world-class professional web development, and marketing firm. We pride ourselves in providing professional web design and web development, SEO, domain and web hosting, graphic design (Business cards
Print Design, Logo/Branding Design, & Brochure Design etc) to individuals and institutions across the globe.

This Post Has 2 Comments
  1. Thanks for your help mate, such a simple way and I was reading articles which really was doing over-engineering just to make div clickable.

    One thing I want to add is if someone wants to open a link in the same tab use

Leave a Reply

Your email address will not be published. Required fields are marked *