Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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




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


Output:

Desktop view: 

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



Last Updated : 29 Jul, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads