I am designing one html page inside that I am using javascript also , what my requirement is when ever the page is loading the first div should be displayed when ever I click on that icon it should hide and it displays the second div content,for that please help me to fix the issue..
<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>
Your toggle function could be like this:
function toggle() {
var x = document.getElementsByClassName('second');
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
I would suggest using and id on the element instead of a class as it is explained here:
https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp
There are multiple ways you can do it. The 2 I normally use are:
<input type="checkbox" />. This allows to achieve it without using any javascript at all, but it has a bit of complex css to it. You can check out this https://css-tricks.com/the-checkbox-hack/ for reference..active { display: block } class in your css and in javascript you can write something likefunction toggle() {
var element = document.querySelector(".second");
element.classList.toggle("active");
}
but before you need to make .second { display: none }
I am sure that there're more ways of doing this, but these are the 2 I use the most depending on the situation.