1

tengo creada una tabla con celdas ocultas.

Cuando pulso sobre la opción o botón Libro 1, muestra los Temas 1, 2 y 3, intento poner el Tema 4, pero que al pulsar sobre el Tema 4, me muestre los Temas 4aaaa, 4bbbb, etc....

introducir la descripción de la imagen aquí

¿Cómo puedo poner ese Tema 4 que contenga las otras celdas ocultas, para que se muestren cuando pulso sobre el Tema 4?

Este es el codigo que estoy utilizando

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Textos</title>
	<script src="https://code.jquery.com/jquery-2.1.4.js"></script> 
	<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script> 
    
</head>
<body>

<div>
    <div>
        <a href="#info1" class="inf"><button type="button" style='width:150px; text-align: left'>Libro Primero</button></a>
    </div>
    <div id="info1" class="oculto">
        <tr>
        	<td><span style="font: 10pt comic sans ms; color: blue">&nbsp;&nbsp;&nbsp;<i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>
            <td><a href="http://www.prueba.com">&nbsp;Tema 1</a></td>
		</tr>
	</div>
          
	<div>
		<a href="#info2" class="inf"><button type="button" style='width:150px; text-align: left'>Libro Segundo</button></a>
	</div>
	<div id="info2" class="oculto">
		<table cellspacing=0 cellpadding=0>
			<tr>
				<td><span style="font: 10pt comic sans ms; color: blue">&nbsp;&nbsp;&nbsp;<i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>
				<td><a href="http://www.prueba.com">&nbsp;Tema 1</a></td>
			</tr> 
			<tr>
                <td><span style="font: 10pt comic sans ms; color: blue">&nbsp;&nbsp;&nbsp;<i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>
                <td><a href="http://www.prueba.com">&nbsp;Tema 2</a></td>
            </tr>
            <tr>
                <td><span style="font: 10pt comic sans ms; color: blue">&nbsp;&nbsp;&nbsp;<i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>
                <td><a href="http://www.prueba.com">&nbsp;Tema 3</a></td>
            </tr>
               <tr>
                <td><span style="font: 10pt comic sans ms; color: blue">&nbsp;&nbsp;&nbsp;<i class="fa fa-file" aria-hidden="true"></i></span></td>
                <td ><a href="#" class="tema4">Tema 4</a></td>
             </tr>
                     <tr hidden class="tema4_submenu">
                        <td><span style="font: 10pt comic sans ms; color: blue">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>
                        <td><a href="http://www.prueba.com">&nbsp;Tema 1</a></td>
                     </tr>
                     <tr hidden class="tema4_submenu">
                        <td><span style="font: 10pt comic sans ms; color: blue">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>
                        <td><a href="http://www.prueba.com">&nbsp;Tema 2</a></td>
                     </tr>
                     <tr hidden class="tema4_submenu">
                        <td><span style="font: 10pt comic sans ms; color: blue">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>
                        <td><a href="http://www.prueba.com">&nbsp;Tema 3</a></td>
                     </tr>
        </table>
    </div>
         
	<div>
    	<a href="#info3" class="inf"><button type="button" style='width:150px; text-align: left'>Libro Trecero</button></a>
    </div>
    <div id="info3" class="oculto">
        <p class="texto1">Texto 3</p>
    </div>

</div>


<script type="text/javascript">
	jQuery(document).ready(function(){
        $(".oculto").hide();              
        $(".inf").click(function(){
              var nodo = $(this).attr("href");  
     
              if ($(nodo).is(":visible")){
                   $(nodo).hide();
                   return false;
              }else{
            $(".oculto").hide("slow");                             
            $(nodo).fadeToggle("fast");
            return false;
              }
        });
            $('.tema4').on('click',function(){
            $('.tema4_submenu').slideToggle('fast');
            });
        }); 
</script>

</body>
</html>

3 respuestas 3

1

Aqui te dejo el codigo completo asi como lo quieres. Suerte

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Textos</title>
    <script src="https://code.jquery.com/jquery-2.1.4.js"></script> 
    <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script> 
    <style type="text/css">

        .oculto{
            margin-left: 1%;
        }
        .tema4_submenu span{
            padding-left: 20px;
        }
    </style>
