I am torn between 2 UI patterns for how to present text content that is broken up into large chunks. This is a pattern I'd like to use across the site, so it could be for things like FAQs as well as text-heavy pages that have logical sub-sections.
The accordion method is more compact, allows you to see any content below the accordions more easily, and avoids duplicating section names on the page. On the other hand, it requires additional clicks if you want to see more than one section, whereas anchor links allow you to just scroll rather than having to repeatedly click. (An "expand all" option could be used in the accordion, but then that assumes people want to read everything all at once and adds another widget to the page.) Anchor links still have the list of sections up front, but allow you to easily scroll through them if you're interested in more than just one section without having to do any clicking.
I see a lot of pros and cons and was surprised to not be able to find any research on this -- although maybe I'm just googling the wrong words. Any suggestions? I've mocked up the 2 examples in a screenshot.
(Additional note: this is for a responsive site, so things like touch size of links/accordions will be accommodated either way.)