After much trial and error, I finally got my toggle functionality working with the following code. I was surprised that toggling the width actually changed the display settings, but it did the trick! It's still a bit mysterious to me how it all works together. Take a look at the code snippet below:
<head>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<style>
.contact {
list-style:none;
display:inline;
position:relative;
}
#contList{
position:fixed;
left:3.0%;
bottom:1.1%;
padding:0px;
margin:0px;
white-space:nowrap;
display:none;
}
#contButton{
width:2.9%;
position:fixed;
bottom:0px;
left:0px;
}
</style>
<script src='http://code.jquery.com/jquery-1.11.0.min.js'></script>
</head>
<body>
<div id='contMenu' class='contMenu'>
<a id='contButton'>
<i class="fa fa-globe fa-3x"></i>
</a>
<ul id ='contList'>
<li class='contact'><i class="fa fa-envelope fa-2x"></i></li>
<li class='contact'><i class="fa fa-twitter fa-2x"></i></li>
</ul>
</div>
<script>
$(document).ready(init);
function init(){
slideToggle();
}
function slideToggle(){
$('#contButton').click(function(){
$('#contList').animate({width:'toggle'});
});
}
</script>
</body>
If you'd like to test out this code for yourself, check out the JsFiddle here: http://jsfiddle.net/mfedore1/Lf4k9/