Use HTML anchor link to display a hidden div and scroll to desired anchor location

Question

I'm trying to create an index page and would like to have links to anchors which would be within a hidden div.

Clicking the anchor link would trigger the div the anchor is in to become visible and scroll the page to the anchor location.

I've tried a few things but have failed. Any help would be greatly appreciated.

 <div> <p>Link</p> <a href="#content1">Content 1</a><a href="#content2">Content 2</a><a href="#content3">Content 3</a><a href="#content4">Content 4</a> </div> <div class="inter">Some intermedary content with a large bottom margin to demonstrate scroll</div> <div> <div class="hiddenContent"> <div id="content1">I am content 1</div> <div id="content2">I am content 2</div> <div id="content3">I am content 3 <a id="content4" >Inner anchor within content 3 div. Link should scroll here but also show the other content within content 3.</a> </div> </div> 

Answer 1

This can be easily solved with CSS. You will need to adjust to meet your needs as you've not given us any code to work with.

Use the :target pesuo-class selector to select an item that is the target of a link

 .hiddenContent>div, .hiddenContent > [name=content4] { display: none; } .hiddenContent>div:target { display: block; } .inter { margin-bottom: 100vh; } 

 <div> <p>Link</p> <a href="#content1">Content 1</a><a href="#content2">Content 2</a><a href="#content3">Content 3</a><a href="#content4">Content 4</a> </div> <div class="inter">Some intermedary content with a large bottom margin to demonstrate scroll</div> <div> <div class="hiddenContent"> <div id="content1">I am content 1</div> <div id="content2">I am content 2</div> <div id="content3">I am content 3</div> <a name="content4" > <div>Some content in a named anchor</div> </a> </div>