index.html

<h1>$section-title.data</h1>
$intro-paragraph.data

#foreach ($item in $item.siblings)
	<div class="article">
		<h3 class="action">$item.data</h3>
		$item.short.data
		#if($item.long.data !='')
			<a href="#" class="action read-more">read more</a>
		#end
		<div class="article-content">
			$item.long.data
		</div>
	</div>
#end

<style>
.article {
	position: relative;
}

a.action {
	position: absolute;
	right: 0;
	top: 0;
}
</style>

<script type="text/javascript">
AUI().use(
	'node',
	'transition',
	function(A) {
		var article = A.all('.article');
			
		article.each(function (n) {
			console.log(n);
			var header = n.all('.action');
				readMore = n.one('.read-more');
				
			var content = n.one('.article-content');
			content.toggleClass('aui-helper-hidden');
			
			header.setStyle('cursor', 'pointer');
			
			header.on('click', function (event) {
				content.toggleClass('aui-helper-hidden');
				if(content.hasClass('aui-helper-hidden')){
					readMore.html('read more');
				}else {
					readMore.html('read less');
				}
			});
		});
	}
);
</script>