Skip to content
Related Articles

Related Articles

Improve Article

How to Hide an HTML Element in Mobile View using jQuery ?

  • Last Updated : 29 Jul, 2020

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.

Implementation Code: 


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>GFG User Details</title>
    <!-- jQuery PLUGIN-->
    <!-- CSS properties to style the page-->
        table {
            margin: 0 auto;
            font-size: large;
            border: 1px solid black;
        h1 {
            text-align: center;
            color: #006600;
            font-size: xx-large;
            font-family: 'Gill Sans', 'Gill Sans MT',
                ' Calibri', 'Trebuchet MS', 'sans-serif';
        td {
            background-color: #E4F5D4;
            border: 1px solid black;
        td {
            font-weight: bold;
            border: 1px solid black;
            padding: 10px;
            text-align: center;
        td {
            font-weight: lighter;
        <!-- TABLE CONSTRUCTION-->
        <table id="GFGtable">
                <!-- TABLE HEADING -->
                <th class="gfgusername">GFG UserHandle</th>
                <th class="gfgpp">Practice Problems</th>
                <th class="gfgscores">Coding Score</th>
                <th class="gfgarticles">GFG Articles</th>
            <!-- TABLE DATA -->
                <td class="gfgusername">User-1</td>
                <td class="gfgpp">150</td>
                <td class="gfgscores">100</td>
                <td class="gfgarticles">30</td>
                <td class="gfgusername">User-2</td>
                <td class="gfgpp">100</td>
                <td class="gfgscores">75</td>
                <td class="gfgarticles">30</td>
                <td class="gfgusername">User-3</td>
                <td class="gfgpp">200</td>
                <td class="gfgscores">50</td>
                <td class="gfgarticles">10</td>
                <td class="gfgusername">User-4</td>
                <td class="gfgpp">50</td>
                <td class="gfgscores">5</td>
                <td class="gfgarticles">2</td>
                <td class="gfgusername">User-5</td>
                <td class="gfgpp">0</td>
                <td class="gfgscores">0</td>
                <td class="gfgarticles">0</td>
        if (window.navigator.userAgent.indexOf("Mobile") > -1) {
            // HIDING ELEMENTS


Desktop view: 

Mobile view: In the mobile view, the practice problems column is successfully now.

My Personal Notes arrow_drop_up
Recommended Articles
Page :