Así que tengo que crear este programa donde necesito crear una función de "Personas también preguntaron" (Esto ocultará las respuestas de forma predeterminada, y si se hace clic en las preguntas, mostrará la respuesta para esa pregunta específica), sin embargo, no No sé cómo ocultar y mostrar elementos usando mi propia función Display() y Answer(). Estoy teniendo dificultades ya que soy bastante nuevo en JavaScript.
¡Cualquier ayuda sería muy apreciada! ¡Gracias!
La mejor manera de mostrar/ocultar elementos, como correctamente señalaste, es modificando la display atributos CSS.
Ahora, en tu caso agregaría una clase .hidden que agregas a los elementos que deseas ocultar. Y luego, para revelarlos, simplemente elimina esa clase del elemento respectivo.
.hidden { display: none; } function toggleElementById(elementId) { var element = document.getElementById(elementId); element.classList.toggle("hidden"); }Si agrega una ID a cada respuesta y agrega un atributo objetivo a la pregunta, puede obtener fácilmente la ID objetivo del elemento de pregunta.
<div class="question" data-target="answer1"> What does JavaScript do? </div> <div class="answer" id="answer1"> <!-- ... --> </div> function toggleAnswer(e) { var target = e.target.getAttribute("data-target"); toggleElementById(target); }Si las respuestas y las preguntas se correlacionan, puede recorrerlas mientras agrega un oyente para eliminar o agregar una clase con la propiedad display:none . Ver el fragmento.
const questions = document.querySelectorAll(".question"); const answers = document.querySelectorAll(".answer"); questions.forEach((question, index) => { question.addEventListener("click", () => { let answer = answers[index].classList; answer.contains("hidden") ? answer.remove("hidden") : answer.add("hidden"); }); }); .hidden { display:none ; } <main> <h1>People also ask</h1> <ul id="questions"> <li> <div class="question"> How do I enable JavaScript Chrome? </div> <div class="answer hidden"> <p><strong>If you'd like to turn JavaScript off or on for all sites:</strong></p> <ol> <li>Click the Chrome menu in the top right-hand corner of your browser.</li> <li>Select Settings.</li> <li>Click Show advanced settings.</li> <li>Under the "Privacy" section, click the Content settings button.</li> </ol> </div> <div class="question"> What do you use JavaScript for? </div> <div class="answer hidden"> <p><strong>Webpages</strong></p> <ol> <li>JavaScript is commonly used for creating web pages. It allows us to add dynamic behavior to the webpage and add special effects to the webpage. On websites, it is mainly used for validation purposes. JavaScript helps us to execute complex actions and also enables the interaction of websites with visitors. </ol> </div> <div class="question"> What does JavaScript do? </div> <div class="answer hidden"> <p><strong>JavaScript</strong></p> <ol> <li>JavaScript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else. (Okay, not everything, but it is amazing what you can achieve with a few lines of JavaScript code.)</li> </ol> </div> <div class="question"> Is it useful to learn JavaScript? </div> <div class="answer hidden"> <p><strong>Why learn JavaScript?</strong></p> <ol> <li>The most obvious reason for learning JavaScript is if you have hopes of becoming a web developer. Even if you haven't got your heart set on a tech career, being proficient in this language will enable you to build websites from scratch—a pretty useful skill to have in today's job market! </ol> </div> </li> </main>