How can I show a Table inside a Cell

Navigation
1

I have created a table with hidden cells.

When I click on the Book 1 option or button, it shows the Temas 1, 2 y 3 , I try to put the Topic 4 , but when clicking on the Topic 4 , show me the Themes 4aaaa, 4bbbb, etc ...

How can I put Theme 4 that contains the other hidden cells, so that they are displayed when I click on Theme 4?

This is the code I'm using 

<!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>
    
asked by SoCu 11.03.2018 в 14:13
source

3 answers

1

Here I leave the complete code as you want it. Good luck 

<!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>
    
answered by 11.03.2018 / 16:07
source
1

Add this under the td of topic 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>

and add this in your script: 

$('.tema4').on('click',function(){
    $('.tema4_submenu').slideToggle('fast');
});
    
answered by 11.03.2018 в 14:52
1

I recommend that for the next time you define well from the beginning what you need to avoid future conflicts. If you do not explain well from the beginning, the community will not help you.

here I leave the code as you wish ... 

<!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>
    
answered by 11.03.2018 в 20:54
Does the value of a textbox pass from one webform to another? ASP .NET C # How to save the visibility of a button