This is the rundown of services
<div>
<a href="#hig"><button class="tag-btn">High blood pressure Diabetes</button></a>
<a href="#hih"><button class="tag-btn">High cholesterol</button></a>
<a href="#thy"><button class="tag-btn">Thyroid disorder screening</button></a>
<a href="#car"><button class="tag-btn">Cardiovascular risk assessment</button></a>
<a href="#can"><button class="tag-btn">Cancer screenings</button></a>
<a href="#bre"><button class="tag-btn">Breast screening</button></a>
<a href="#lun"><button class="tag-btn">Lung screening</button></a>
<a href="#col"><button class="tag-btn">Colon screening Cervical screening</button></a>
<a href="#pro"><button class="tag-btn">Prostate screening</button></a>
<a href="#add"><button class="tag-btn">Addiction screening</button></a>
</div>
These are the corresponding service sections
<div class="serv-text fl-wrap one" id="hig">
b
</div>
<div class="serv-text fl-wrap one" id="hih">
c
</div>
<div class="serv-text fl-wrap one" id="thy">
d
</div>
<div class="serv-text fl-wrap one" id="car">
e
</div>
<div class="serv-text fl-wrap one" id="can">
f
</div>
<div class="serv-text fl-wrap one" id="bre">
g
</div>
<div class="serv-text fl-wrap one" id="lun">
h
</div>
<div class="serv-text fl-wrap one" id="col">
e
</div>
<div class="serv-text fl-wrap one" id="pro">
j
</div>
<div class="serv-text fl-wrap one" id="add">
k
</div>
And this is the CSS code snippet
#obs, #hig, #hih, #thy, #car, #can, #bre, #lun, #col, #pro, #add {
display: none;
}
#obs:target, #hig:target, #hih:target, #thy:target, #car:target, #can:target, #bre:target, #lun:target, #col:target, #pro:target, #add:target {
display: block;
}
Although the above code works fine, I have a sticky header which causes the displayed service section to be obstructed under the header. This requires constant scrolling for the users.
Is there a more effective way to implement this considering the sticky header?
Maybe JavaScript could help but I'm unsure. Any suggestions?
Thanks for your assistance!