Utilize the following code:
<aside id="side">
<div class="navigation"><a href="#home">Home</a> </div>
<div class="navigation"><a href="#about"> About</a> </div>
<div class="navigation"><a href="#contact"> Contact </a></div>
<div class="navigation"><a href="#awards"> Awards </a></div>
<div class="navigation"><a href="#links"> Links </a></div>
</aside>
Now, make changes to this section of code:
showViaLink($("aside .navigation a"));
If you're unable to access the link in your old code, consider making adjustments so that $(this).click(function() is properly triggered.
You can add custom CSS to style your buttons. This button generator may come in handy.
UPDATE:
To use the buttons, try this updated code:
<aside id="side">
<div class="navigation" id="#home"><a href="#home">Home</a> </div>
<div class="navigation" id="#about"><a href="#about"> About</a> </div>
<div class="navigation" id="#contact"><a href="#contact"> Contact </a></div>
<div class="navigation" id="#awards"><a href="#awards"> Awards </a></div>
<div class="navigation" id="#links"><a href="#links"> Links </a></div>
</aside>
jQuery:
showViaLink($("aside .navigation"));
// shows proper DIV depending on link 'href'
function showViaLink(array)
{
array.each(function(i)
{
$(this).click(function()
{
var target = $(this).attr("id");
$(".container").css("display","none");
$(target).slideDown("slow");
});
});
}