All geek questions in one place

How to switch between two divs

I am trying to switch between two divs. For example, onload, I want the left content to be displayed and the correct content to remain hidden. If I click on the right div, I want the left content to be hidden and the desired content to appear, and vice versa. I am very new to javascript, but here is what I have. I can't seem to get it to work. Please, help...

Here is my HTML code:

<div onclick="toggle_visibility('left');"> Left </div> <div onclick="toggle_visibility('right');"> Right </div> <div id="left" style="display: block;"> This is the content for the left side <div> <div id="right" style="display: none;"> This is the content for the ride side </div>

Here is the Javascript I am using:

 <script type="text/javascript"> function toggle_visibility(id) { var e = document.getElementById(id); if(e.style.display == 'block') e.style.display = 'none'; else e.style.display = 'block'; } </script>
+4
source share
5 answers

Live demo: http://jsfiddle.net/PauWy/1/

HTML:

 <p id="toggle"> <span> Left </span> <span> Right </span> </p> <div id="left"> LEFT CONTENT </div> <div id="right"> RIGHT CONTENT </div>

JavaScript:

 $('#toggle > span').click(function() { var ix = $(this).index(); $('#left').toggle( ix === 0 ); $('#right').toggle( ix === 1 ); });

CSS (to hide the correct loading of the DIV):

 #right { display:none; }

Put the JavaScript code at the bottom of the page.

  <script> $(function() { // put jQuery code here }); </script> </body>

Notice how the SCRIPT element is at the end of the BODY element. Also note that jQuery code must be inside the finished handler: $(function() { ... code ... });

+6
source

Here is a small example that switches between two html documents. The function is first called when the body is loaded. U need to replace 1.html and 2.html with the two pages you want to flip between them. If you want a longer delay, replace 3000 with whatever you want. the timer value is in milliseconds, so if you want 20 seconds its 20,000.

  <html> <head> <script type="text/javascript"> top.visible_id = 'right'; function toggle_visibility() { var right_e = document.getElementById('right'); var left_e = document.getElementById('left'); if (top.visible_id == 'right') { right_e.style.display = 'none'; left_e.style.display = 'block'; top.visible_id = 'left'; } else { right_e.style.display = 'block'; left_e.style.display = 'none'; top.visible_id = 'right'; } var t = setTimeout("toggle_visibility()",3000); } </script> </head> <body onload="toggle_visibility();"> <div id="left" > <iframe src="1.html"></iframe> </div> <div id="right" > <iframe src="2.html"></iframe> </div> </body> </html>
+3
source

Since u noted the jquery question, then let your open be for a jQuery solution. This will make it very easy. Check out the jsfiddle example below ...

http://jsfiddle.net/VztjL/

of course, you will need css for styling, but clicking div in the sample will switch between two divs

+1
source

You only switch visibility for 1 of 2 elements each time. When you click left, it will disappear, but you have not indicated the right side. Try:

 <div onclick="toggle_visibility('left');toggle_visibility('right');"> Left </div> <div onclick="toggle_visibility('right');toggle_visibility('left');"> Right </div>
0
source

To start, there is no closing tag. Sand stuff, those.

Secondly, you need to keep track of the current visible div so that you can hide it. The following should work.

 <html> <head> <script type="text/javascript"> top.visible_div_id = 'right'; function toggle_visibility(id) { var old_e = document.getElementById(top.visible_div_id); var new_e = document.getElementById(id); if(old_e) { console.log('old', old_e, 'none'); old_e.style.display = 'none'; } console.log('new', new_e, 'block'); new_e.style.display = 'block'; top.visible_div_id = id; } </script> </head> <body onload="toggle_visibility('left');"> <div onclick="toggle_visibility('left');"> Left </div> <div onclick="toggle_visibility('right');" > Right </div> <div id="left" > This is the content for the left side </div> <div id="right" > This is the content for the ride side </div> </body> </html>
0
source

Source: https://habr.com/ru/post/1338908/

More articles:


All Articles