Utilizo un acordeón CSS puro para presentar mi contenido. El acordeón funciona con casillas de verificación normales. Ahora quiero implementar que al enviar un enlace simple, se marcará una sola casilla de verificación y, con la ayuda de un ancla, el navegador debe saltar a esa entrada y mostrar el contenido específico al lector.
Todo debe hacerse preferiblemente sin un lenguaje de programación o secuencias de comandos, pero después de mucha investigación, creo que al menos se requerirá JavaScript (debe ejecutarse en el lado del cliente, por lo que no PHP o similar).
He buscado y probado mucho, pero desafortunadamente no he encontrado ninguna solución adecuada que funcione.
``` <!DOCTYPE html> <html> <head> <title>My example Website</title> </head> <body> <style> body { font-size: 21px; font-family: Tahoma, Geneva, sans-serif; max-width: 550px; margin: 0 auto; background-color: black; } input { display: none; } label { display: block; padding: 8px 22px; margin: 0 0 1px 0; cursor: pointer; background: #181818; border: 1px solid white; border-radius: 5px; color: #FFF; position: relative; } label:hover { background: white; border: 1px solid white; color:black; } label::after { content: '+'; font-size: 22px; font-weight: bold; position: absolute; right: 10px; top: 2px; } input:checked + label::after { content: '-'; right: 14px; top: 3px; } .content { background: #DBEECD; background: -webkit-linear-gradient(bottom right, #DBEECD, #EBD1CD); background: -moz-linear-gradient(bottom right, #DBEECD, #EBD1CD); background: linear-gradient(to top left, #DBEECD, #EBD1CD); padding: 10px 25px 10px 25px; border: 1px solid #A7A7A7; margin: 0 0 1px 0; border-radius: 1px; } input + label + .content { display: none; } input:checked + label + .content { display: block; } </style> <input type="checkbox" id="title1" name="contentbox" /> <label for="title1">Content 1</label> <div class="content"> My Content 1 </div> </div> <input type="checkbox" id="title2" name="contentbox" /> <label for="title2">Content 2</label> <div class="content"> My Content 2 </div> </div> <input type="checkbox" id="title3" name="contentbox" /> <label for="title3">Content 3</label> <div class="content"> My Content 3 </div> </body> </html> ```Tienes razón en que se requiere JavaScript. Proporcioné una solución, pero no la probé, porque no es posible probar en el fragmento. Debe seleccionar la casilla de verificación relevante cuando se detecta una etiqueta hash en la URL que corresponde con una ID de casilla de verificación.
Entonces usaría algo de tiempo https://www.website.com/#title1
// Check if URL of browwser window has hash tag if (location.hash) { // Get URL hash tag const hash = window.location.hash; // Select checkbox with ID of hashtag const checkbox = document.querySelector(hash); // Check if checkbox exists if(checkbox) { // Set selected checkbox as checked checkbox.checked = true; } } body { font-size: 21px; font-family: Tahoma, Geneva, sans-serif; max-width: 550px; margin: 0 auto; background-color: black; } input { display: none; } label { display: block; padding: 8px 22px; margin: 0 0 1px 0; cursor: pointer; background: #181818; border: 1px solid white; border-radius: 5px; color: #FFF; position: relative; } label:hover { background: white; border: 1px solid white; color:black; } label::after { content: '+'; font-size: 22px; font-weight: bold; position: absolute; right: 10px; top: 2px; } input:checked + label::after { content: '-'; right: 14px; top: 3px; } .content { background: #DBEECD; background: -webkit-linear-gradient(bottom right, #DBEECD, #EBD1CD); background: -moz-linear-gradient(bottom right, #DBEECD, #EBD1CD); background: linear-gradient(to top left, #DBEECD, #EBD1CD); padding: 10px 25px 10px 25px; border: 1px solid #A7A7A7; margin: 0 0 1px 0; border-radius: 1px; } input + label + .content { display: none; } input:checked + label + .content { display: block; } <input type="checkbox" id="title1" name="contentbox" /> <label for="title1">Content 1</label> <div class="content"> My Content 1 </div> <input type="checkbox" id="title2" name="contentbox" /> <label for="title2">Content 2</label> <div class="content"> My Content 2 </div> <input type="checkbox" id="title3" name="contentbox" /> <label for="title3">Content 3</label> <div class="content"> My Content 3 </div>