Jump to content

kirkdaddy7385

Members
 View Profile  See their activity

  • Posts

    1

  • Joined

  • Last visited

 Content Type 

Posts posted by kirkdaddy7385

    Tab Menu

    in JavaScript

    Posted

    I hope this is the right place. I don't want to start a new topic with a related topic already present. I have used the tab how-to and it worked brilliantly first time off. I have amended the code to provide a "tabs within a tab" feature. That part works great also but I'm unsure how to cause the currently open tab to close upon clicking it again (this is preferential). Most importantly, I'm having a problem where, if I click one of the tabs within the tab, that "sub tab" stays, even when switching back to the other "main tab" (the one that does not contain the "sub tabs". I will paste my amended code below and hope that there is something that can be divulged. 

    <!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
		body {font-family: Arial;}

		/* Style the tab */
		.tab {
			overflow: hidden;
			border: 1px solid #ccc;
			background-color: #f1f1f1;
		}

		/* Style the buttons inside the tab */
		.tab button {
			background-color: inherit;
			float: left;
			border: none;
			outline: none;
			cursor: pointer;
			padding: 14px 16px;
			transition: 0.3s;
			font-size: 17px;
		}

		/* Change background color of buttons on hover */
		.tab button:hover {
			background-color: #ddd;
		}

		/* Create an active/current tablink class */
		.tab button.active {
			background-color: #ccc;
		}

		/* Style the tab content */
		.tabcontent {
			display: none;
			padding: 6px 12px;
			border: 1px solid #ccc;
			border-top: none;
		}

		/* Style the tab content */
		.subtabcontent {
			display: none;
			padding: 6px 12px;
			border: 1px solid #ccc;
			border-top: none;
		}
	</style>
</head>
<body>
	<h2>NEST Health Report</h2>
	<div class="tab">
		<button class="tablinks" onclick="openMainCategory(event, 'hardware')">Hardware</button>
		<button class="tablinks" onclick="openMainCategory(event, 'software')">Software</button>
	</div>
	<div id="hardware" class="tabcontent">
		<h3>Hardware</h3>
		<p>This will contain a list of all hardware diagnostics</p>
		<p>It will show disk usage, RAM total, CPU total, uptime, etc</p>
	</div>
	<div id="software" class="tabcontent">
		<div class="tab">
			<button class="subtablinks" onclick="openSubCategory(event, 'ant')">ANT</button>
			<button class="subtablinks" onclick="openSubCategory(event, 'marci')">MARCI</button>
			<button class="subtablinks" onclick="openSubCategory(event, 'java')">JAVA</button>
		</div>
		<h3>Software</h3>
		<p>This will show all information for all the various version of software</p> 
	</div>
	<div id="java" class="subtabcontent">
		<h3>JAVA</h3>
		<p>What's the status of JAVA?</p>
		<p>Are the links good?</p>
		<p>What is it using (OpenJDK|OracleJDK)?</p>
	</div>
	<div id="ant" class="subtabcontent">
		<h3>ANT</h3>
		<p>What version of ANT is installed?</p>
		<p>Maybe it's not installed</p>
	</div>
	<div id="marci" class="subtabcontent">
		<h3>MARCI</h3>
		<p>Is MARCI "installed"?</p>
		<p>Is MARCI daemon running?</p>
		<p>What collector?</p>
	</div>
	<script>
		function openMainCategory(evt, mainCategoryName) {
			var i, tabcontent, tablinks;
			tabcontent = document.getElementsByClassName("tabcontent");
			for (i = 0; i < tabcontent.length; i++) {
				tabcontent[i].style.display = "none";
			}
			tablinks = document.getElementsByClassName("tablinks");
			for (i = 0; i < tablinks.length; i++) {
				tablinks[i].className = tablinks[i].className.replace(" active", "");
			}
			document.getElementById(mainCategoryName).style.display = "block";
			evt.currentTarget.className += " active";
		}
		function openSubCategory(evt, subCategoryName) {
			var i, subtabcontent, tablinks;
			subtabcontent = document.getElementsByClassName("subtabcontent");
			for (i = 0; i < subtabcontent.length; i++) {
				subtabcontent[i].style.display = "none";
			}
			tablinks = document.getElementsByClassName("tablinks");
			for (i = 0; i < tablinks.length; i++) {
				tablinks[i].className = tablinks[i].className.replace(" active", "");
			}
			document.getElementById(subCategoryName).style.display = "block";
			evt.currentTarget.className += " active";
		}
	</script>
</body>
</html>

     

×
×
  • Create New...