Google Plus Facebook Twitter RSS YouTube

How to show hidden content using jQuery show() effect

show() is a prominent effect in jQuery scripting language. In modern web designing and developing, hiding the content (text, image, video or other type of content) initially but displaying them to the visitors either when user requests site to display the hidden content or displays content after some time automatically, is a commonly and popularly used effect in modern professional web design development. Content can be hidden in web documents in different methods, however jQuery show() method displays the hidden content to the document viewer. Here, you learn how show() method displays the hidden content using jQuery scripting language.

Note: This tutorial works in all major latest web browsers automatically but some of web browsers especially (Internet Explorer) block running the jQuery script that we have used to generate the preview. So, allow blocked content to see result in each below browser’s preview. Please upgrade your browser’s version from older to newer if you don’t see any result in browser’s previews when you click on buttons below.

Demo Picture

The above image file is originally hidden in this web page but jQuery show() method made this image to load automatically when you load this web page in your web browser. It's a best example for using show() method in jQuery scripting based web designing. Before going to know how to use it in your jQuery scripts, first understand syntax of the show() method fundamentally.

Syntax

Syntax of the jQuery show() method is written in jQuery scripting language as given in the code box. Integrating this syntax in jQuery script displays the hidden content of a particular selector in web pages.

jQuery Code

$("selector").show("value")
Syntax Steps
  1. Insert the selector name between double quotes of above syntax at selector place.  jQuery script developers have to enter the selector name which actually holds the hidden content.
  2. Insert dot (.) symbol after selector syntax to specify the jQuery effect.
  3. Insert syntax of the jQuery show() method after dot symbol. jQuery show() method accepts three types of values and they are slow, fast and user specified time in milliseconds. Remember, you have to insert either slow or fast terms in double quotes of show() effect but insert time without double quotes in show() method. You understand them here clearly in following examples.

jQuery Program using show( )

Insert a button and also insert some content through a paragraph element in body section. In this example, image content is inserted in a paragraph element. In every web document, we may have several paragraph elements to display the content. So, an id named showdisplay is inserted in a paragraph element through id attribute to avoid applying jQuery show effect to all p tags but applies to paragraph element whose id attribute is named showdisplay.

HTML Code
<body>
<button>Preview</button>
<p id="showdisplay">
   <img src="demo.png" width="650" height="300" alt="Demo Picture">
</p>
</body>

In this jQuery program, the content must be hidden initially. Thence, CSS display property is declared using jquery css() method and set its value to none to disable the presence of the content in web page. Actually, the image content is placed in a <p> element through an id name showdisplay in body section in web page as given in above code box. For this reason, css display property is set none and add it to showdisplay id in jQuery script below.

jQuery Code
$(document).ready(function() {
    $("#showdisplay").css("display","none")

});

The code disables the presence of the content in the specified paragraph id element intially. As you know, button element is inserted in HTML code. So, it's time to add functionality of the button. Button is a clickable element. So, add single click action to the button element using jQuery click function.

jQuery Code
$(document).ready(function() {
    $("#showdisplay").css("display","none")
    $("button").click(function() {

    });
});

Nevertheless, button does not return any result because button is initiated to click not to function. Our object here is to display the hidden content when user requests our site to display the hidden content by clicking on the button. It can only be obtained by using jQuery show() method. jQuery show() method has to be added to element. in our example, showdisplay id is our targeted selector because it holds the content and hides it initially using css() method. So, add show() method to selector in jQuery script as given below.

jQuery Code
$(document).ready(function() {
    $("#showdisplay").css("display","none")
    $("button").click(function() {
        $("#showdisplay").show("value")
    });
});

The principle functioning script is developed but it does not work because value has to be specified in show() method in script. As you know, jQuery show() method accepts three types of values. According to the value given to the show() method, it displays the hidden content based on the time.

value: slow

Insert ‘slow' in value place in show() in final principle script and place the entire script in head section of the web document.

jQuery Code
$(document).ready(function() {
    $("#showdisplay").css("display","none")
    $("button").click(function() {
        $("#showdisplay").show("slow")
    });
});

Click on button in below browser's preview and you observe the loading of hidden content in same browser. Button element instructs the p tag's id attribute through jQuery script to display the hidden content in browser slowly as demonstrated below but it loads the hidden content at normal speed.


Demo Image


value: fast

Now insert a term ‘fast' in value's place of show() in jQuery script as given below.

jQuery Code
$(document).ready(function() {
    $("#showdisplay").css("display","none")
    $("button").click(function() {
        $("#showdisplay").show("fast")
    });
});

Click on button in browser's window and it loads the hidden content faster when compared to previous example.


Demo Image


value: time

slow and fast values show the hidden content at its respective speed. The show() effect also works for user specified time. In this example, 10000 milliseconds are given in the place of value of show() as given in below code box.

jQuery Code
$(document).ready(function() {
    $("#showdisplay").css("display","none")
    $("button").click(function() {
        $("#showdisplay").show(10000)
    });
});

jQuery show() script loads the hidden content in 10 seconds when user clicks on below button in browser's preview.


Demo Image

jQuery show() effect is used by the programmers to display the hidden content as demonstrated in above three examples. You can now use show() method in your jQuery scripts easily.

Follow Us
Google Plus Facebook Twitter RSS YouTube
Subscribe via Email
Save or Share This jQuery Tutorial with Your Friends
Save or Share jQuery Tutorial