Using radio buttons with a div tag

[ryanlum]

hey.. this is what i want to do... i got 1 div, and 2 radio buttonsradio a will show the div while radio b will hide the div...does anyone know how to do this??can you pls give me a simple example... thx a bunch

[Skemcin]

I build something like that for a marketing landing page once. View the source and look for the div with id="REGISTRATION" and make make the onclick attribute in your radio button run the expandcontent function accordingly.Example:http://www.lessonlab.com/sfinstitute/(click "register")Javascript Source Code:http://www.lessonlab.com/sfinstitute/includes/toggle.jsI figured it would be easier to give you that then to copy-n-paste the code in here.(thats one way to do it)

[jameslee]

paste your code.

[Skemcin]

paste your code.

oooooooookay . . .

/************************************************ Switch Content script- © Dynamic Drive (www.dynamicdrive.com)* This notice must stay intact for use* Visit http://www.dynamicdrive.com/ for full source code***********************************************/var enablepersist="on" //Enable saving state of content structure? (on/off)if (document.getElementById){document.write('<style type="text/css">')document.write('.switchcontent{display:none;}')document.write('</style>')}function getElementbyClass(classname){ccollect=new Array()var inc=0var alltags=document.all? document.all : document.getElementsByTagName("*")for (i=0; i<alltags.length; i++){if (alltags.className==classname)ccollect[inc++]=alltags}}function contractcontent(omit){var inc=0while (ccollect[inc]){if (ccollect[inc].id!=omit)ccollect[inc].style.display="none"inc++}}function expandcontent(cid){if (typeof ccollect!="undefined"){contractcontent(cid)document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="block")? "block" : "none"selectedItem=cid+"|"+document.getElementById(cid).style.display}}function revivecontent(){selectedItem=getselectedItem()selectedComponents=selectedItem.split("|")contractcontent(selectedComponents[0])document.getElementById(selectedComponents[0]).style.display=selectedComponents[1]}function get_cookie(Name) { var search = Name + "="var returnvalue = "";if (document.cookie.length > 0) {offset = document.cookie.indexOf(search)if (offset != -1) { offset += search.lengthend = document.cookie.indexOf(";", offset);if (end == -1) end = document.cookie.length;returnvalue=unescape(document.cookie.substring(offset, end))}}return returnvalue;}function getselectedItem(){if (get_cookie(window.location.pathname) != ""){selectedItem=get_cookie(window.location.pathname)return selectedItem}elsereturn ""}function saveswitchstate(){if (typeof selectedItem!="undefined")document.cookie=window.location.pathname+"="+selectedItem}function do_onload(){getElementbyClass("switchcontent")if (enablepersist=="on" && getselectedItem()!="")revivecontent()}if (window.addEventListener)window.addEventListener("load", do_onload, false)else if (window.attachEvent)window.attachEvent("onload", do_onload)else if (document.getElementById)window.onload=do_onloadif (enablepersist=="on" && document.getElementById)window.onunload=saveswitchstate

I'd make all that an external file. Then on the page you want to do this on, it would go something liek this:

<input type="radio" name="xxxxxx" value="aaaaaa" onchange="expandcontent('REGISTRATION');" /> aaaaaa<br /><input type="radio" name="xxxxxx" value="bbbbbb" onchange="expandcontent('REGISTRATION');" /> bbbbbb<br /><div id="REGISTRATION" style="display:none;">I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdgnieg The phaonmneal pweor of the hmuan mnid. Aoccdrnig to a rscheearch at Cmabrigde Uinervtisy, it deosn't mttaer inwaht oredr the ltteers in a wrod are, the olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rghit pclae. The rset can be a taotl mses and you can sitll raed it wouthit a porbelm. Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef, but the wrod as a wlohe.<br /></div>

works like a charm, here is it live:http://www.iribbit.net/_files/radio-showhide.htmYou can add more div's and change id's and have fun with it.