How to hide and display when ever onclick function happen by using javascript?

Question

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>

Please add the code you've attempted to your question as a minimal reproducible example. — Andy
– Andy, Commented Nov 3, 2021 at 16:19
SO is not a "please code this for me" forum. How much research effort is expected of Stack Overflow users? — Peter Pointer
– Peter Pointer, Commented Nov 3, 2021 at 16:37

Diego Ferrari · Accepted Answer · 2021-11-03 16:26:07Z

1

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

answered Nov 3, 2021 at 16:26

Diego Ferrari

1615 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sai Tarun Over a year ago

On click of the icon it should be hidden but if I use this function it won't be hidden

Tim Nimets · Accepted Answer · 2021-11-03 16:30:47Z

1

There are multiple ways you can do it. The 2 I normally use are:

Wrapping the icon into label and adding <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.
This is easy to do. You need to define .active { display: block } class in your css and in javascript you can write something like

function 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.

edited Nov 3, 2021 at 16:30

answered Nov 3, 2021 at 16:24

Tim Nimets

3642 silver badges9 bronze badges

Collectives™ on Stack Overflow

How to hide and display when ever onclick function happen by using javascript?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related