Как создать простую загрузку больше в javascript

Question

У меня есть много слов в элементе html. Я хочу показать от 4 до 5 слов и скрыть все слова, когда нажимаю на ссылку. Все слова покажут, как я могу это сделать с помощью javascript, вот мой html код

<dd id="hide_actors"> 
    <a rel="tag" href="http://link.com/archives/actors/archie-adamos">Archie Adamos</a>, 
    <a rel="tag" href="http://link.com/archives/actors/brad-johnson">Brad Johnson</a>, 
    <a rel="tag" href="http://link.com/archives/actors/eric-hahn">Eric Hahn</a>, 
    <a rel="tag" href="http://link.com/archives/actors/frederick-bailey">Frederick Bailey</a>, 
    <a rel="tag" href="http://link.com/archives/actors/jeff-griffith">Jeff Griffith</a>, 
    <a rel="tag" href="http://link.com/archives/actors/jesse-metcalfe">Jesse Metcalfe</a>, 
    <a rel="tag" href="http://link.com/archives/actors/josie-bissett">Josie Bissett</a>, 
    <a rel="tag" href="http://link.com/archives/actors/keegan-connor-tracy">Keegan Connor Tracy</a>, 
    <a rel="tag" href="http://link.com/archives/actors/ken-metcalfe">Ken Metcalfe</a>, 
    <a rel="tag" href="http://link.com/archives/actors/mark-venturini">Mark Venturini</a>, 
    <a rel="tag" href="http://link.com/archives/actors/matthew-settle">Matthew Settle</a>, 
    <a rel="tag" href="http://link.com/archives/actors/meghan-ory">Meghan Ory</a>, 
    <a rel="tag" href="http://link.com/archives/actors/rick-dean">Rick Dean</a>, 
    <a rel="tag" href="http://link.com/archives/actors/romy-diaz">Romy Diaz</a>, 
    <a rel="tag" href="http://link.com/archives/actors/ruben-ramos">Ruben Ramos</a>, 
    <a rel="tag" href="http://link.com/archives/actors/vernon-wells">Vernon Wells</a>, 
    <a rel="tag" href="http://link.com/archives/actors/virginia-madsen">Virginia Madsen</a> 
</dd> 

Answer 1

Попробуйте

Добавить новый якорь, чтобы загрузить более

<a href="javascript:;" id="loadmore">Load more</a> 

Script

$(function(){ 
     $('#hide_actors').find('a').each(function(index,item){ 
      if(index>3){ 
       $(item).hide();  
       $(item).next('span').hide(); 
      } 
     }) 
     $('#loadmore').click(function(){ 
      $('#hide_actors a').each(function(index,item){ 
       $(item).show();  
       $(item).next('span').show('slow'); 
      }) 
      $('#loadmore').hide(); 
     }); 
    }); 

Working demo

Answer 2

использование

CSS

#hide_actors{ 
    display:none; 
} 

Javascript

$(function(){ 
    $('#show').click(function(){ 
    $('#hide_actors').show('slow'); 
    }); 
}); 

FIDDLE DEMO