1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Using Javascript to switch between two div sections.

Discussion in 'CSS' started by Submerged, Jul 20, 2009.

  1. #1
    I'm working on a script that has two separate lines of content labeled as two separate div ids. My hope is to have a link that will trip a JS function that will figure out which of the two are currently showing (one shows by default) and turn that off while turning on the other.

    I have an example script (very generic) that I can't get to work; if someone could fix this I could apply it to my more complicated script without a problem (hopefully :)).
    SEMrush
    As a quick note, the two div id names are related; one is "{mydiv}on" and the other is "{mydiv}off}." The JS function is supplied with the root ("mydiv" in this example) and automatically creates the two variables of the actual div names.

    Thanks for the help!
    <div id="mydivon" style="display:block">This is on.</div>
    <div id="mydivoff" style="display:none">This is off.</div>
    
    <a href="#" onClick=toggleDiv('mydiv');">Toggle Div Visibility</a>
    
    <script language="javascript">
      function toggleDiv(divid){
      
      	varon = divid + 'on';
    	varoff = divid + 'off';
    
        if(document.getElementById(varon).style.display == 'none')
        { 
          document.getElementById(varon).style.display = 'block';
          document.getElementById(varoff).style.display = 'none'; 
        }
        
        else
        {
          document.getElementById(varoff).style.display = 'block';
          document.getElementById(varon).style.display = 'none';
        }
      
     } 
    </script>
    Code (markup):
     
    Submerged, Jul 20, 2009 IP
    SEMrush
  2. Submerged

    Submerged Active Member

    Messages:
    132
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #2
    Ah . . . never mind. Evidently it was a trivial typo error, I copy/pasted code from a different source, changed the variables, and now it works just fine.

    If someone else is trying to do this, the correct code is:
    <div id="mydivon" style="display:block">This is on.</div>
    <div id="mydivoff" style="display:none">This is off.</div>
    
    
    <a href="javascript:;" onmousedown="toggleDiv('mydiv');">Toggle Div Visibility</a>
    
    <script language="javascript">
      function toggleDiv(divid)
      {
      
      	varon = divid + 'on';
    	varoff = divid + 'off';
    
    	if(document.getElementById(varon).style.display == 'block')
    	{
    	document.getElementById(varon).style.display = 'none';
    	document.getElementById(varoff).style.display = 'block';
    	}
    	
    	else
    	{	
    	document.getElementById(varoff).style.display = 'none';
    	document.getElementById(varon).style.display = 'block'
    	}
    } 
    </script>
    Code (markup):
     
    Submerged, Jul 20, 2009 IP
  3. WapTug

    WapTug Member

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    31
    #3
    This is really cool. I found this very helpful for a project I am working on. This works great. I used it to create an informative pop-up info box that my users could toggle. I tried putting in some java script code in each div but it would not fire it when I toggled it after the first page load. I wonder how to make this work.
     
    WapTug, Oct 19, 2018 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,670
    Likes Received:
    1,564
    Best Answers:
    226
    Trophy Points:
    515
    #4
    NOT even JavaScript's job anymore... at least if you don't care about IE8/earlier.

    
    <input type="radio" name="mydivs" id="mydiv_on" checked>
    <div>This is on.</div>
    <label for="mydiv_off">Toggle to second div</label>
    
    <input type="radio" name="mydivs" id="mydiv_off">
    <div>This is off.</div>
    <label for="mydiv_on">Toggle to first div</label>
    
    Code (markup):
    
    #mydiv_on,
    #mydiv_off {
    	/* we hide these off screen, if we set display:none it breaks in IE9+ */
    	position:absolute;
    	left:-999em;
    }
    
    #mydiv_on + div,
    #mydiv_off + div,
    #mydiv_on + div + label,
    #mydiv_off + div + label {
    	display:none;
    }
    
    #mydiv_on:checked + div,
    #mydiv_off:checked + div,
    #mydiv_on:checked + div + label,
    #mydiv_off:checked + div + label {
    	display:block;
    }
    
    Code (markup):
    No JS needed.
     
    deathshadow, Oct 24, 2018 IP