designing4u.de Yet Another Coding Blog

jQuery – show / hide button for multiple div containers with AJAX and JSON

This time I will consider another case of loading content into div containers using jQuery, AJAX and JSON request. In an other example I showed you how you can simply load content into one div container using AJAX and provide a user show and hide button.

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!