Question

I have a container element which can be expanded upon being clicked.
This container contains some child tags.
When these child tags are reached whilst tabbing through the elements on the page I would like the container to expand to show them.

To do this I have written the following function…

$("#inlineSummaryWrapper a").focus(function(){
  $("#inlineSummaryWrapper").animate({"height":"100px"})
  });

However this doesn’t work!

If a better coder than myself could help, I would appreciate it.

Thanks in advance.

EDIT to add example markup:

<div id="inlineSummary" class="displayToggle">
  <h2>Summary</h2>
  <div id="inlineSummaryWrapper">
   <dl>
    <dt>Product:</dt>
    <dd class="define"> <span class="NA"><a href="product.aspx" tabindex="92">Required</a></span> </dd>
   </dl>
  </div>
 </div>

Answer 1

This seems to work fine:

<style type="text/css">
#inlineSummaryWrapper {
    height: 50px;
    background-color: #000;
}
</style>

<div id="inlineSummary" class="displayToggle">
    <h2>Summary</h2>
        <div id="inlineSummaryWrapper">
        <dl>
            <dt>Product:</dt>
            <dd class="define"> <span class="NA"><a href="#" tabindex="92">Required</a></span> </dd>
        </dl>
    </div>
</div>

<script type="text/javascript">
$("#inlineSummaryWrapper a").focus(function(){
     $(this).closest("#inlineSummaryWrapper").animate({"height":"100px"});
    return false;
});
</script>

If your javascript is above the divs, wrap it inside a:

$(document).ready(function(){
//javascript here
});

So that it fires off once the DOM has finished loading.

http://jsfiddle.net/YgjzD/6/