Building a Company Team Page with Dynamic Content




Any business with a large team of employees might consider publishing more detailed information online. This helps customers and clients build a deeper connection with the business, and it offers a more personal touch for each team member. It’s pretty simple to list employees into a table – but what about dynamically-driven content?

In this post I’ll demonstrate how to use jQuery to pull out information for each employee on a team page. Visitors will be able to click between employees and read more information about each one. You can also expand this technique to include further information about the job and each person’s external links onto social media platforms.

html5 css3 jquery tutorial animated team employee page layout

Live DemoDownload Source Code

Getting Started

My first step is to create an external stylesheet and download a local copy of jQuery. The script works by listing employees as image thumbnails while including hidden content inside each list item. This hidden content is pulled out via jQuery and then displayed into the bigger page section at the top.

<body>
  <div id="w">
    <h1>Meet the Team</h1>
    <p>Click any of the team member's photos to show more details.</p>
    
    <div id="teamcontent" class="clearfix">
      <img src="img/default-photo.jpg" class="bigimg" width="225" height="260">
      <div id="teamdetails">
        <h2 id="bigname">Name</h2>
        <h3 id="bigjob">Title</h3>
        <p id="bigdesc">A brief description.</p>
        
        <p><a href="javascript:void(0)">View Company Profile →</a></p>
      </div>
    </div>

The whole body is contained inside a wrapper div using the ID #w. This keeps everything centered on the page at a fixed width. Going a bit deeper we find #teamcontent which is a container div for the larger details. I’m using a clearfix class because the internal content is floated so as to appear next to each other.

Take note of the important text details which can easily be replaced using jQuery. We target the IDs like #bigname and #bigdesc to replace internal HTML with context that needs to be displayed for each person. This same technique can be used to replace the default image source – but since my demo uses the same portrait for each employee it’s not necessary.

<ul class="team clearfix">
  <li>
    <img src="img/default-photo.jpg" alt="Johnny Appleseed" width="130" height="150" class="profilepic">
    <span class="hcontent job">President/CEO</span>
    <span class="hcontent desc">Just a bunch of random text here explaining details about the person. You could include history, job responsibilities, time at the company, and maybe stuff they like to do for fun. Or make fun of them... your call.</span>
  </li>
  
  <li>
    <img src="img/default-photo.jpg" alt="Anthony LastName" width="130" height="150" class="profilepic">
    <span class="hcontent job">Founder and COO</span>
    <span class="hcontent desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consequat ligula erat, ut gravida diam blandit nec. Morbi sed ornare diam.</span>
  </li>
  
  <li>
    <img src="img/default-photo.jpg" alt="Mr. What Zit Tooya" width="130" height="150" class="profilepic">
    <span class="hcontent job">Project Manager</span>
    <p class="hcontent desc">These are pretty flexible and we could even include <strong>real HTML tags</strong>! Which also means the potential to include <a href="http://twitter.com/" target="_blank">social networking</a> links.</p>
  </li>
  
  <li>
    <img src="img/default-photo.jpg" alt="Anne Betty Chelmfield" width="130" height="150" class="profilepic">
    <span class="hcontent job">Marketing Supervisor</span>
    <span class="hcontent desc">Still awaiting content.</span>
  </li>
</ul>

Actually looking over the unordered list can help you understand how jQuery is pulling out this information. The thumbnail image within each list item is the only element displayed to the user. Whenever this image is clicked we run a new jQuery function to pull all the related .hcontent elements based on their secondary class.

So for example we can access each employee’s bio with the sibling element .desc. You might also create other span elements to hold important bits of HTML data. If you need to pull out non-HTML info(such as profile links) you could try adding a new HTML5 data-* attribute onto the image itself.

Designing the Page

All of my tutorials use a CSS reset to get the page looking similar in all browsers. Aside from these reset codes all the inner page content is built using containers and cascading styles.

/** page structure **/
#w {
  display: block;
  margin: 0 auto;
  width: 900px;
  padding: 10px 25px;
  background: #fff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.3);
  -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3);
  box-shadow: 0 1px 1px rgba(0,0,0,0.3);
}

