How to display the table which is not in list?

Question

I want when i click or hover on list element to show me a tabel but table is not in list and element "li"

I write a code in VS code:

ul li:nth-child(1) table:nth-child(1){display}

Do table must be in element "li". Table is in body and it must be.

How to do that? What is syntax for that?

https://code.sololearn.com/W5ZhLy7H2s9U/?ref=app

Answer 1

You can use this JS snippet, but it will only work if you set each <table> "id" attribute to the same text of the <li> that shows the respective table. For example, if the list item <li>tabel 1</li>
then <table id="tabel 1"></table>

var tableList;
window.onload = function() {
tableList = document.getElementsByTagName("table");
var lis = document.getElementsByTagName("li");
for(var i = 0; i < lis.length; ++i) {
lis[i].addEventListener("click", showTable);
}

function showTable() {
for(var i = 0; i < tableList.length; ++i) {
if(tableList[i].id === this.textContent)
tableList[i].style.display = "block";
else
tableList[i].style.display = "none";
}
}
}

Hth, cmiiw