Hide or show multiple form elements using jquery and fieldsets

In this tutorial I’m going to show you how you can hide or show multiple form elements in one go. That is by grouping those form elements in an html fieldset.

 

Requirements

  • jquery core

 

Procedure

First, do the housekeeping.

<style>
#full{
    width:500px;
}
</style>
<script src="jq.js">
</script>

I’m really lazy today, so I didn’t include the style and the script type. This works, but its not really a good practice.

Next, create the form elements.

<input type="button" id="hide" value="hide/show"/>

<fieldset id="full">
<legend id="full_legend">Fieldset_hideshow</legend>
<p><input type="text" name="a" placeholder="a"/></p>
<p><input type="text" name="b" placeholder="b"/></p>
<p><input type="radio" name="c"/>
<input type="radio" name="c"/>
<input type="radio" name="c"/></p>
</fieldset>

We grouped the 2 text fields and the 2 radio buttons inside the fieldset. So that we won’t be accessing those elements one by one if we want to hide/show them.

Finally, we create the script which will hide/show the fieldset and all of the elements inside of it.

<script>
$(function(){

$('#hide').click(function(){
    $('#full').toggle('fast');
    });
});
</script>

In case you don’t know toggle is just a shortcut for .show() and .hide() functions. And here’s what it does: first it checks if the element is hidden or not. Might be something like this, if you hand code it:

if($(element).is(":visible")){
    //hide it
}else{
    //stay put
} 


Conclusion

I can’t really think of a good conclusion, because it seems like I’m only repeating what I’m saying every time I make a conclusion. And what’s worst is that what I’m saying doesn’t really fit the description of a conclusion. Don’t you agree? Anyway, again thanks for reading!

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 )

Google+ photo

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

Connecting to %s