I am trying to implement a toggle button on my website, but unfortunately it is not working properly.
Here is the HTML code I am using:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" media="screen">
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(47.583937, 13.963623);
var myOptions = {
zoom: 7,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
<script type="text/javascript">
$(function(){
$('.slider-button').toggle(function(){
$(this).addClass('on').html('Quiz');
},function(){
$(this).removeClass('on').html('Read');
});
});
</script>
</head>
<body onload="initialize()">
<header id="site_head">
<div class="header_cont">
<h1><a href="#">mr. hurley</a></h1>
</div>
</header>
<div id="menu" style="float: left; width:20%; height:100%;">
<ul>
<li class="first"><a href="#">Search</a>
<div class="slider-frame">
<span class="slider-button">OFF</span>
</div>
</br>
<p> [Lorem ipsum text]</p></li>
<li class="active"><a href="#">Offer</a><p> Placeholder</p></li>
</ul>
</div>
<div id="map_canvas" style="float: left; width:80%; height:100%"></div>
<div id="over_map">
<p>TEst dsfkjsldökjfdslkäfjsdfsdfsdfsdfs</p>
</div>
</body>
</html>
And here is the CSS styling associated with it:
[CSS Styling Code]I have referred to this example for guidance: http://jsfiddle.net/vY7SQ/3/
If anyone could provide some assistance, it would be greatly appreciated. Thank you!