How Can I Add “Show More Links Tab”

See more:

Javascript

HTML

jQuery

TPL

How can I add "show more links tab" after showing 10-15 links instead of showing 100-200 links? I want to show only 10-15 links at first and then when somebody clicks show the rest of the hidden links to save page space.

{if $listing_styles.links}
  <div id="link_list" {if $listing_styles.embeds}style="display:none"{/if}>
    {foreach from=$thisepisode.embeds key=id item=val name=titles}

      <div class="span-16 inner-16 notopmargin embed-selector" style="background: #F1F2F1 removed('{$embed_languages[$val.lang].flag}') 15px 17px no-repeat;" >

        <h5 class="left">
          {$embed_languages[$val.lang].language}
          {if $val.type} - 
            <a class="link" href="java<!-- no -->script:void(0);" {if $smarty.foreach.titles.first}class="current"{/if} id="selector{$val.id}"><span>{$val.type}</span></a>
          {/if}
        </h5>

        <ul id="filter" style="width:200px;float:right;margin-removed 0px;">
          {if $val.link}
            {if $global_settings.adfly.id}
              <li class="current" style="float:right">
                <a href="http://**f.ly/{$global_settings.**fly.id}/{$val.link|replace:"http://":""}" target="_blank">{$lang.open_video}</a>
              </li>
          {else}
              <li class="current" style="float:right">
                <a href="{$val.link}" target="_blank">{$lang.open_video}</a>
              </li>
            {/if}
          {/if}
        </ul>
      </div>

    {/foreach}
  </div>
{/if}