The first column is displayed by default. If I click on the "1" I want to display "1.1, 1.2, 1.3" and then if I click on "1.1" display "1.1.1, 1.1.2, 1.1.3", but if I click on "1.2" hide the "1.1.1, 1.1.2, 1.1.3" and display "1.2.1, ...". If I click on "2" hide "1.1, 1.2, 1.3" and hide "1.2.1, ..." and display "2.1, 2.2" .....
This is always nested in 3 layers.
The HTML code have to look like as I wrote in my scource code.
It will not be a menu system.
I do not have any idea how to make this work.
index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>$(document).ready(function(){$("#load").attr("src","table.html");});</script>
</head>
<body>
<div id="page">
<iframe width="100%" height="100%" frameborder="0" id="load" src="table.html" ></iframe>
</div>
</body>
</html>
table.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div>
<div class="main">
<div class="First">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
</div>
<div class="Second">
<div class="S_1">
<li><a href="#">1.1</a></li>
<li><a href="#">1.2</a></li>
<li><a href="#">1.3</a></li>
</div>
<div class="S_2">
<li><a href="#">2.1</a></li>
</div>
</div>
<div class="Third">
<div class="T_1">
<div class="T_1.1">
<li>1.1.1</li>
<li>1.1.2</li>
</div>
....
</div>
....
</div>
</div>
</div>
</body>
</html>
style.css
* {margin: 0px;padding: 0px;}
li {list-style: none;}
.main {display:flex;justify-content: center;}
.First {background:green;width:33.33vw;}
.Second {background:gold; width:33.33vw;}
.Third {background:gray;width:33.33vw;}
from Hide and display div
- elements using JS
No comments:
Post a Comment