Olá, estou ajudando um amigo a editar um site e estou com uma dificuldade com um menu em JS, atualmente se clicar em todos os menus ele vai abrindo e fica tudo aberto, eu gostaria que sempre que eu clicar num menu ele fechasse o que está aberto, para que sempre ficasse um único menu aberto, igual esse site faz: Site onde o menu funciona como eu gostaria Meu site teste funcionando só com o menu Segue abaixo o HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<META name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<META name="apple-touch-fullscreen" content="YES">
<TITLE>Teste</TITLE>
<link href="css/deslizante.css" rel="stylesheet" type="text/css">
<script src="js/load.js" type="text/javascript"></script>
<script src="js/detect.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/cod_deslizante.js"></script>
</head>
<body style="margin-left:0; margin-right:0; padding-top:20px; padding-bottom:0 padding-left:0; padding-right:0; margin-bottom:0">
<div id="header" class="toolbar">
<div id="header-top">
<div id="header2" class="toolbar">
<div id="header-top2">
</div>
</div>
</div>
<div id="home" tab="welcome" spaceid="954010550" selected="true" style="left: 0%;">
<div class="footer">
<div align="center">
<div>
<div id="conteudo" align="center" style="margin-top:10px;">
<!-- Começo dos conteúdos -->
<div id="box-toggle" class="menus">
<div class="tgl_manual" style="margin-right:15px; margin-left:15px;">
<p style="padding-top:6px;">
<table border="0" cellspacing="0">
<tr>
<td><p style="margin-top:-15px;"><img src="svg/baixar_pdf.svg"></p>
<p style="padding-top:10px; padding-bottom:12px;"><img src="svg/visu_site.svg"></p></td>
</tr>
</table>
</div>
<div class="tgl_plantas" style="margin-right:15px; margin-left:15px;">
<p style="padding-top:6px;">
<table border="0" cellspacing="0">
<tr>
<td><p style="margin-top:-15px;"><img src="svg/baixar_pdf.svg"></p>
<p style="padding-top:5px; padding-bottom:12px;"><img src="svg/visu_site.svg"></p></td>
</tr>
</table>
</div>
<div class="tgl_localizacao" style="margin-right:15px; margin-left:15px; text-align:left;">
<table width="100%" border="0" cellspacing="0" style="padding-top:15px; padding-bottom:10px;">
<tr>
<td align="center"><table width="288" border="0" cellspacing="0">
<tr>
<td align="left">
<a class="texto_direita3" style="color:#333;">TESTE<br /></a>
<a class="texto_direita2" style="color:#555;">TESTE<br /></a>
<a class="texto_direita2" style="color:#666;">TESTE<br /></a>
<a class="texto_direita2" style="color:#888;">TESTE<br /></a>
</td>
</tr>
</table>
</td></tr>
</table></a>
</div>
<div class="tgl_dicas" style="margin-right:15px; margin-left:15px; text-align:left;">
<table width="100%" border="0" cellspacing="0" style="padding-top:10px; padding-bottom:12px;">
<tr>
<td align="center"><table width="288" border="0" cellspacing="0">
<tr>
<td align="left">
<a class="texto_direita">TESTE</a><br />
<a class="texto_direita">TESTE</a><br />
<a class="texto_direita">TESTE</a><br />
<a class="texto_direita">TESTE</a><br />
<a class="texto_direita">TESTE</a><br />
<a class="texto_direita">TESTE</a><br />
<a class="texto_direita">TESTE</a><br />
<a class="texto_direita">TESTE</a><br />
<a class="texto_direita">TESTE</a><br />
</td>
</tr>
</table>
</td></tr>
</table>
</div>
<div class="tgl_links" style="margin-right:15px; margin-left:15px; text-align:left;">
<table width="100%" border="0" cellspacing="0" style="padding-top:10px; padding-bottom:12px;">
<tr>
<td align="center"><table width="288" border="0" cellspacing="0">
<tr>
<td align="left">
<a class="texto_direita" target="_blank">TESTE</a><br />
<a class="texto_direita" target="_blank">TESTE</a><br />
<a class="texto_direita" target="_blank">TESTE</a><br />
<a class="texto_direita" target="_blank">TESTE</a><br />
<a class="texto_direita4" target="_blank">TESTE</a>
</td>
</tr>
</table>
</td></tr>
</table> </div>
<div class="tgl_fale" style="margin-right:15px; margin-left:15px; text-align:left; line-height:28px;">
<table width="100%" border="0" cellspacing="0" style="padding-top:10px; padding-bottom:12px;">
<tr>
<td align="center"><table width="288" border="0" cellspacing="0">
<tr>
<td align="left">
<a class="texto_direita">TESTE</a><br />
<a class="texto_direita">TESTE</a><br />
<a class="texto_direita">TESTE</a><br />
<a class="texto_direita">TESTE</a><br />
<a class="texto_direita">TESTE</a><br />
<font color="#333" style="line-height:19px; font-size:16px;">TESTE</font><br />
<font color="#333" style="line-height:19px; font-size:16px;">TESTE</font><br />
<font color="#333" style="line-height:19px; font-size:16px;">TESTE</font><br />
</td>
</tr>
</table>
</td></tr>
</table> </div>
</div>
<!-- Fim do Conteudo Oculto -->
</div></div>
</body></html>
Segue abaixo o JS: jQuery.fn.toggleText = function(a,b) {
return this.html(this.html().replace(new RegExp("("+a+"|"+b+")"),function(x){return(x==a)?b:a;}));
}
$(document).ready(function(){
$('.tgl_manual').before('<span><div align="center" style="background-color:#fff; height:57px; width:319px;"><div align="center" style="background-color:#DE0000; border-radius: 8px 20px; height:50px; width:319px;"><font style="color:#fff; font:18px Varela Round,Lato,Helvetica,Arial,sans-serif; font-weight:400; position:relative; top:6.5px; margin-left:-1px;">TESTE</font><img style="position:relative; top:12px; padding-left:213px;" src="svg/ico_teste.svg" /><div style="background-color:#fff; position:relative; top:20px; height:7px;"></div></div></span>');
$('.tgl_plantas').before('<span><div align="center" style="background-color:#fff; height:57px; width:319px;"><div align="center" style="background-color:#DE0000; border-radius: 8px 20px; height:50px; width:319px;"><font style="color:#fff; font:18px Varela Round,Lato,Helvetica,Arial,sans-serif; font-weight:400; position:relative; top:6.5px; margin-left:-1px;">TESTE</font><img style="position:relative; top:12px; padding-left:213px;" src="svg/ico_teste.svg" /><div style="background-color:#fff; position:relative; top:20px; height:7px;"></div></div></span>');
$('.tgl_localizacao').before('<span><div align="center" style="background-color:#fff; height:57px; width:319px;"><div align="center" style="background-color:#DE0000; border-radius: 8px 20px; height:50px; width:319px;"><font style="color:#fff; font:18px Varela Round,Lato,Helvetica,Arial,sans-serif; font-weight:400; position:relative; top:6.5px; margin-left:-1px;">TESTE</font><img style="position:relative; top:12px; padding-left:213px;" src="svg/ico_teste.svg" /><div style="background-color:#fff; position:relative; top:20px; height:7px;"></div></div></span>');
$('.tgl_dicas').before('<span><div align="center" style="background-color:#fff; height:57px; width:319px;"><div align="center" style="background-color:#DE0000; border-radius: 8px 20px; height:50px; width:319px;"><font style="color:#fff; font:18px Varela Round,Lato,Helvetica,Arial,sans-serif; font-weight:400; position:relative; top:6.5px; margin-left:-1px;">TESTE</font><img style="position:relative; top:12px; padding-left:213px;" src="svg/ico_teste.svg" /><div style="background-color:#fff; position:relative; top:20px; height:7px;"></div></div></span>');
$('.tgl_links').before('<span><div align="center" style="background-color:#fff; height:57px; width:319px;"><div align="center" style="background-color:#DE0000; border-radius: 8px 20px; height:50px; width:319px;"><font style="color:#fff; font:18px Varela Round,Lato,Helvetica,Arial,sans-serif; font-weight:400; position:relative; top:6.5px; margin-left:-1px;">TESTE</font><img style="position:relative; top:12px; padding-left:213px;" src="svg/ico_teste.svg" /><div style="background-color:#fff; position:relative; top:20px; height:7px;"></div></div></span>');
$('.tgl_fale').before('<span><div align="center" style="background-color:#fff; height:57px; width:319px;"><div align="center" style="background-color:#DE0000; border-radius: 8px 20px; height:50px; width:319px;"><font style="color:#fff; font:18px Varela Round,Lato,Helvetica,Arial,sans-serif; font-weight:400; position:relative; top:6.5px; margin-left:-1px;">TESTE</font><img style="position:relative; top:12px; padding-left:213px;" src="svg/ico_teste.svg" /><div style="background-color:#fff; position:relative; top:20px; height:7px;"></div></div></span>');
$('.tgl_manual').css('display', 'none')
$('.tgl_plantas').css('display', 'none')
$('.tgl_localizacao').css('display', 'none')
$('.tgl_dicas').css('display', 'none')
$('.tgl_links').css('display', 'none')
$('.tgl_fale').css('display', 'none')
$('span', '#box-toggle').click(function() {
$(this).next().slideToggle('slow')
.siblings('.tgl_manual:visible')('.tgl_plantas:visible')('.tgl_localizacao:visible')('.tgl_dicas:visible')('.tgl_links:visible')('.tgl_fale:visible').slideToggle('slow');
});
})
Segue abaixo o CSS: .menus {
color: #333;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:14px;
font-style:normal;
}
<!-- Função Menu Deslizante -->
#box-toggle .tgl {margin-bottom:0px;}
#box-toggle span {
display:block;
cursor:pointer;
margin-top:0px;
font-family: Arial;
font-size:17px;
color: #666666;
}
<!-- Função Load Pagina -->
#loader{position:absolute;width:100%;}
#conteudo{display:none;}
.info{width:100%;float:right;margin-right:2px;margin-top: 2px;}