Skip to content
Related Articles

Related Articles

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

View Discussion
Improve Article
Save Article
Like Article
  • 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.


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

Start Your Coding Journey Now!