How to Hide an HTML Element in Mobile View using jQuery ? Last Updated : 29 Jul, 2020 Comments Improve Suggest changes 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 Hide an HTML Element in Mobile View using jQuery ? 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 How to create a Slider with hidden Label 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 Slider with hidden Label using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=â€style 1 min read How to create Basic collapsibles 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 a Basic collapsible using jQuery Mobile. Approach: First, add the jQuery Mobile scripts needed for your project. <link rel="st 1 min read How to create a Disabled Slider 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 Slider using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=â€stylesheet†hr 1 min read How to create a Dialog Popup 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 Dialog popup button using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=â€stylesheet 1 min read Like