Mostrar/ocultar contenido DIV

lokurapc · #1 (**permalink**) 12/09/2012, 20:14

Tengo el siguiente codigo

Código HTML:

<script>
function mostrarocultar(id) {
var elEmento = document.getElementById(id);
if (elEmento.style.display == 'block') {
elEmento.style.display='none';
}else{
elEmento.style.display='block';
}
}
</script>
<table border="1" width="500" height="500">
<tr>
<td width="500" align="center">
<a href="javascript:void(0);" onclick="mostrarocultar('flotante1')">
Mostrar/Ocultar 1</a><br>
<a href="javascript:void(0);" onclick="mostrarocultar('flotante2')">
Mostrar/Ocultar 2</a><br>
<a href="javascript:void(0);" onclick="mostrarocultar('flotante3')">
Mostrar/Ocultar 3</a>
</td>
<td width="500" align="center">
<div id="flotante1" style="display:none;">Este es un div flotante 1</div>
<div id="flotante2" style="display:none;">Este es un div flotante 2</div>
<div id="flotante3" style="display:none;">Este es un div flotante 3</div>
</td>
</tr>
</table>

yo quiero que al mostrar un DIV se me oculten los otros

como lo hago ?

Ex_shadow · #2 (**permalink**) 13/09/2012, 13:53

mostrarocultar(id){
var div = document.getElementById(id);

document.getElementById('Tabla').getElementByTagNa me('div').style.display='none'; /* */

div.style.display='block';

}

Donde esta en rojo lo tenes que cambiar por un id que le des al <td> que contiene los divs...

temok_3 · #3 (**permalink**) 13/09/2012, 16:42

Y si usas Jquery
$("#id_div").hide();

opzina · #4 (**permalink**) 14/09/2012, 21:42

Opción jQuery =

Código HTML:

Ver original<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
 
 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.js"></script>
 
<script type="text/javascript">
 
$(function() {
    
    $('.elem').hide();
    $('.buttons').each(function(i) {
        obj = $(this);
        
        obj.on('click', function() {
            $('#elem' + i).show().siblings().hide();
        });
        
    });
    
}); 
 
</script>
 
</head>
<body>
 
<div id="elements">
    <div id="elem0">Description 1</div>
    <div id="elem1">Description 2</div>
    <div id="elem2">Description 3</div>
</div>
 
<button id="button1" class="buttons">Click 1!</button>
<button id="button2" class="buttons">Click 2!</button>
<button id="button3" class="buttons">Click 3!</button>
 
</body>
</html>

pzin · #5 (**permalink**) 14/09/2012, 21:55

No entiendo eso de sobre la marcha decir que use jQuery. Es como si alguien entrase con una duda en el foro de PHP y le digan que se ponga un Wordpress o que pregunten en Diseño Gráfico y lo manden a iStock Photo.