21 December 2009
Web Trend : Tab Triggers
I was recently wandering around the web, and stumbled upon on what seems to be an emerging trend - "Tab Triggers". In a nutshell, a page contains a trigger object that when clicked it reveals more content to the page viewer.
The effect is fairly simple to create with jQuery, and it provides a nice way to stash some extra information on your page that may ( or may not ) be valuable to your visitor.
Below is a simple example of how to build Tab Triggers in HTML and JS:
DEMO
CODE
<!-- JS -->
<script>
$(document).ready(function(){
$('#tab-trigger').click(function(){
$('#tab-content').slideToggle();
return false;
});
});
</script>
<!-- HTML -->
<div>
<a href="/link-to-content/" id="tab-trigger">trigger object</a>
</div>
<div id="tab-content" style="display: none;" >
SURPRISE! MORE CONTENT
</div>
EXAMPLES
tweet this ::
stats