Simplemente organice su html para que las etiquetas de anclaje estén en la parte superior así

 p[id^="detailView-"] { display: none; } p[id^="detailView-"]:target { display: block; }

 <a href="#detailView-1">Show View1</a> <a href="#detailView-2">Show View2</a> <p id="detailView-1">View1</p> <p id="detailView-2">View2</p>

En esta situación, en lugar de alternar entre:

• display: none
• display: block

puede alternar entre:

• visibility: hidden
• visibility: visible

La diferencia entre las dos propiedades es que:

• visibility mantiene el espacio de página para un elemento, incluso cuando ese elemento es invisible
• display: none eliminará el elemento de la página y colapsará el espacio que ocupaba

Ejemplo de trabajo:

 p[id^="detailView-"] { visibility: hidden; } p[id^="detailView-"]:target { visibility: visible; }

 <a href="#detailView-1">Show View1</a> <p id="detailView-1">View1</p> <a href="#detailView-2">Show View2</a> <p id="detailView-2">View2</p>

Otras lecturas:

• https://developer.mozilla.org/en-US/docs/Web/CSS/visibility