How to Hide an HTML Element in Mobile View using jQuery ?
Suppose we have given an HTML document and the task is to hide an HTML element in mobile view with the help of jQuery.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.
- Initially, we are required to detect whether our system is ‘Mobile’ or not, for that window.navigator.userAgent property is used. It returns a string containing information about the name, version, and platform of the browser. So, using this string we can detect our system.
- In order to hide HTML elements hide() method is used.
- Here, in our code, we are going to hide a column of a table in the mobile view. In the desktop view of the table, we have four different columns with table headings as GFG UserHandle, Practice Problems, Coding Score, and GFG Articles.
- In the mobile view, we are going to hide the Practice Problems column by getting elements using their class names.
Mobile view: In the mobile view, the practice problems column is successfully now.