#teamcontent {
  display: none;
  margin-bottom: 15px;
}


/** team member list **/
.team {
  display: block;
}

.team li {
  display: block;
  float: left;
  margin-right: 20px;
  margin-bottom: 20px;
}
.team li:hover {
  cursor: pointer;
}

.team li.last { margin-right: 0; }

.team .hcontent {
  display: none;
}

The page wrapper has a number of CSS3 effects to appear more flashy. Everything else is fairly smooth with #teamcontent being the primary section at the top. Inside the .team element each list item is floated left before breaking down onto a new line. I’ve included an optional class of li.last to apply onto the last item in each row.

It’s important to note that each list item has an image which is clickable, but no anchor link. We get the hand cursor effect using cursor: pointer on the entire list item. Also since all the .hcontent elements need to stay hidden I’m using the CSS display: none property which works perfectly.

/** hidden team content **/
#teamcontent .bigimg {
  display: block;
  float: left;
}

#teamdetails {
  display: block;
  float: left;
  width: 600px;
  padding-left: 15px;
}

Not much of the page is controlled via CSS aside from the basic elements. The .bigimg portrait is floated left along with the #teamdetails container. This secondary container needs a fixed width or else the bio paragraph will attempt wrapping onto a new line beneath the image. If you’re using a responsive layout try adjusting the width value to use percentages, or continually update with a new pixel value at different breakpoints.

Dynamic Content with jQuery

Let’s tie this all together with some JavaScript located at the bottom of my index file. It’s not very complicated but I’ll explain the whole script broken down into code blocks.

$(function(){
  $('.profilepic').on('click', function(e){
    var $biginfo = $('#teamcontent');
    var $bigname = $('#bigname');
    var $bigjob  = $('#bigjob');
    var $bigdesc = $('#bigdesc');
    
    var newname = $(this).attr('alt');
    var newrole = $(this).siblings('.job').eq(0).html();
    var newdesc = $(this).siblings('.desc').eq(0).html();

The first block of variables are preceded with a dollar sign($). This indicates we’re targeting an object on the page and each variable holds a unique jQuery object. It’s good practice to define repeated elements so we aren’t using the jQuery $() selector over and over again.

The secondary block of variables will define the employee’s name, job title, and brief description. I saved each person’s name as the alt text within each image so it’s pretty simple to obtain. The other variables rely on jQuery’s .siblings() method to select related sibling elements.

Unfortunately .siblings() will always return a list of elements and we only need the first instance. This can be remedied by using .eq() and passing 0 to obtain the very first entry. If you create other hidden content elements then you’ll want to use this same technique for pulling out the HTML data.

    $bigname.html(newname);
    $bigjob.html(newrole);
    $bigdesc.html(newdesc);
    
    
    if($biginfo.css('display') == 'none') {
      $biginfo.slideDown(350);
    }
  });
});

Skimming this final block of code we can see how all the variables get put to use. First I’m targeting the name, job title, and description objects to be replaced with the new employee’s info. If the dynamic content area is already visible then this should be enough.

But when the page first loads, this bigger content area is hidden to save room. So I’m checking the CSS of this #teamcontent element to see if the display property is set to “none”. If true then we need to display it so the visitor can actually read all this updated information. I’ve gone with the .slideDown() method but you could try using another predefined effect – or even write your own display animation with .animate().

html5 css3 jquery tutorial animated team employee page layout

Live DemoDownload Source Code

Closing

I think this is a rudimentary technique in regards to frontend web development. But for such a tiny script this effect is phenomenal at grabbing your audience’s attention. It is usually best to keep individual photos of each employee at a larger resolution so the page can be resized and still keep a nice content flow. Feel free to download a copy of my source code and drop a comment if you have any questions or suggestions about the article.





About the author:

Jake is a creative designer, illustrator, and web developer. He frequently writes articles involving new-age design concepts and freelance management skills. You can find him in Google or follow his tweets @jakerocheleau

Comments:

Scroll back to the top