SO fiddle

Test Fiddle mainly for SO Questions

by Nick Craver

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/overcast/jquery-ui.css">
<div id="listings">
  <dl class="listings">
    <dt>
      Get the Milk
    </dt>
    <dd>
      Due Date: 17th Oct
    </dd>
    <dd>
      <a href="#" class="more">more details 2</a>
    </dd>
    <dd>
      <a href="#">mark as complete</a>
    </dd>
  </dl>
  <div class="more_details">
    <p>
      This is some details about the task that I would to have appear when
      the more details 1 link is clicked
    </p>
  </div>
  <dl class="listings">
    <dt>
      Go to Work
    </dt>
    <dd>
      Due Date: 22th Oct
    </dd>
    <dd>
      Site: None
    </dd>
    <dd>
      <a href="#" class="more">more details 2</a>
    </dd>
    <dd>
      <a href="#">mark as complete</a>
    </dd>
  </dl>
  <div class="more_details">
    <p>
      This is some details about the task that I would to have appear when
      the more details 2 link is clicked
    </p>
  </div>
</div>

CSS

.more_details { display: none; }

JavaScript

$('#listings .more').click(function(e) {
  $(this).closest('.listings').next('.more_details').slideToggle('fast');
  e.preventDefault();
});