First things first, I'm just diving into the world of javascript so please bear with my not-so-great code
It seemed to work fine on Chrome but when I checked it on Firefox, everything went haywire
Fiddle: jsfiddle.net/7NCcY/
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
/* Handling Dropdowns */
$('.button-webmail').click(function() {
if($('.toggle-webmail').is(':visible')) {
$('.toggle-webmail').slideUp(200);
}
else {
$('.toggle-webmail').slideDown(200);
$('.toggle-client-area').slideUp(200);
$('.toggle-all-products').slideUp(200);
$('.toggle-countries').slideUp(200);
}
});
/* Client Area Drop-Down */
$('.button-client-area').click(function() {
if($('.toggle-client-area').is(':visible')) {
$('.toggle-client-area').slideUp(200);
}
else {
$('.toggle-client-area').slideDown(200);
$('.toggle-webmail').slideUp(200);
$('.toggle-all-products').slideUp(200);
$('.toggle-products').slideUp(200);
}
});
/* All Products Drop-Down */
$('.button-all-products').click(function() {
if($('.toggle-all-products').is(':visible')) {
$('.toggle-all-products').slideUp(200);
}
else {
$('.toggle-all-products').slideDown(200);
$('.toggle-webmail').slideUp(200);
$('.toggle-client-area').slideUp(200);
$('.toggle-countries').slideUp(200);
}
});
/* Countries Drop-Down */
$('.button-countries').click(function() {
if($('.toggle-countries').is(':visible')) {
$('.toggle-countries').slideUp(200);
}
else {
$('.toggle-countries').slideDown(200);
$('.toggle-webmail').slideUp(200);
$('.toggle-client-area').slideUp(200);
$('.toggle-all-products').slideUp(200);
}
});
$('html').click(function() {
$('.toggle-webmail, .toggle-client-area, .toggle-all-products, .toggle-countries').slideUp(200);
});
$('.toggle-webmail, .toggle-client-area, .toggle-all-products, .toggle-countries').click(function(event){
event.stopPropagation();
});
});
</script>
<style>
.container {
width:100%;
}
.column1, .column2, .column3, .column4 {
width:20%;
margin-right:5%;
float:left;
}
.toggle-webmail, .toggle-client-area, .toggle-all-products, .toggle-countries {
display:none;
}
</style>
</head>
<body>
<h1>Click for dropdown menu</h1>
<h2>Works smoothly in Chrome but glitchy on Firefox</h2>
<div class="container">
<div class="column1">
<div class="button-webmail">Webmail</div>
<div class="toggle-webmail"><input type="text"></input></div>
</div>
<div class="column2">
<div class="button-client-area">Client Area</div>
<div class="toggle-client-area"><input type="text"></input></div>
</div>
<div class="column3">
<div class="button-all-products">All Products</div>
<div class="toggle-all-products"><input type="text"></input></div>
</div>
<div class="column4">
<div class="button-countries">Countries</div>
<div class="toggle-countries"><input type="text"></input></div>
</div>
</div>
</body>
</html>