Web coding support
  • Home
  • PHP
  • Phonegap
  • Angular Js
  • Node Js
  • Previous year questions
  • B.Tech Questions
  • RTU

Hide show HTML element by javascript

  • By admin
  • Sep-10-2016
  • Javascript, jquery
  • 0 Comments.

Hide show any element on a HTML page is vary common thing for websites. For Hide and Show elements Jquery is the most common and reliable framework. But There is some performance issue by jquery, so Javascript is the best solution for Hide and show any element on a web page.

Sometimes JQuery isn’t necessary; if this is the only thing you need to do on a page, the overhead of loading the library far outweighs the need to write concise JavaScript.

It seems that hide() , show() and jquery visibility methods in general are not a good option in terms of performance.

Hide an element by id  in Javascript:


document.getElementById("id").style.display = "none";

Hide an element  by id  in jquery:


$("#id").hide();

Hide an element by class in javascript :


document.getElementsByClassName("class")[0].style.display = "none";

Hide  elements by class in jquery

$(".class").hide();

Show an element by id  in Javascript:


document.getElementById("id").style.display = "inline";

Show an element by id  in Jquery:


$("#id").show();

Show an element by class in Javascript:


document.getElementsByClassName("class")[0].style.display = "inline";

[/code</pre>

Show an element by class in jquery:
<pre>

$(".class").show();

Hide / Show all classes on a page in javascript.

Related Posts

  • HTML DOM Manipulation using JavaScriptHTML DOM Manipulation using JavaScript
  • How works ng-hide and ng-show in angular jsHow works ng-hide and ng-show in angular js
  • Form validation in codeigniterForm validation in codeigniter
  • How to create pagination in PHP and MySQLHow to create pagination in PHP and MySQL
  • What is static functions in phpWhat is static functions in php
  • Magic function library for Codeigniter like CakePHPMagic function library for Codeigniter like CakePHP

Share this:

  • Click to share on Twitter (Opens in new window)
  • Click to share on Facebook (Opens in new window)
  • Click to share on Google+ (Opens in new window)
  • Click to share on Pinterest (Opens in new window)
  • Click to share on WhatsApp (Opens in new window)
  • Click to email this to a friend (Opens in new window)
  • Click to print (Opens in new window)

Related

FacebookTwitterGoogle+Google GmailPrintPinterestFacebook MessengerWordPressShare

Comments

Leave a Reply Cancel reply

← Previous Post Next Post →

Categories

  • Angular Js
  • Array
  • Codeigniter
  • facebook
  • Javascript
  • jquery
  • MySQL
  • oops
  • Pagination
  • Phonegap
  • PHP

Recent Posts

  • Fetch random results form MySQL
  • HTML DOM Manipulation using JavaScript
  • Magic function library for Codeigniter like CakePHP
  • What is the difference between an interface and abstract class
  • How to reset an array keys in php

Tags

Abstract Class angularjs array codeigniter facebook facebook login facebook sdk form validations function hide html Interface javascript jquery magic functions method mysql ng-hide ng-show nghide ngshow oops pagiation php recursion reference show static static functions

Subscribe us

Name
Email *
About This Site

We provide the simplest tutorials for web development.

Pages
  • Home
  • B.Tech Questions
  • Previous year questions
  • RTU
Categories
  • Angular Js
  • Array
  • Codeigniter
  • facebook
  • Javascript
  • jquery
  • MySQL
  • oops
  • Pagination
  • Phonegap
  • PHP
Search
  • facebook
  • twitter

Powered by Minmarks.com  |  A Coding blog by By Jitendra.

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.