</head>
<body>

<div>
    <div>
        <a href="#info1" class="inf"><button type="button" style='width:150px; text-align: left'>Libro Primero</button></a>
    </div>
    <div id="info1" class="oculto">
        <tr>
            <td><span style="font: 10pt comic sans ms; color: blue"><i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>
            <td><a href="http://www.prueba.com">&nbsp;Tema 1</a></td>
        </tr>
    </div>

    <div>
        <a href="#info2" class="inf"><button type="button" style='width:150px; text-align: left'>Libro Segundo</button></a>
    </div>
    <div id="info2" class="oculto">
        <table cellspacing=0 cellpadding=0>
            <tr>
                <td><span style="font: 10pt comic sans ms; color: blue"><i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>
                <td><a href="http://www.prueba.com">&nbsp;Tema 1</a></td>
            </tr> 
            <tr>
                <td><span style="font: 10pt comic sans ms; color: blue"><i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>
                <td><a href="http://www.prueba.com">&nbsp;Tema 2</a></td>
            </tr>
            <tr>
                <td><span style="font: 10pt comic sans ms; color: blue"><i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>
                <td><a href="http://www.prueba.com">&nbsp;Tema 3</a></td>
            </tr>
               <tr>
                <td><span style="font: 10pt comic sans ms; color: blue"><i class="fa fa-file" aria-hidden="true"></i></span></td>
                <td ><a href="#" class="tema4">Tema 4</a></td>
             </tr>
             <tr hidden class="tema4_submenu">
                <td></td>
                <td>
                    <span><a href="#">Tema 4.1</a></span><br>
                    <span><a href="#">Tema 4.2</a></span><br>
                    <span><a href="#">Tema 4.3</a></span>
                </td>
             </tr>

        </table>
    </div>

    <div>
        <a href="#info3" class="inf"><button type="button" style='width:150px; text-align: left'>Libro Trecero</button></a>
    </div>
    <div id="info3" class="oculto">
        <p class="texto1">Texto 3</p>
    </div>

</div>


<script type="text/javascript">
    jQuery(document).ready(function(){
        $(".oculto").hide();              
        $(".inf").click(function(){
              var nodo = $(this).attr("href");  

              if ($(nodo).is(":visible")){
                   $(nodo).hide();
                   return false;
              }else{
            $(".oculto").hide("slow");                             
            $(nodo).fadeToggle("fast");
            return false;
              }
        });
            $('.tema4').on('click',function(){
            $('.tema4_submenu').slideToggle('fast');
            });
        }); 
</script>

</body>
</html>
1
  • Este último no termina de funcionar bien, veo que el script esta puesto arriba, y el que puse yo abajo también sigue estando, no sé si será el motivo por el que cuando se cierra el “Libro segundo”, al volverse abrir el contenido del Tema 4 sigue desplegado, tendría que está escondido, tengo que poner más Temas, y se vería una lista muy larga, por otro lado si necesito poner otro contenido igual “Tema 5”, tengo que duplicar el script que se ha puesto para el Tema 4 ?
    – SoCu
    Commented el 11 mar. 2018 a las 17:13
1

Agrega esto debajo del td del tema 3:

 <tr>
    <td><span style="font: 10pt comic sans ms; color: blue">&nbsp;&nbsp;&nbsp;<i class="fa fa-file" aria-hidden="true"></i></span></td>
    <td ><a href="#" class="tema4">Tema 4</a></td>
 </tr>
 <tr hidden class="tema4_submenu">
    <td>1</td>
    <td>2</td>
    <td>3</td>
 </tr>

y agrega esto en tu script:

$('.tema4').on('click',function(){
    $('.tema4_submenu').slideToggle('fast');
});
1
  • Gracias Raul, como en estos comentarios no se puede hacer nada, he modificado el primer post con el código editado, no sé si lo he modificado bien, como lo has puesto, me salen los subtemas en una línea, como lo he puesto salen unos debajo del otro, y al ser un subtema los desplazado un poco del lado izquierdo, el problema que veo es que los temas de arriba, no sé por qué pero también se desplazan, mira el script porque igual lo he puesto mal.
    – SoCu
    Commented el 11 mar. 2018 a las 14:53
