Jump to content

Using radio buttons with a div tag


Recommended Posts

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)

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...