Tabs with jQuery

jQuery tabs are an efficient way to show content like Most Recent Articles or Most Recent Comments in one place. You can read a lot about the jQuery UI Tabs widget at their site, http://jqueryui.com/demos/tabs/

Here is an example jQuery tab (see the chapters on Most Recent Articles or Most Recent Comments to see how those are generated):

Here's the jQuery part:

$(function(){
  $('#container-1 ul').tabs();
});

The rest is done inside Newscoop templates.
Here's the logic:

<div id="container-1">

<ul>
  <li><a href="#fragment-1">Title 1</a></li> {{* first tab title *}}
  <li><a href="#fragment-2">Title 2</a></li> {{* second tab title *}}
</ul>

<div id="fragment-1">
  {{* first tab content *}}
</div>

<div id="fragment-2">
  {{* second tab content *}}
</div>

</div>

And here's the actual example:

<div id="container-1">

<ul>
  <li><a href="#fragment-1"><span> </span></a></li> {{* first tab title *}}
  <li><a href="#fragment-2"><span> </span></a></li>  {{* second tab title *}}
</ul>

<div id="fragment-1">  {{* first tab content *}}
{{set_section number="1"}}
{{list_articles length="12" constraints="onfrontpage is off onsection is on" ignore_issue="true"}}
  <h4><a href="{{uri options="article"}}">{{ $campsite->article->name}}</a>{{if $campsite->article->has_video}}<i class="ico video"></i>{{/if}}{{if $campsite->article->has_photo}}<i class="ico photo"></i>{{/if}}{{if $campsite->article->has_audio}}<i class="ico audio"></i>{{/if}}</h4>
  <p class="container-date">{{$campsite->article->publish_date|camp_date_format:"%d %M %Y."}}</p>
  <p>{{$campsite->article->Intro_front}}{{if $campsite->article->comment_count>0}}<a href="{{uri options="article"}}#comments" class="comments_counter">{{$campsite->article->comment_count}}</a>{{/if}}</p>
{{/list_articles}}
{{set_default_section}}
</div>

<div id="fragment-2">  {{* second tab content *}}
{{local}}
{{unset_issue}}
{{list_issues length="2" order="bynumber desc"}}
{{list_sections constraints="number greater 9 number smaller 70"}}
  {{list_articles length="4" constraints="topic is \ :ru" order="bynumber desc"}}
  <h4><a href="{{uri options="article"}}">{{$campsite->article->name}}</a>{{if $campsite->article->has_video}}<i class="ico video"></i>{{/if}}{{if $campsite->article->has_photo}}<i class="ico photo"></i>{{/if}}{{if $campsite->article->has_audio}}<i class="ico audio"></i>{{/if}}</h4>
  <p class="container-date">{{$campsite->article->publish_date|camp_date_format:"%d %M %Y."}}</p>
  <p>{{$campsite->article->intro}}{{if $campsite->article->comment_count>0}}<a href="{{uri options="article"}}#comments" class="comments_counter">{{$campsite->article->comment_count}}</a>{{/if}}</p>
  {{/list_articles}}
{{/list_sections}}
{{/list_issues}}
{{/local}}
</div>

</div>