// JavaScript Document


$(document).ready(function() {
 // hides the showcase articles "more" sections as soon as the DOM is ready
 // they must all share the same class name so we can hide them with one statement.
  $('div.more_article').hide();
  // When there is no script running, this next part will not show since all divs are expanded by default.
  // Append text to show that the divs can expand. 
  $('a.more').append(' (Read the whole story) ');
   $('a.close_more').append(' (collapse this story) ');



// add class to link to set off the toggle
$('div#show_1st_feature a.toggle').addClass('first_feature'); 
$('div#show_2nd_feature a.toggle').addClass('second_feature'); 
$('div#show_3rd_feature a.toggle').addClass('third_feature'); 


// add class to identify the section to toggle
$('div#show_1st_feature div.more_article').addClass('feat1'); 
$('div#show_2nd_feature div.more_article').addClass('feat2'); 
$('div#show_3rd_feature div.more_article').addClass('feat3'); 




 // toggles the "more" section when user clicks link  
 // They each have a unique ID or class to only toggle one section at a time.
 
 
  $('a.first_feature').click(function() {
		$('.feat1').toggle(400);
    return false;
  });
  
    $('a.second_feature').click(function() {
		 $('.feat2').toggle(400);
    return false;
  });
  
    $('a.third_feature').click(function() {
    	$('.feat3').toggle(400);
    return false;
  });
  
  


  

  
});