jQuery .show() / .hide() Not Working in Social Rollover
So, I'm trying to create a social media rollover, but for some reason, I
cannot get it to work. I'm trying to get it to, when I click a link,
display a div full of social media icons with links (preferably with a
nice animation, but I haven't attempted that yet, since this won't work).
I'd rather use jQuery toggle, but, I can't even get this to work, so it
seems pointless to attemt something more complicated.
<!DOCTYPE html>
<html>
<head>
<title>Rollover Test</title>
<script src="jquery.min.js"></script>
<style>
#one {
background-image: url('fb.png');
}
#two {
background-image: url('twt.png');
}
#three {
background-image: url('g+.png');
}
#four {
background-image: url('rss.png');
}
#five {
background-image: url('irc.png');
}
</style>
<script>
$(function() {
$('#socialS').hide();
$('#clickElement').click(function() {
$('#socialS').show();
}
});
</script>
</head>
<body>
<div id="socialS">
<a href=""><div id="one"></div></a>
Test
<a href=""><div id="two"></div></a>
<a href=""><div id="three"></div></a>
<a href=""><div id="four"></div></a>
<a href=""><div id="five"></div></a>
</div>
<a href="" id="clickElement">Click me!</a>
Test
</body>
</html>
Could I have some assistance?
No comments:
Post a Comment