如何使用toggle_visibility隐藏div然后在单击时显示另一个div

Question

I want show div 1 on html load while hiding div 2, then using onclick I want to exchange their visibility like when clicking button hide div1 then show div2, then when clicking again, hide div2 then show div 1. Here is my code:

 function toggle_visibility(id) { var e = document.getElementById(id); if(e.style.display == 'none') e.style.display = 'block'; else e.style.display = 'none'; }

 <a href="#" onclick="toggle_visibility('foo');">Hide DIV 1 show DIV 2</a> <div id="foo"> This is DIV 1</div></div> <div id="foo"> This is DIV 2</div></div>

Answer 1

Initially set your div1 to display:none; and simply toggle them. I have used class targetElement just to get rid of common selector. hidden class is used to use the default style display:none; and to replace the inline-style .

I woul like to use button instead of <a href="#">Click here</a> . to do this simple replace a tag with <button type="button"> Button Name </button>

 $('#toggleButton').on('click',function(){ $('.targetElement').toggleClass('hidden'); });

 .hidden{ display:none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a id="toggleButton" href="#">Click here</a> <div id="foo" class="targetElement hidden"> This is DIV 1</div></div> <div id="foo" class="targetElement"> This is DIV 2</div></div>

Answer 2

It is not good practice to have 2 elements with the same ID. ID's should always be unique. Use classes instead. To hide a div onload. Simply add the css to your html element in a style attribute. You also had unecessary </div> tags that I removed.

Here is working code using JQuery (less code) :

 $("#toggle").on("click", function() { $(".isToggable").toggle(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a id="toggle" href="#" >Hide DIV 1 show DIV 2</a> <div class="isToggable"> This is DIV 1</div> <div class="isToggable" style="display:none"> This is DIV 2</div>

In the html, I added classes to elements that you want to be toggled. I also added an ID to the a tag. In the JQuery I added an event listener onclick on that a tag using it's ID. $(".isToggable").toggle(); takes all the elements with the class "isToggable" in the page toggles their visibility.

With no parameters, the .toggle() method simply toggles the visibility of elements

More information on toggle : JQuery Toggle

---

Old answer (vanilla javascript)

 function toggle_visibility(id) { var container = document.getElementById(id); for (var i = 0; i < container.children.length; i++) { let currentElem = container.children[i]; if (currentElem.style.display === "none") { currentElem.style.display = "block"; } else { currentElem.style.display = "none"; } } }

 <a href="#" onclick="toggle_visibility('container');">Hide DIV 1 show DIV 2</a> <div id="container"> <div> This is DIV 1</div> <div style="display:none"> This is DIV 2</div> </div>

How this works is you put your elements that you want to toggle the visibility inside a container and the toggle_visibility function will toggle all the visibilities of the elements inside. That way if you decide to add more div's they will all be handled.

If you have any questions on how this works. Don't hesitate to ask. Hope it helps !

Answer 3

The attributeid must be unique in a document. Use class instead.

First use CSS to hide the second div. Then use forEach() to hide/show div. You should also avoid using inline event handler.

Try the following way:

 document.querySelector('a').addEventListener('click',function(){ [].forEach.call(document.querySelectorAll('.foo'), function(el){ if(el.style.display == 'none') el.style.display = 'block'; else el.style.display = 'none'; }); });

 <a href="#">Hide DIV 1 show DIV 2</a> <div class="foo"> This is DIV 1</div></div> <div class="foo" style="display:none;"> This is DIV 2</div></div>