jQuery combine statements? (follow up)

Thanks for the help on my previous post, @AndyE, your solution works great.

now for my follow up, same idea, different function(s)...i tried to implement your previous solution, but couldnt get it to work right...:

$(document).keypress(function(e) {  
    if (e.which == 27) { 
     $('#timeline-2010-1').hide(); 
     $('#timeline-2010-2').hide();
     $('#timeline-2010-3').hide();
     $('#timeline-2010-4').hide();
     $('#timeline-2010-5').hide();
     $('#timeline-2010-6').hide();
     $('#timeline-2010-7').hide();
     $('#timeline-2010-8').hide();
     $('#timeline-2010-9').hide();
     $('#timeline-2010-10').hide();
     $('#timeline-2010-11').hide();
     $('#timeline-2010-12')开发者_运维知识库.hide();
     $('#timeline-2010-13').hide();
     $('#timeline-2010-14').hide();
     $('#timeline-2010-15').hide();
     $('#timeline-2010-16').hide();
     $('#timeline-2010-17').hide();

    } 
}); 


$('a.close').click(function() {  
     $('#timeline-2010-1').hide();  
     $('#timeline-2010-2').hide(); 
     $('#timeline-2010-3').hide(); 
     $('#timeline-2010-4').hide();  
     $('#timeline-2010-5').hide();
     $('#timeline-2010-6').hide();
     $('#timeline-2010-7').hide();
     $('#timeline-2010-8').hide();
     $('#timeline-2010-9').hide();
     $('#timeline-2010-10').hide();
     $('#timeline-2010-11').hide();
     $('#timeline-2010-12').hide();
     $('#timeline-2010-13').hide();
     $('#timeline-2010-14').hide();
     $('#timeline-2010-15').hide();
     $('#timeline-2010-16').hide();
     $('#timeline-2010-17').hide();
     return false;  
  });


});

I would give those elements a class, e.g.:

<div id="#timeline-2010-1" class="timelineNode">Stuff</div>

Then you can slim it down to:

$(function() {
  $(document).keypress(function(e) {  
    if (e.which == 27) { 
      $('.timelineNode').hide(); 
    } 
  }); 
  $('a.close').click(function() {  
    $('.timelineNode').hide(); 
    return false;  
  });
});

Try using the "[attr^='val']" selector pattern (effectively a starts-with).

$('a.close').click(function() {  
     $("[id^='timeline-2010-']").hide();  
     return false;  
  });

$(function() {
    $(document).keypress(function(e) {
        $('[id^=timeline-]').hide();
    });

    $('a.close').click(function() {  
        $('[id^=timeline-]').hide();
        return false;
    });
});

or simply give those elements a common class and use a class selector.

If you are wanting to close all of the open elements on escape or close link try the following:

<script>
$(document).ready(function()
{ 
    $("a.timeline-2010").click(function() 
    {
        $(this).parent().children("div.timeline-2010").show();
        return false;
    });
    $(document).keypress(function(e) 
    {
        // firefox and IE for escape key
        if (e.which == 27 || e.which == 0) 
        { 
            // hide all of the divs
            $('div.timeline-2010').hide(); 
        } 
    }); 
    $('a.close').click(function() 
    {  
        $('div.timeline-2010').hide(); 
        return false;  
    });
});
</script>

My HTML is below:

<div>
  <a class="timeline-2010" href="#">blah</a>
    <div class="timeline-2010" style="display: none;"><a href="" class="close">Close</a>
        Stuff that is hidden to be shown
    </div>
</div>
<div>
  <a class="timeline-2010" href="#">blah</a>
    <div class="timeline-2010" style="display: none;"><a href="" class="close">Close</a>
        Stuff that is hidden to be shown
    </div>
</div>
<div>
  <a class="timeline-2010" href="#">blah</a>
    <div class="timeline-2010" style="display: none;"><a href="" class="close">Close</a>
        Stuff that is hidden to be shown
    </div>
</div>