Hide and Show a Text Using jQuery – Example

By | February 26, 2011

With jQuery manipulation of HTML & CSS can be done very easily.
Here we are going to show how to Hide a line of text using jQuery & Show it back also.
Let’s code speak first….


<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">




<p>Hey! Click 'Left', I will vanish! Click 'Right', I will be back!</p>

<button id="hideButton">Left</button>
<button id="showButton">Right</button>

Note : Download and put ‘jquery.js’ on your working folder before trying out!

What these code did?

Here we have one line text, html paragraph. Two buttons ‘Left’ & ‘RIght’ and whose id’s

are ‘hideButton’ & ‘showButton’ respectively.

jQuery code identifies which button we clicked using the button id’s mentioned above and

apply the hide() or show() function to the html paragraph p.


One thought on “Hide and Show a Text Using jQuery – Example

  1. buttonpush

    You’ve got great insights about buttonpush, keep up the good work!


Leave a Reply

Your email address will not be published. Required fields are marked *