Question

I’m trying to dig into jQuery but would like some feedback on how to do things the best way,

I have a list with items, which each contains a hidden div that should show upon click on it’s parent,

list
  div:ed item1 with link
    hidden div
  div:ed item2 with link
    hidden div
  ..

My current solution is to trace the calling link by it’s id and then reusing that ID for showing the correct hidden one:

$(document).ready(function() {
  //jQ should only trigger on links with id="cmLinkINT"
  $("a").click(function() {
    //see if it's a comment request.
    var s = $(this).attr("id");
    if (s.indexOf('cmLink') != -1) {
      //ok, it was a 'show'-link, get the id..
      var j = s.substring(6);
      //ok, now I have the id i want to show (detailsINT)
      return false;
    }    
  });
});

What’s not clear to me is the best approach,

• Should I use id for requesting a or trace the id of the parent div.

• How to avoid that the code triggers on any link? Class?

UPDATE

html example:

<div class="unit"> 
  <img class="unitImg" src="imgcache/some.jpg" width="98" height="98" alt="some"/> 
  <div class="unitInfo"> 
    <h1>my unit</h1> 
    <h2>/further..</h2> 
    <p><a href="#" class="showDetails">show details...</a></p> 
    <div style="visibility: hidden;" id="unitDetails2"> 
      <p>peekaboo...</p>
    </div> 
  </div> 
</div> 
<div class="unitGap"></div> 

<div class="unit" ...>

Thankful for any feedback,

regards

//t

Answer 1

I suggest you put a class on the anchors that are meant to show the hidden div.

So, your jquery would be (where ‘reveal’ is the class):

$("a.reveal").click(function() {
  $(this).next("div").show();
  return false;
});

Or, you could use toggle to show / hide on multiple clicks

$("a.reveal").toggle(function() {
  $(this).next("div").show();
  return false;
});

Note: I’m assuing that the hidden div is a sibling of the anchor that shows it. Perhaps post your actual markup.