1

Te recomiendo que para la proxima vez definas bien desde un principio que es lo que necesitas para evitar futuros conflictos. Sino explicas bien desde el principio la comunidad no te ayudara.

aqui te dejo el codigo como lo deseas...

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Textos</title>
    <script src="https://code.jquery.com/jquery-2.1.4.js"></script> 
    <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script> 
    <style type="text/css">

        .oculto1,.oculto2,.oculto3{
            margin-left: 1%;
            display: none;
        }
        .tema4_submenu span{
            padding-left: 20px;
        }
    </style>
</head>
<body>

<div>
    <div class="info1">
        <a href="#info1" ><button type="button" style='width:150px; text-align: left'>Libro Primero</button></a>
    </div>
    <div id="info1" class="oculto1">
        <tr>
            <td><span style="font: 10pt comic sans ms; color: blue"><i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>
            <td><a href="http://www.prueba.com">&nbsp;Tema 1</a></td>
        </tr>
    </div>

    <div class="info2">
        <a href="#info2"><button type="button" style='width:150px; text-align: left'>Libro Segundo</button></a>
    </div>
    <div id="info2" class="oculto2">
        <table cellspacing=0 cellpadding=0>
            <tr>
                <td><span style="font: 10pt comic sans ms; color: blue"><i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>
                <td><a href="http://www.prueba.com">&nbsp;Tema 1</a></td>
            </tr> 
            <tr>
                <td><span style="font: 10pt comic sans ms; color: blue"><i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>
                <td><a href="http://www.prueba.com">&nbsp;Tema 2</a></td>
            </tr>
            <tr>
                <td><span style="font: 10pt comic sans ms; color: blue"><i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>
                <td><a href="http://www.prueba.com">&nbsp;Tema 3</a></td>
            </tr>
               <tr>
                <td><span style="font: 10pt comic sans ms; color: blue"><i class="fa fa-file" aria-hidden="true"></i></span></td>
                <td ><a href="#" class="tema4">Tema 4</a></td>
             </tr>
             <tr hidden class="tema4_submenu">
                <td></td>
                <td>
                    <span><a href="#">Tema 4.1</a></span><br>
                    <span><a href="#">Tema 4.2</a></span><br>
                    <span><a href="#">Tema 4.3</a></span>
                </td>
             </tr>

        </table>
    </div>

    <div class="info3">
        <a href="#info3"><button type="button" style='width:150px; text-align: left'>Libro Trecero</button></a>
    </div>
    <div id="info3" class="oculto3">
        <p class="texto1">Texto 3</p>
    </div>

</div>


<script type="text/javascript">
    jQuery(document).ready(function(){
            $('.info1').on('click',function(){
                $('.oculto1').slideToggle('fast');
                $('.oculto2').slideUp('fast');
                $('.oculto3').slideUp('fast');
                $('.tema4_submenu').slideUp('fast');
            });
            $('.info2').on('click',function(){
                $('.oculto2').slideToggle('fast');
                $('.oculto1').slideUp('fast');
                $('.oculto3').slideUp('fast');
                $('.tema4_submenu').slideUp('fast');
            });
            $('.info3').on('click',function(){
                $('.oculto3').slideToggle('fast');
                $('.oculto2').slideUp('fast');
                $('.oculto1').slideUp('fast');
                $('.tema4_submenu').slideUp('fast');
            });
            $('.tema4').on('click',function(){
                $('.tema4_submenu').slideToggle('fast');
            });
        }); 
</script>

</body>
</html>
1
  • Gracias Raul, ahora sí, y lo siento por no explicarme mejor, la verdad es que quise resumir la idea para no extenderme mucho con la explicación, pensé que con la imagen quedaría más claro lo que intentaba hacer, y no empezar a decir que, si quito, pongo, esconder, mostrar, libros y temas, que al final la iba a liar, jeje, tendré en cuenta tu consejo para la próxima, lo dicho muchas gracias, y siento haberte liado, y hacerte perder tu tipo.
    – SoCu
    Commented el 11 mar. 2018 a las 21:03

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.