revealElement CitySessies

eerst.html

<div class="revealElement" title="Klik hier">
extra inhoud
</div>

... zorgt voor ...

<a href="#">Klik hier</a>
<div class="revealElement" title="Klik hier">
extra inhoud
</div>

... waarbij de div display none is en de link de div toggled

nu.html

<div class="revealElement" id="revealElementSomeName">
extra inhoud
</div>

<p>blah <a href="#" id="revealElementSomeNameLink">foo</a> bar</p>

... waarbij er geen extra link wordt toegevoegd en de bestaande link wordt gebruikt (om de div aan en uit te zetten)

script.js

function revealElements() {
	$('.revealElement').each(function(){
		var self = this;
		$(this).hide();
		
		var customRevealLink = $('#' + $(this).attr('id') + 'Link');
		if (customRevealLink.length) {
			$(customRevealLink).click(function(event) {
				event.preventDefault();
				$(self).toggle(100);
			});
		}
		
		else {
			var revealElementLinkTitle = $(this).attr('title');
			var revealElementLink = $('<p><a class="revealElementLink" href="#show">'+ revealElementLinkTitle +'</a></p>');
			$(this).before(revealElementLink);
			$(this).prev().click(function() {
				$(this).next().toggle(100);
			});
		}
	});
}
revealElements();