MyBB Community Forums

Full Version: Javascript Help
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Hey All,

I'm looking for a little help with some JS as I usually suck at that Toungue
What I want to do is have 2 radio buttons which show and hide 2 different div's.

Any ideas? Smile
You mean like clicking the radio buttons to decide if the other 2 divs are hidden or not?
I think what he wants is if radio button A is selected, then div A is shown, and if B is selected, div B is shown.

I would first try using the "onClick" event to show the proper div and hide the other one.
Ok care to elaborate firestryke? That is what I want though Smile
I think this is what you are looking for..
http://api.jquery.com/slideToggle/
Javascript, Prototype or jQuery? All have their quirks (jQuery can slide on its own - Prototype needs Scriptaculous or some other voodoo to do the dirty work - pure JS is stupid).

onclick="$('name_of_a_div').hide(); $('name_of_second_div').show();"

Apply to the first radio box, then reverse the names for the second box. Simples.
Thanks Tomm that is pretty simple :p
So I'm assuming that's JQuery from your comments about JS above? ^_^
That code will actually work with both libraries. Toungue

You can do fancier things with jQuery, like sliding, with less code than Prototype. If you're not working with MyBB, or another project that uses Prototype, you should really get to grips with jQuery - it's awesome. Toungue
<html>
<head>
<title>Click and show</title>
<style type="text/css">body {font-family: Verdana;}</style>
<script language="Javascript">
<!-- Begin
// -- Contact verify
function button_show ( )
{ valid = true;
if ( document.tlform.Name.value == "" )
{alert ( "Please click a radio button for the nature of your request." ); valid = false;}
return valid;}
var message="";
function clickIE() {if (document.all) {(message);return false;}}
function clickNS(e) {if (document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {(message);return false;}}}
if (document.layers) {document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
document.oncontextmenu=new Function("return false")
function showdetails(el) {
if (el.value == "Edit") {document.getElementById('text').style.display = "block";}
else {document.getElementById('text').style.display = "none";
document.getElementById('eded').value = ''; } }
// End -->
</script>
</head>
<body>
<div align="center">
<p>Radio Button Option Drop Down</p>
<form name="tlform" action="#" method="post" onSubmit="return button_show ( );">
<small><b>Pick an option: </b> <br>
Yes <input type="radio" name="request" value="Edit" onclick="showdetails(this);"> -
No <input type="radio" name="request" value="Delete" onclick="showdetails(this);" checked></small><br>
<div id="text" style="display:none;" align=center><small>Some kind of text.</small><br>
<input type="text" name="editdetails" class="iparea" id="eded" value="">
<br>
The form element could be anything.<br>
Just insert the code into a form.
</div>
</form>
</div>
</body></html>
Ceylon Tea