“Show and Hide Html components with jQuery” vs “visible and hidden Html componets with JavaScript”

Sometimes we need to show or hide html components in our html files. I would like to show you several ways to do this through jQuery or JavaScript method:

The HMTL

<div  class="show_hide">
<a href="#">This is a link</a>
</div>
  1. Show and Hide Html components with jQuery:

    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
    <script type="text/javascript"> 
    $(document).ready(function(){ 
    //hide component 
    $(".show_hide").hide(); 
    //show component 
    $(".show_hide").show(); 
    }); 
    </script>
  2. visible and hidden Html componets with JavaScript:

    <script type="text/javascript">
    function displayText(_field, _value){
    document.getElementById(_field).style.display=_value;
    }
    
    function visibilityText(_field, _value){
    document.getElementById(_field).style.visibility=_value;
    }
    
    //hide component
    visibilityText('show_hide', 'hidden');
    displayText('show_hide', 'none');
    
    //show component
    visibilityText('show_hide', 'visible');
    displayText('show_hide', 'block');
    
    </script>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s