How to Hide an HTML Element in Mobile View using jQuery ? Last Updated : 29 Jul, 2020 Summarize Comments Improve Suggest changes Share Like Article Like 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--> <script src="https://code.jquery.com/jquery-3.5.1.js" 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. Comment More infoAdvertise with us Next Article How to make Form element button using jQuery Mobile ? H hacksight Follow Improve Article Tags : Web Technologies JQuery jQuery-Questions Similar Reads How to make Form element Inline button using jQuery Mobile ? jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be making Form element Inline button using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link rel= 1 min read How to create a Disabled Input using jQuery Mobile ? jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be creating a Disabled Input using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=â€stylesheet†hre 1 min read How to create Label hidden in Input Area using jQuery Mobile ? jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be creating a Label hidden using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=â€stylesheet†href= 1 min read How to make Form element button using jQuery Mobile ? jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be making Form element button using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link rel="styles 1 min read How to make Mini Form element Inline button using jQuery Mobile ? jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be making Mini Form element Inline button using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link 1 min read How to make Mini Form element button using jQuery Mobile ? jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be making Mini Form element button using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link rel="s 1 min read Like