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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...