How do I bind actions to links in jQuery?

Question

Hi there,

I'm working on a website which has a thumbnail navigation on it's about us page, and for each person you click their profile is displayed inside the same box. Then by clicking "close" at the bottom of the profile it takes you back to the thumbnails.

So far I have the following divs...

<div class="container">

    <div class="thumbnails"></div>
    <div id="profile-1"></div>
    <div id="profile-2"></div>
    <div id="profile-3"></div>
    <div id="profile-4"></div>

<div>

Inside the div named "people" I have...

<ul>
    <li class="thumbnail-1"><a href="#">Profile 1</a></li>
    <li class="thumbnail-2"><a href="#">Profile 2</a></li>
    <li class="thumbnail-3"><a href="#">Profile 3</a></li>
    <li class="thumbnail-4"><a href="#">Profile 4</a></li>
</ul>

My thinking was to position all divs absolutely so they are on top of one another and then hide all profiles on document load.

Then when a thumbnail is clicked bind a display: block and z-index: 100 to the corresponding profile forcing the profile to display on top of the thumbnails.

My question is would this be the best way to do this? What jquery would I need to generate this behavior so that it removes the css properties created when the close button is clicked?

Many thanks for your time and help.

Answer 1

Don't do that. Just show/hide them as you need to:

$("#thumbnails a").click(function() {
  var id = "profile" + this.id.substring(1);
  $("#container").children().hide();
  $("#" + id).show();
  return false;
});

assuming the following, which has slightly changed it:

<div id="container">
  <div class="thumbnails"></div>
  <div id="profile-1"></div>
  <div id="profile-2"></div>
  <div id="profile-3"></div>
  <div id="profile-4"></div>
<div>

and

<ul id="thumbnails">
  <li><a id="t-1" href="#">Profile 1</a></li>
  <li><a id="t-2" href="#">Profile 2</a></li>
  <li><a id="t-3" href="#">Profile 3</a></li>
  <li><a id="t-4" href="#">Profile 4</a></li>
</ul>

The reason for this is you want to put as little marker HTML in as possible. You could further change this by removing the IDs from the links if you can assume that you can infer the ID from the position within the list. That's just one possible alteration.

The use of IDs seems appropriate when you're marking page elements like container and thumbnails as well. Plus ID lookup is much, much faster than the alternatives.

Answer 2

Try Demo

I just realized you wanted the total opposite of what I initially put, but for one: it would be good to name your id of your divs the exact name for your anchor tag as text so, and also in order to have a text to click on something must be inside your div:

<div id="container">
 <div class="thumbnails"></div>//I don't even use this, so if you don't use it for something else you can get rid of this line
 <div id="Profile-1">first one</div>
 <div id="Profile-2">second one</div>
 <div id="Profile-3">third one</div>
 <div id="Profile-4">fourth one</div>
</div>
<ul id="thumbnails">
 <li><a href="#">Profile-1</a></li>
 <li><a href="#">Profile-2</a></li>
 <li><a href="#">Profile-3</a></li>
 <li><a href="#">Profile-4</a></li>
</ul>

$(function(){
 $('#container').hide(); //hide the links in the list
 $('#thumbnails a').click(function(){  // bind the li's click event
 var id = $(this).text();
 $("#container div").each(function() {
   if($(this).attr("id") == id)
   {
    $(this).show().parent().show();
   } 
   else
   {
     $(this).hide();
   }
  });
 });
});

Answer 3

You could also try modifying your HTML in the way that the profile and the thumbnail are in the same construct.

<ul>
    <li class="person">
        <div class="thumbnail"></div>
        <div class="profile"></div>
    </li>
</ul>

You could still use absolute positioning for the div.profile:s, but your javascript would be easier (and without any string manipulation needed) since you only need to find a sibling element.

$('div.thumbnail').click(
    $('div.profile').removeClass('visible'); // hide any visible profiles
    $(this).siblings('div.profile').addClass('visible'); // show the adjacent profile
);

(The above example assumes that the div.profile.visible css-class is used to show a profile.)