designing4u.de Yet Another Coding Blog

jQuery – show / hide button with AJAX functionality

Recently I had to provide a really simple and easy solution for showing and hiding some information, which should be triggered on users' click. I didn't have to think for a long time, how I will solve this problem and the framework I choose was obviously jQuery. In this example I will show you, how to trigger AJAX request and load some data into a div container and toggle between functions called every other click.

Here is an example how our final solution will look like:

show

Let's break it into pieces.
[source:javascript]
$(document).ready(function(){
$('.link').toggle(
function () {
if($('#box').text() == '') {
$.ajax({
url:'your_file.txt',
method:'GET',
success:function(r) {
$('.link').html('hide');
$('#box').html(r).hide().slideDown(1000);
},
error:function() {
alert('file does not exist');
}
});
} else {
$(this).html('hide');
$('#box').slideDown(1000);
}
},
function () {
$(this).html('show');
$('#box').slideUp(1000);
}
);
});

[/source]
Because we want to write unobtrusive code, we want that our code should be executed whenever the DOM is ready. On each element with class 'link' we will toggle between two functions. In the first function we check, if our element with id 'box' is empty. If it is we use AJAX request to load the content from a remote file (in our case your_file.txt). For that reason you can use any other file. You can even pass parameters and request content relevant only for your case. For that reason you would have to add extra parameter 'data' in AJAX request of this function.

If the request was successful, we replace 'show' with 'hide', past the requested content in our container with id 'box', hide it and slide it down to get a nice visual effect. If this request retrieves an error, an alert box with information that the file wasn't found will be displayed. This function does the if - else check only because we want to do the AJAX request only once.

The second function is pretty simple. It basically replaces 'hide' with 'show' again and it slides up our div container. If a user clicks on 'show' button again, we wont need to use AJAX request anymore, because the text was already past in our DOM. Here is the HTML and CSS code for the body section of our document:
[source:HTML]

show

[/source]
If you want a nice effect of an arrow pointing up or down depending on the case, you can extend this function with some class replacements. Have fun with playing around with this one.