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.

Approach:

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

html

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <title>GFG User Details</title>
  
    <!-- jQuery PLUGIN-->
        integrity=
"sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" 
        crossorigin="anonymous">
    </script>
  
    <!-- CSS properties to style the page-->
    <style>
        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;
        }
  
        th,
        td {
            font-weight: bold;
            border: 1px solid black;
            padding: 10px;
            text-align: center;
        }
  
        td {
            font-weight: lighter;
        }
    </style>
</head>
  
<body>
    <section>
        <h1>GeeksForGeeks</h1>
  
        <!-- TABLE CONSTRUCTION-->
        <table id="GFGtable">
            <tr>
                <!-- 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>
            </tr>
            <!-- TABLE DATA -->
            <tr>
                <td class="gfgusername">User-1</td>
                <td class="gfgpp">150</td>
                <td class="gfgscores">100</td>
                <td class="gfgarticles">30</td>
            </tr>
            <tr>
                <td class="gfgusername">User-2</td>
                <td class="gfgpp">100</td>
                <td class="gfgscores">75</td>
                <td class="gfgarticles">30</td>
            </tr>
            <tr>
                <td class="gfgusername">User-3</td>
                <td class="gfgpp">200</td>
                <td class="gfgscores">50</td>
                <td class="gfgarticles">10</td>
            </tr>
            <tr>
                <td class="gfgusername">User-4</td>
                <td class="gfgpp">50</td>
                <td class="gfgscores">5</td>
                <td class="gfgarticles">2</td>
            </tr>
            <tr>
                <td class="gfgusername">User-5</td>
                <td class="gfgpp">0</td>
                <td class="gfgscores">0</td>
                <td class="gfgarticles">0</td>
            </tr>
        </table>
    </section>
      
    <script>
        // CONDITION TO DETECT SYSTEM
        if (window.navigator.userAgent.indexOf("Mobile") > -1) {
            // HIDING ELEMENTS
            $(".gfgpp").hide();
        }                                          
    </script>
</body>
  
</html>

chevron_right


Output:

Desktop view: 



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

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.