revealed content not starting at desired point

Hey, i have 6 paragraphs, 3 of which are hidden that become revealed when pressing a button. When scrolling through with a screen reader and pressing the button, you have to scroll up to read out the newly revealed items as scrolling down just moves on. In terms of this example, would there be a way to put the focus on paragraph 4 after pressing the button (or at the start of the revealed content) so everything can be read out smoothly and in order. Is this a common practice to do with things like this? I'm new to js so any recommendations are most certainly welcome for that too haha (i notice the hidden content flickers when reloading so maybe that's something that could be improved perhaps), thanks in advance.

https://codepen.io/deerCabin/pen/KKLOQbY
Was this page helpful?