Pure CSS accordion stop anchor page scroll - html

Question

I have a pure CSS accordion, it works great, but an issue is handling click shifting the screen up to the anchor tag;
<div class="collapse-content">
<div class="collapse" id="instagram">
<a class="instagram" href="#instagram" onClick="return false;"><i class="fab fa-instagram"></i>Insta</a>
<div class="content">
<div class="inner-content">
Insta content
</div>
</div>
</div>
<div class="collapse" id="twitter">
<a class="twitter" href="#twitter"><i class="fab fa-twitter"></i>Twitter</a>
<div class="content">
<div class="inner-content">
Twitter content
</div>
</div>
</div>
<div class="collapse" id="dribbble">
<a class="dribbble" href="#dribbble"><i class="fab fa-dribbble"></i>Dribble</a>
<div class="content">
<div class="inner-content">
Dribble content
</div>
</div>
</div>
</div>
How can I suppress the browser scrolling the anchor to the top of the screen? I've tried adding a ? ! and 0 to the end of the anchor, but that breaks the link from working and as you can see above I've tried onClick="return false;" which stops the click. I'm guessing what I need is some sort of offset, as I don't want to suppress the click event just the scrolling too.
# the moment I'm avoiding using Jquery, ideally no JS but trying to keep it as simple as possible.

Answer 1

If these aren't links, then you shouldn't be using <a> tags. Links can:
link to another document
link to another part of the same document
In this case, clicking triggers an action, you should use a <button type="button"> tag.