jQuery Sliding Divs – Part 2

Today I am going to continue working with the sliding divs I created few weeks back. If you wish to read the tutorial, please see jQuery Sliding Divs – Part 1.

Clients often request to have several links in a navigation linking to the same page but a different section. For example, In a navigation I have the links ‘Web Designer‘ and ‘Web Developer’. If I click the ‘Web Designer’ link it will take me to the team.php page but to the ‘Web Designer’ section. If I click the ‘Web Developer’ link it will take me to the same page but to the ‘Web Developer’ section.

As discussed in the previous tutorial, too much content can make a web page look untidy and requires the user to endlessly scroll down to find the desired text. So, it would be good if I used the jQuery sliding divs from part 1. This is all well and good, but when the user clicks a link and gets redirected to the next page – the content will be hidden in hidden div containers. To get around this, I need to use some PHP to pass some data to the next page allowing the jQuery to slide down the related div.

View Demo »

Step one – Creating the Navigation

<ul>
        <li><a href="page2.php?box=box1">Div 1</a></li>
        <li><a href="page2.php?box=box2">Div 2</a></li>
        <li><a href="page2.php?box=box3">Div 3</a></li>
</ul>

Here I have created an unordered list with three links to page2.php. I hard coded a query string on each link defining the value of box.

Link 1: box = box1, Link 2: box = box2, Link 3: box = box3

Note: All these pages need to have the .php extension.

Step Two – Creating Page 2

Add the php below to the top of page 2. What this php code does is collect the value of ‘box’ by using the $_GET function.

<?php
if (isset($_GET['box'])) {
  $val = $_GET['box'];
} else {
  $val = 'box1';
}
?>

Step Three – Adding The Sliding Divs

Add the following code to the body section of your website design. This is very similar to what was done in part 1 of this tutorial. I also created a class which is equal to the value collected by the $_GET function.

<div class="div-top"><h3 class="<?php echo $val ?>">Title 1</h3></div>
<div id="div1"><p>This is the hidden div</p></div>
<div class="box-top"><h3 class="<?php echo $val ?>">Title 2</h3></div>
<div id="div2"><p>This is the hidden div</p></div>
<div class="box-top"><h3 class="<?php echo $val ?>">Title 3</h3></div>
<div id="div3"><p>This is the hidden div</p></div>

Add some basic styling in the head:

<style type="text/css">
.div-top { width: 500px; height: 40px; background: red; margin: 10px 0 0; }
#div1 {width: 500px; height: 300px; background: black; color: white; display: none; }
#div2 { width: 500px; height: 300px; background: black; color: white; display: none; }
#div3 { width: 500px; height: 300px; background: black; color: white; display: none; }
</style>

Step Four– Adding The jQuery

Add the following jQuery into the head section of your web design page. This code gets the value of the h3 class i.e. ‘div2′ and slides down the div which is equal to that value i.e. ‘#div2′.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
     var $val = $('h3').attr('class');
     $('#' + $val).slideDown(400);
     $('.box-top').click(function(){
          $(this).next().slideToggle(400);

     });
});
</script>

Now upload both files to your server, navigate to page one and click one of the links. You should notice if you click link two it will slide down div two on the next page and so on. I hope you found this tutorial useful.