Quiero mostrar/ocultar contenido usando únicamente CSS sin JavaScript. Llegué a esta solución.
Cuando hago clic en el enlace, salta hacia abajo en la página. Necesito una solución CSS pura, ¿cómo detenerla para que salte?
p[id^="detailView-"] { display: none; } p[id^="detailView-"]:target { display: block; }
<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>
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 invisibledisplay: none
eliminará el elemento de la página y colapsará el espacio que ocupabaEjemplo 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: