I have a document with internal links to subheaders from various categories.
My goal is to selectively hide category content based on the specific #target selected.
<html>
<style>
.tab-folder > .tab-content {
display: none;
}
.tab-folder > .tab-content:target,
.tab-folder > .tab-content > div:target{
display: block;
}
</style>
<div class="tab-folder">
<a href="#first">Show the first div</a><br>
<a href="#second">Show the second div</a><br>
<a href="#third">Show the third div</a><br>
<a href="#sub-first"> show dummy in first</a><br>
<a href="#sub-third"> show dummy in third</a><br>
<div class="tab-content" id="first">First body! <div id="sub-first">dummy</div></div>
<div class="tab-content" id="second">Second body!</div>
<div class="tab-content" id="third">Third body!<div id="sub-third">dummy3</div></div>
</div>
</html>For example, when linking to sub-first, I want only the content related to the first tab to be visible.