and welcome to Stack Overflow!
First off, I am going to suggest you make use of jQuery assist you with your JavaScript. jQuery (and other similar frameworks like Zepto, MooTools and Dojo) irons over some of the cracks in JavaScript such as cross browser inconsistencies and will make things a lot easier. To include jQuery in your project you just need to add the following in your page's <head> tag:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
Now you've got access to jQuery you can remove all of the onclick attributes you added to your <a> tags. The use of onclick tags is discouraged as it dates back to the early days of web development before DOM Level 1 standard was (almost) agreed upon. Instead it's suggested you bind to the 'click' event - this will help to keep your HTML and JavaScript separated and in turn make your JavaScript easier to read and debug.
jQuery makes it really easy to bind a handler (function) to a click event, you just need to use the on syntax:
// #id is the 'id' attribute of the element you want to add a click handler to.
$('#id').on('click', function () { alert("Clicked!"); });
jQuery also provides a quick and easy way to show and hide elements on the page via show and hide, here how it works:
// Again, #id is the id attribute of the element you want to show/hide.
$('#id').show(); // Make a hidden element visible.
$('#id').hide(); // Hide a visible element.
The only thing to watch out for here is that when you 'hide' an element using jQuery it actually sets the display CSS attribute of the element. In your code above, you were hiding elements by toggling the visibility attribute.
The last part of the answer lies in how we the currently visible element; this can be achieved by adding a new variable which keeps track of which element is being displayed - you can see this in my modified code below.
<html>
<head>
<style>
span.socialApp {
/* use display: none instead of visibilty: hidden */
display: none;
position:absolute;
top:20px;
left: 0;
background-color:#e9e9e9;
}
</style>
<!-- include jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- Script for toggle apps -->
<script>
// Create an Array of all the app names.
var apps = [ 'app1', 'app2', 'app3' ];
// Variable which keeps track of which app is currently visible
var visibleAppName = null;
function onLinkClicked(event) {
// Get the id of the link that was clicked.
var linkName = event.target.id;
// Strip off the '-link' from the end of the linkName
var dashIndex = linkName.indexOf('-link');
var appName = linkName.substr(0, dashIndex);
// Call show app with the correct appName.
showApp(appName);
}
function showApp(appNameToShow) {
// Hide the currently visible app (if there is one!)
if (visibleAppName !== null) {
$('#' + visibleAppName).hide();
}
// And show the one passed
$('#' + appNameToShow).show();
// Update the visibleApp property.
visibleAppName = appNameToShow;
}
// $(document).ready waits for the page to finish rendering
$(document).ready(function () {
// Walk through the Array of Apps and add a click handler to
// it's respective link.
apps.forEach(function(name) {
$('#' + name + '-link').on('click', onLinkClicked);
});
});
</script>
</head>
<body>
<aside class="apps">
<a href="#" id="app1-link">link1</a>
<span class="socialApp" id="app1">stuff goes here1</span>
<a href="#" id="app2-link">link2</a>
<span class="socialApp" id="app2">stuff goes here2</span>
<a href="#" id="app3-link">link2</a>
<span class="socialApp" id="app3">stuff goes here3</span>
</aside>
</body>
</html>
If you're keen to learn more about JavaScript development then may I suggest reading Object Orientation JavaScript which provides an excellent introduction to the language and some of it's quirks.