jQuery is not working with the pop-up div. What happens is when i click on any of the Click Me text, the pop-up div is shown. Then i click on either one or two and nothing happens!? If i click on one, two should disappear and vice versa.
Copy the code below and try for yourself. What’s the solution?
<html>
<head>
<style type="text/css">
.ratecontainer {
display:block;
float:left;
height:40px;
}
.ratecontainer a {
color:#FFFFFF;
text-decoration:none;
}
.ratebutton1 {
padding:5px;
color:#FFFFFF;
cursor:pointer;
background-color:#59758d;
}
.ratebutton1:hover {
background-color:#4a6f8e;
}
.ratebutton2 {
padding:5px;
color:#FFFFFF;
cursor:pointer;
background-color:#59758d;
}
.ratebutton2:hover {
background-color:#4a6f8e;
}
#info {
position:absolute;
text-align:left;
width:950px;
height:auto;
top:100px;
left:50%;
z-index:20;
margin-left:-475px;
border:1px solid #000000;
background-color:#FFFFFF;
display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(function() {
$('.ratebutton1').click(function() {
$('.ratebutton2').hide();
});
$('.ratebutton2').click(function() {
$('.ratebutton1').hide();
});
$('.infobutton').click(function() {
var id = $(this).attr('id');
var row = '#box'+id;
$('#info').css('display','block');
var ninfo = $(row).html();
$('#info').html(ninfo);
});
});
</script>
<div id="info"></div>
<div class="menucontainer"><a id="0" class='infobutton'>Click Me </a></div>
<div style="display:none;" id="box0">
<div class="ratecontainer">
<form action="">
<a class="ratebutton1">One</a><a class="ratebutton2">two</a>
</form>
</div>
</div>
</body>
</html>
I created a stub fiddle for your code: http://jsfiddle.net/guard/P4KYL/
Edit it removing any php-related cruft (and manually put multiple items where necessary)
Then post the edited version back and I’ll check what’s wrong with it.