amaxwell01/slidecontact.html

## slidecontact.html


<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script>
    var showSlide = function() {
        $('#sideContact').show( 'slide', { direction: 'left' }, 500 );
    };

    $(document).ready(function(){
        $('#sideContactTab').click(function() {
			showSlide();
			return false;
		});
    });
</script>

<style>
#sideContact {
    height: 400px;
    position: relative;
    width: 400px;
}
#sideContactTab {
    position: absolute;
    right: -20px;
    top: 0;
    width: 20px;
}
</style>
</head>
<body>

<div id="sideContact">
    <div id="sideContactTab">
        Contact
    </div>
    <ul>
        <li>Contact Me</li>
        <li>I'm Welsh and love it</li>
        <li>Yes, that is a tuba</li>
    </li>
</div>

</body>
</html>


	<html>
	<head>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
	<script>
	var showSlide = function() {
	$('#sideContact').show( 'slide', { direction: 'left' }, 500 );
	};

	$(document).ready(function(){
	$('#sideContactTab').click(function() {
	showSlide();
	return false;
	});
	});
	</script>

	<style>
	#sideContact {
	height: 400px;
	position: relative;
	width: 400px;
	}
	#sideContactTab {
	position: absolute;
	right: -20px;
	top: 0;
	width: 20px;
	}
	</style>
	</head>
	<body>

	<div id="sideContact">
	<div id="sideContactTab">
	Contact
	</div>
	<ul>
	<li>Contact Me</li>
	<li>I'm Welsh and love it</li>
	<li>Yes, that is a tuba</li>
	</li>
	</div>

	</body>
	</html>