How to toggle between two divs

Asked 8/2, 2011 at 18:15 Answered 17/5, 2011 at 14:32

Solved javascript jquery toggle toggleclass

I am trying to toggle between two divs. For example, onload, I want the left content to show and the right content will remain hidden. If I click the right div, I want the left content to hide and the right content to appear and vise 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>

Bullyboy answered 8/2, 2011 at 18:15 Comment(0)

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 right DIV onload):

#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 located at the end of the BODY element. Also, notice that the jQuery code should be inside the ready handler: $(function() { ... code ... });

Franchot answered 8/2, 2011 at 18:25 Comment(6)

For some reason, I copied the exact code and it is not working locally but is working on jsfiddle.net. Does the JQuery library have any effect on it? – Bullyboy 8/2, 2011 at 20:41

@Ryan Have you also copied the above HTML code? Where have you placed the JavaScript code (in the HEAD or at the bottom of BODY)? – Yabber 8/2, 2011 at 20:59

I did copy the HTML and I put the JavaScript code in the Head and the HTML in the body. – Bullyboy 8/2, 2011 at 21:35

@Ryan JavaScript code in the HEAD is a bad idea. I'll update my answer with instructions on where to put the JavaScript code. – Yabber 8/2, 2011 at 21:45

Ok great. Also, for my learning purposes (only been coding 2 months), can you give me a quick explanation as to why it is a bad idea to put Javascript in the head? – Bullyboy 8/2, 2011 at 21:58

@Ryan Read here: #383545 – Yabber 8/2, 2011 at 22:9

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

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

Shreeves answered 17/5, 2011 at 14:32 Comment(1)

This will toggle each div after a number of seconds and without a click event; not exactly what the OP was asking, but precisely what I needed. Thanks! – Crinkumcrankum 29/1 at 20:19

Since u tagged the question jquery ill assume your open to a jquery solution. It will make this very simple. Check out the sample jsfiddle below...

http://jsfiddle.net/VztjL/

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

Unblock answered 8/2, 2011 at 18:22 Comment(0)

For starters, the closing tag for is missing. Pesky things, those.

Second, 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>

Burleson answered 8/2, 2011 at 18:30 Comment(0)

You are only toggling the visibility for 1 of the 2 elements each time. When you click on the left, it's going to disappear, but you didn't tell the right side to appear. Try:

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

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

Asternal answered 8/2, 2011 at 18:21 Comment(0)

Recommended topics

Hot tags