Estoy diseñando una página html dentro de la que también estoy usando javascript, cuál es mi requisito cuando la página se está cargando, el primer div debe mostrarse cada vez que hago clic en ese ícono, debe ocultarse y muestra el contenido del segundo div, para eso por favor ayúdenme a solucionar el problema..
<div class="first"> <i class="fa fa-heart" onclick="toggle()" ></i> </div> <div class="second"> <b> I am from second div</b> <div> <script> flag=true; here I am not getting how to write the function to achieve my task </script>Su función de alternar podría ser así:
function toggle() { var x = document.getElementsByClassName('second'); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } } Sugeriría usar e id en el elemento en lugar de una clase como se explica aquí: https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp
Hay varias formas de hacerlo. Los 2 que uso normalmente son:
<input type="checkbox" /> . Esto permite lograrlo sin usar javascript en absoluto, pero tiene un poco de CSS complejo. Puede consultar este https://css-tricks.com/the-checkbox-hack/ como referencia..active { display: block } en su css y en javascript puede escribir algo como function toggle() { var element = document.querySelector(".second"); element.classList.toggle("active"); } pero antes necesitas hacer .second { display: none }
Estoy seguro de que hay más formas de hacer esto, pero estas son las 2 que más uso dependiendo de la situación.