'Selecting content from a sub-nav menu from a main-nav menu
I am creating a website that uses SQL queries to show, input, modify, delete data from a database. I am using CSS to show/hide the main div (#accounts-page/#hardware-page) content for the main navigation menu. This works good, but the issue comes in when I have another menu inside that div element and try to navigate to content within that submenu. The desired is that the table on each 'page' will still be shown after a submenu button is clicked, along with the content of that submenu button below it.
I have tried using JavaScript, jQuery, plain CSS & HTML, but can't seem to wrap my head around all the examples that I've searched up online and apply it to my situation.
Here is a stripped down version of HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>
<div id="wrapper">
<ul id="main-nav" class="menu">
<li><a href="#accounts-page">Accounts</a></li>
<li><a href="#hardware-page">Hardware</a></li>
</ul>
<div id="accounts-page" class="">
<table id="accounts-table">
<tr>
<th>ID</th>
<th>Email</th>
<th>Password</th>
<th>Recovery Email</th>
<th>Phone Number</th>
<th>Birth Date</th>
<th>Username</th>
</tr>
</table>
<ul class="submenu" style="text-align:center">
<button><a href="#add-acc">Add account</a></button>
<button><a href="#edit-acc">Modify Accounts</a></button>
<button><a href="#del-acc">Delete Account</a></button>
</ul>
<div class="column" id="add-acc">
<p>Add account content</p>
</div>
<div class="column" id="del-acc">
<p>Delete account content</p>
</div>
</div>
<div id="hardware-page">
<table id="hardware-table">
<tr>
<th>ID</th>
<th>Category</th>
<th>Manufacturer</th>
<th>Model</th>
</tr>
</table>
<div class="submenu">
<ul class="" style="text-align:center">
<button><a href="#add-hdwre">Add hardware</a></button>
<button><a href="#edit-hdwre">Modify hardware</a></button>
<button><a href="#del-hdwre">Delete hardware</a></button>
</ul>
</div>
<div class="full" id="add-hdwre">
<p>Add hardware content</p>
</div>
<div id="edit-hdwre">
<p>Edit hardware content</p>
</div>
<div id="del-hdwre">
<p>Delete hardware content</p>
</div>
</div>
<div id="computers-page" class="tab-content">
</div>
<div id="games-page" class="tab-content">
</div>
</div>
</body>
</html>
And CSS:
#accounts-page #add-acc,
#edit-acc,
#del-acc,
#add-hdwre,
#edit-hdwre,
#del-hdwre {
display: none;
}
#accounts-page #add-acc:target,
#edit-acc:target,
#del-acc:target,
#add-hdwre:target,
#edit-hdwre:target,
#del-hdwre:target {
display: block;
}
#accounts-page,
#hardware-page {
display: none;
}
#accounts-page:target,
#hardware-page:target {
display: block;
}
Or the JSFiddle for your convinience
My first thought is to use child selectors, but I can't quite seem to figure out how to implement it. Any pointers or recommendations would be highly valued.
If there is an easier way to implement this within javascript/jQuery then please let me know.
EDIT: When the submenu links on each 'page' are clicked (add-acc,edit-acc, etc) the URL is changed to that ID, which I am assuming is where the problem lies and I need to direct the link to the child of the page. Example: #accounts-page > #add-acc
Images:
Solution 1:[1]
I eventually got to the solution by following this StackOverflow Question and it's Answers, who helped me tremendously.
Here is the JSFiddle with the desired result.
Using Javascript to navigate the main navigation solved the issue. I don't know why I couldn't understand from the countless other questions I saw but this solution works for me.
Thanks to Jared for his explanation in the comments about display:block;, it was insightful to debugging the issue.
Added Javascript:
function ShowContent(content) {
document.getElementById("accounts-page").style.display = 'none'
document.getElementById("hardware-page").style.display = 'none';
document.getElementById(content).style.display = 'block';
}
Modified CSS:
.submenu {
margin: auto;
padding: 7px 0 7px 0;
font-size: 24px;
text-align: center;
}
.hide {
display: none;
}
.hide:target {
display: block;
}
Updated HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div id="wrapper">
<ul class="menu">
<li><a href="#" onclick="return ShowContent('accounts-page')">Accounts</a></li>
<li><a href="#" onclick="return ShowContent('hardware-page')">Hardware</a></li>
</ul>
<div id="accounts-page" class="hide">
<table id="accounts-table">
<tr>
<th>ID</th>
<th>Email</th>
<th>Password</th>
<th>Recovery Email</th>
<th>Phone Number</th>
<th>Birth Date</th>
<th>Username</th>
</tr>
</table>
<ul class="submenu" style="text-align:center">
<button><a href="#add-acc">Add account</a></button>
</ul>
<div class="hide" id="add-acc">
<p>Add account content</p>
</div>
</div>
<div id="hardware-page" class="hide">
<table class="hardware-table">
<tr>
<th>ID</th>
<th>Category</th>
<th>Manufacturer</th>
<th>Model</th>
</tr>
</table>
<div class="submenu">
<ul class="submenu" style="text-align:center">
<button><a href="#add-hdwre">Add hardware</a></button>
</ul>
</div>
<div class="hide" id="add-hdwre">
<p>Add hardware content</p>
</div>
</div>
</div>
</body>
</html>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Destia |