In this example I want to consider a different case. Sometimes you don't only have one div container which needs to be filled out with content but multiple containers which need to be filled out with content according to the link which was clicked by the user. Again we will provide a functionality of changing the label of our button. We will extend this example by handling a larger amount of data in our response. For that reason we will use build in functionality of jQuery to handle JSON requests.



After we will be done, our final solution should look more or less like that:

show 1
show 2
show 3

Here is the jQuery code we will use in this example.

1. Our jQuery code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

$(document).ready(function(){  
  $('.ahref',this).toggle(
    function () {
      var id = $(this).attr('href');
      if($('.box'+id).text() == '') {  
        $.getJSON('json.php',{id:id},function(data){  
          $.each(data, function(i,item){  
            var user_name = item.user_name;
            var user_desc = item.user_desc;
            var html = user_name+" "+user_desc;
            $(".box"+item.id).html(html).slideDown(1000); 
          });  
        });  
        $(this).html("hide");
      } else { 
        $(this).html('hide');  
        $('.box'+id).slideDown(1000);  
      }  
    },  
    function () {  
      var id = $(this).attr('href');
      $(this).html('show');  
      $('.box'+id).slideUp(1000);  
    }  
  );
});

2. Our HTML file:

1
2
3
4
5
6
7

<a href="1" class="ahref">show 1</a>
<a href="2" class="ahref">show 2</a>
<a href="3" class="ahref">show 3</a>
<div class="box1"></div> 
<div class="box2"></div> 
<div class="box3"></div>
<div style="clear:left"></div>

3. Our PHP file:

1
2
3
4
5
6
7
8
9
10
11
12

$id = $_GET['id'];
/**
 *  Database model for retrieving user data etc.
 */
$user = array(
  array(
    'id'        => $id, 
    'user_name' => 'ImUser '.$id, 
    'user_desc' => 'description of a user '.$id.' etc.'
  )
);
echo json_encode($user);

I don't want to waste your time, therefore I will directly move to explaining the code. We are using toggle to switch between functions each time a user clicks on a link. We use the href attribute of our link to save the corresponding id of an object we want to receive. You can use the href attribute to save all the data you can imagine, it is just important to handle it before processing to AJAX request.

In the first function we check, if our div box is empty, to prevent from loading the same content for multiple times. If our div container is empty we use AJAX to retrieve remote data and using the php function json_encode we encode our array to a JSON object. We process the response to display it correctly for the end user and we paste it in corresponding div container. We slide it down to give a nice visual effect and replace the text of the link to "hide".

If our div box contains a text, we simply slide it down. Do not hesitate to delete the if else statement and load the content every time a user clicks a link however, if you have many visitors on your site, it might lead to performance issues.

In our second function we simply hide the content of the div container by sliding it up and we replace the text of the link to show. I'm defining the id of the link every time the function is called, but you can remove it. I'm just using it show you the id of the link you currently clicked on.

I hope this will help you farther with handling multiple div containers. I wrote this post really quickly and did not have time to check it, therefore if you find any mistakes, please inform me about them. Cheers!

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.