We Keep Coding

Visibility of sub-menu filter based on the primary choice in XSL?

Expected the primary menu (Report Type) to be visible only. Before and After selection from Primary Menu; Other filters are not visible
Expected to only show the dates if any report selected other than R30: After selection of any R report, except R30 will make start-date and end-date visible
Expected to only show mineSite & CertificateType after selection of R30: After selection of R30 report, only mineSite (required) & certificateType is visible
Here is what I have been using (Javascript function)
function showDates(sel)
{
if(sel.value == 'R30')
{
document.getElementById('dates').style.display = 'none';
document.getElementById('m1warning').style.display = 'none';
document.getElementById('mines').style.display = '';
document.getElementById('certificate').style.display = '';
}
else if (sel.value == 'M01')
{
document.getElementById('dates').style.display = 'none';
document.getElementById('m1warning').style.display = 'inline';
document.getElementById('mines').style.display = 'none';
document.getElementById('certificate').style.display = 'none';
}
else if(sel.value == 'R01' || sel.value == 'R10' || sel.value == 'R20' || sel.value == '')
{
document.getElementById('mines').style.display = 'none';
document.getElementById('dates').style.display = '';
document.getElementById('certificate').style.display = 'none';
document.getElementById('m1warning').style.display = 'none';
}
else if(sel.value == '')
{
document.getElementById('mines').style.display = 'none';
document.getElementById('dates').style.display = 'none';
document.getElementById('certificate').style.display = 'none';
document.getElementById('m1warning').style.display = 'none';
}
}
function showOptions(sel)
{
if(sel.value == 'R30')
{
document.getElementById('dates').style.display = 'none';
document.getElementById('m1warning').style.display = 'none';
document.getElementById('mines').style.display = '';
document.getElementById('certificate').style.display = '';
}
else if (sel.value == 'M01')
{
document.getElementById('dates').style.display = 'none';
document.getElementById('m1warning').style.display = 'inline';
document.getElementById('mines').style.display = 'none';
document.getElementById('certificate').style.display = 'none';
}
else if(sel.value == 'R01' || sel.value == 'R10' || sel.value == 'R20' || sel.value == '')
{
document.getElementById('mines').style.display = 'none';
document.getElementById('dates').style.display = '';
document.getElementById('certificate').style.display = 'none';
document.getElementById('m1warning').style.display = 'none';
}
else if(sel.value == '')
{
document.getElementById('mines').style.display = 'none';
document.getElementById('dates').style.display = 'none';
document.getElementById('certificate').style.display = 'none';
document.getElementById('m1warning').style.display = 'none';
}
}
<div class="dates" id="dates">
<xsl:text>Start Date:</xsl:text>
<input id="startDate" name="startdate" type="date" size="15" placeholder="yyyy-mm-dd" style="width:150px"/>
<xsl:text> End Date:</xsl:text>
<input id="endDate" name="enddate" type="date" size="15" placeholder="yyyy-mm-dd" style="width:150px"/>
</div>
<table>
<tr>
<td>
<div class="mines" id="mines">
<form id="mine_site" name = "form2">
<span class="site_label">Mine Site: </span>
<select name="minesite" id="minesite" onchange="showOptions(this)" style="width:150px">
<option value=""/>
<xsl:variable name="mine_sites" select="$codes/code[#name eq 'employer']"/>
<xsl:for-each select="$mine_sites/item">
<xsl:element name="option">
<xsl:attribute name="value" select="#key"/>
<xsl:apply-templates/>
</xsl:element>
</xsl:for-each>
</select>
</form>
</div>
</td>
<td>
<div class="certificate" id="certificate">
<span class="certificate_label">Certificate Type: </span>
<select name="typeOfcertificate" id="typeOfcertificate" onchange="showOptions(this)" style="width:150px">
<option value=""/>
<xsl:variable name="certificate_types" select="$codes/code[#name eq 'certiType']" />
<xsl:for-each select="$certificate_types/item">
<xsl:sort select="#order"/>
<xsl:element name="option">
<xsl:attribute name="value" select="#key"/>
<xsl:apply-templates/>
</xsl:element>
</xsl:for-each>
</select>
</div>
</td>
</tr>
</table>
<br/>
<input type="submit" class="buttonToLink" value="Submit" onclick="beginCheckMReport()"/>
</form>
Badly stuck on how can I make the secondary filters dependent on the Primary Menu selection. And after the submission of report, making the form empty
Sorry for bothering everyone with this silly issue

Confusion with hiding some input fields using JS vanilla

I want to show hidden input fields when check "Buy on company" checkbox. It works, but if I uncheck it leaving "Is VAT exemt" checked and return: "VAT ID field" is shown with "Is VAT exemt" checkbox checked. So I want to avoid this situation.
Picture of situation:
document.getElementById('billing_company').style['display'] = 'none';
document.getElementById('billing_company_code').style['display'] = 'none';
document.getElementById('is_vat_exempt').style['display'] = 'none';
document.getElementById('is_vat_exempt_field').style['display'] = 'none';
document.getElementById('billing_vat_id').style['display'] = 'none';
document.getElementById('buy_on_company').onclick = function() {
if (this.checked) {
document.getElementById('billing_company').style['display'] = 'block';
document.getElementById('billing_company_code').style['display'] = 'block';
document.getElementById('is_vat_exempt').style['display'] = 'block';
document.getElementById('is_vat_exempt_field').style['display'] = 'block';
document.getElementById('billing_vat_id').style['display'] = 'block';
} else {
document.getElementById('billing_company').style['display'] = 'none';
document.getElementById('billing_company_code').style['display'] = 'none';
document.getElementById('is_vat_exempt').style['display'] = 'none';
document.getElementById('is_vat_exempt_field').style['display'] = 'none';
document.getElementById('billing_vat_id').style['display'] = 'none';
}
};
document.getElementById('is_vat_exempt').onclick = function() {
if (this.checked) {
document.getElementById('billing_vat_id').style['display'] = 'none';
} else {
document.getElementById('billing_vat_id').style['display'] = 'block';
}
};
<div id="buy_on_company_field">
<input type="checkbox" id="buy_on_company"><label>Buy on company</label>
</div>
<div id="billing_company_field">
<input type="text" id="billing_company" placeholder="Company name" style="display: block;">
</div>
<div id="billing_company_code_field">
<input type="text" id="billing_company_code" placeholder="Company code" style="display: block;">
</div>
<div id="is_vat_exempt_field">
<input type="checkbox" id="is_vat_exempt"><label>Is VAT exempt</label>
</div>
<div id="billing_vat_id_field">
<input type="text" id="billing_vat_id" placeholder="VAT ID field" style="display: block;">
</div>

The code for clicking on buy_on_company is always hiding or showing the billing_vat_id field. It needs to test that checkbox.
document.getElementById('billing_company').style['display'] = 'none';
document.getElementById('billing_company_code').style['display'] = 'none';
document.getElementById('is_vat_exempt').style['display'] = 'none';
document.getElementById('is_vat_exempt_field').style['display'] = 'none';
document.getElementById('billing_vat_id').style['display'] = 'none';
document.getElementById('buy_on_company').onclick = function() {
if (this.checked) {
document.getElementById('billing_company').style['display'] = 'block';
document.getElementById('billing_company_code').style['display'] = 'block';
document.getElementById('is_vat_exempt').style['display'] = 'block';
document.getElementById('is_vat_exempt_field').style['display'] = 'block';
if (document.getElementById('is_vat_exempt').checked) {
document.getElementById('billing_vat_id').style['display'] = 'none';
} else {
document.getElementById('billing_vat_id').style['display'] = 'block';
}
} else {
document.getElementById('billing_company').style['display'] = 'none';
document.getElementById('billing_company_code').style['display'] = 'none';
document.getElementById('is_vat_exempt').style['display'] = 'none';
document.getElementById('is_vat_exempt_field').style['display'] = 'none';
document.getElementById('billing_vat_id').style['display'] = 'none';
}
};
document.getElementById('is_vat_exempt').onclick = function() {
if (this.checked) {
document.getElementById('billing_vat_id').style['display'] = 'none';
} else {
document.getElementById('billing_vat_id').style['display'] = 'block';
}
};
<div id="buy_on_company_field">
<input type="checkbox" id="buy_on_company"><label>Buy on company</label>
</div>
<div id="billing_company_field">
<input type="text" id="billing_company" placeholder="Company name" style="display: block;">
</div>
<div id="billing_company_code_field">
<input type="text" id="billing_company_code" placeholder="Company code" style="display: block;">
</div>
<div id="is_vat_exempt_field">
<input type="checkbox" id="is_vat_exempt"><label>Is VAT exempt</label>
</div>
<div id="billing_vat_id_field">
<input type="text" id="billing_vat_id" placeholder="VAT ID field" style="display: block;">
</div>

One line was missing, to hide "billing_vat_id" in second 'else' statement.
document.getElementById('billing_vat_id').style['display'] = 'none';
https://i.imgur.com/QRpD12r.png

display and/or hide input boxes and labels depending on which radio button is selected

I only want certain labels and input boxes to be displayed depending on which radio button is selected. (4 radio buttons available)
Below is the code I am using which I cannot get to work, and I am pretty sure there is a cleaner way of writing this but unsure. Can anyone help?
Here are the 4 radio buttons that effect the destiny of the inputs:
<div class="radio-btn-aligning">
<span>
<label class="radio-container">Rectangle
<input type="radio" checked="checked" name="radio"
onclick="javascript:yesnoCheck();" id="RectangleCheck">
<span class="radio-checkmark"></span>
</label>
<label class="radio-container">Oval
<input type="radio" name="radio" onclick="javascript:yesnoCheck();"
id="OvalCheck">
<span class="radio-checkmark"></span>
</label>
<label class="radio-container">Round
<input type="radio" name="radio" onclick="javascript:yesnoCheck();"
id="RoundCheck">
<span class="radio-checkmark"></span>
</label>
<label class="radio-container">Custom Oblong
<input type="radio" name="radio" onclick="javascript:yesnoCheck();"
id="OblongCheck">
<span class="radio-checkmark"></span>
</label>
</span>
</div>
And here is the script:
<script type="text/javascript">
function yesnoCheck() {
if (document.getElementById('RectangleCheck').checked) {
document.getElementById('RectangleInput1').style.display = 'block';
document.getElementById('RectangleInput2').style.display = 'block';
document.getElementById('RectangleInput3').style.display = 'block';
document.getElementById('Rectangle-container1').style.display = 'block';
document.getElementById('Rectangle-container2').style.display = 'block';
document.getElementById('Rectangle-container3').style.display = 'block';
document.getElementById('OvalInput1').style.display = 'none';
document.getElementById('OvalInput2').style.display = 'none';
document.getElementById('OvalInput3').style.display = 'none';
document.getElementById('oval-container1').style.display = 'none';
document.getElementById('oval-container2').style.display = 'none';
document.getElementById('oval-container3').style.display = 'none';
document.getElementById('RoundInput1').style.display = 'none';
document.getElementById('RoundInput2').style.display = 'none';
document.getElementById('round-container').style.display = 'none';
document.getElementById('round-container2').style.display = 'none';
document.getElementById('OblongInput1').style.display = 'none';
document.getElementById('OblongInput2').style.display = 'none';
document.getElementById('OblongInput3').style.display = 'none';
document.getElementById('oblong-container1').style.display = 'none';
document.getElementById('oblong-container2').style.display = 'none';
document.getElementById('oblong-container3').style.display = 'none';
}
elseif (document.getElementById('OvalCheck').checked) {
document.getElementById('RectangleInput1').style.display = 'none';
document.getElementById('RectangleInput2').style.display = 'none';
document.getElementById('RectangleInput3').style.display = 'none';
document.getElementById('Rectangle-container1').style.display = 'none';
document.getElementById('Rectangle-container2').style.display = 'none';
document.getElementById('Rectangle-container3').style.display = 'none';
document.getElementById('OvalInput1').style.display = 'block';
document.getElementById('OvalInput2').style.display = 'block';
document.getElementById('OvalInput3').style.display = 'block';
document.getElementById('oval-container1').style.display = 'block';
document.getElementById('oval-container2').style.display = 'block';
document.getElementById('oval-container3').style.display = 'block';
document.getElementById('RoundInput1').style.display = 'none';
document.getElementById('RoundInput2').style.display = 'none';
document.getElementById('round-container1').style.display = 'none';
document.getElementById('round-container2').style.display = 'none';
document.getElementById('OblongInput1').style.display = 'none';
document.getElementById('OblongInput2').style.display = 'none';
document.getElementById('OblongInput3').style.display = 'none';
document.getElementById('oblong-container1').style.display = 'none';
document.getElementById('oblong-container2').style.display = 'none';
document.getElementById('oblong-container3').style.display = 'none';
}
elseif (document.getElementById('RoundCheck').checked) {
document.getElementById('RectangleInput1').style.display = 'none';
document.getElementById('RectangleInput2').style.display = 'none';
document.getElementById('RectangleInput3').style.display = 'none';
document.getElementById('Rectangle-container1').style.display = 'none';
document.getElementById('Rectangle-container2').style.display = 'none';
document.getElementById('Rectangle-container3').style.display = 'none';
document.getElementById('OvalInput1').style.display = 'none';
document.getElementById('OvalInput2').style.display = 'none';
document.getElementById('OvalInput3').style.display = 'none';
document.getElementById('oval-container1').style.display = 'none';
document.getElementById('oval-container2').style.display = 'none';
document.getElementById('oval-container3').style.display = 'none';
document.getElementById('RoundInput1').style.display = 'block';
document.getElementById('RoundInput2').style.display = 'block';
document.getElementById('round-container1').style.display = 'block';
document.getElementById('round-container2').style.display = 'block';
document.getElementById('OblongInput1').style.display = 'none';
document.getElementById('OblongInput2').style.display = 'none';
document.getElementById('OblongInput3').style.display = 'none';
document.getElementById('oblong-container1').style.display = 'none';
document.getElementById('oblong-container2').style.display = 'none';
document.getElementById('oblong-container3').style.display = 'none';
}
elseif (document.getElementById('OblongCheck').checked) {
document.getElementById('RectangleInput1').style.display = 'none';
document.getElementById('RectangleInput2').style.display = 'none';
document.getElementById('RectangleInput3').style.display = 'none';
document.getElementById('Rectangle-container1').style.display = 'none';
document.getElementById('Rectangle-container2').style.display = 'none';
document.getElementById('Rectangle-container3').style.display = 'none';
document.getElementById('OvalInput1').style.display = 'none';
document.getElementById('OvalInput2').style.display = 'none';
document.getElementById('OvalInput3').style.display = 'none';
document.getElementById('oval-container1').style.display = 'none';
document.getElementById('oval-container2').style.display = 'none';
document.getElementById('oval-container3').style.display = 'none';
document.getElementById('RoundInput1').style.display = 'none';
document.getElementById('RoundInput2').style.display = 'none';
document.getElementById('round-container1').style.display = 'none';
document.getElementById('round-container2').style.display = 'none';
document.getElementById('OblongInput1').style.display = 'block';
document.getElementById('OblongInput2').style.display = 'block';
document.getElementById('OblongInput3').style.display = 'block';
document.getElementById('oblong-container1').style.display = 'block';
document.getElementById('oblong-container2').style.display = 'block';
document.getElementById('oblong-container3').style.display = 'block';
}
}
</script>
And finally the input boxes and labels effected:
<label class="calc-form-label" id="rectangle-container1">Length of your pool in feet</label><input type="number" class="tabinput" name="length" min="1" id="RectangleInput1">
<label class="calc-form-label" id="rectangle-container2">Width of your pool in feet</label><input type="number" class="tabinput" name="width" min="1" id="RectangleInput2">
<label class="calc-form-label" id="rectangle-container3">Depth of your pool in feet</label><input type="number" class="tabinput" name="depth" min="1" id="RectangleInput3">
<label class="calc-form-label" id="oval-container1">Half the length of your pool in feet</label><input type="number" class="tabinput" name="half-length" min="1" id="OvalInput1">
<label class="calc-form-label" id="oval-container2">Half the width of your pool in feet</label><input type="number" class="tabinput" name="half-width" min="1" id="OvalInput2">
<label class="calc-form-label" id="oval-container3">Depth of your pool in feet</label><input type="number" class="tabinput" name="oval-depth" min="1" id="OvalInput3">
<label class="calc-form-label" id="round-container1">Radius of your pool in feet</label><input type="number" class="tabinput" name="round-radius" min="1" id="RoundInput1">
<label class="calc-form-label" id="round-container2">Depth of your pool in feet</label><input type="number" class="tabinput" name="round-depth" min="1" id="RoundInput2">
<label class="calc-form-label" id="oblong-container1">Small diameter of your pool in feet</label><input type="number" class="tabinput" name="small-diameter" min="1" id="OblongInput1">
<label class="calc-form-label" id="oblong-container2">Large diameter of your pool in feet</label><input type="number" class="tabinput" name="large-diameter" min="1" id="OblongInput2">
<label class="calc-form-label" id="oblong-container3">Length of your pool in feet</label><input type="number" class="tabinput" name="oblong-length" min="1" id="OblongleInput3">

HTML ids must be unique!
So I changed id="rectangle-container" to id="rectangle-container1" and id="rectangle-container2" and so on.
You could put all corresponding labels and inputs togerther in a div or something and then hide and display the div.
<div id='myUniqueIdForRectangle'>
<label class="calc-form-label" id="rectangle-container1">Length of your pool in feet</label>
<input type="number" class="tabinput" name="length" min="1" onclick="javascript:yesnoCheck();" id="RectangleInput1">
<label class="calc-form-label" id="rectangle-container2">Width of your pool in feet</label>
<input type="number" class="tabinput" name="width" min="1" onclick="javascript:yesnoCheck();" id="RectangleInput2">
<label class="calc-form-label" id="rectangle-container3">Depth of your pool in feet</label>
<input type="number" class="tabinput" name="depth" min="1" onclick="javascript:yesnoCheck();" id="RectangleInput3">
</div>
function yesnoCheck() {
if (document.getElementById('RectangleCheck').checked) {
document.getElementById('myUniqueIdForRectangle').style.display = 'block';
document.getElementById('myUniqueIdForRectangleForOval').style.display = 'none';
....
}
....
}

Radio button Fee Clearance

I have three radio buttons that calculate fees. When you click the first radio button it has a drop down with a checkbox if you click the checkbox it adds $3.. if the user realizes that was a mistake and does not unclick the check box and clicks another radio button it does not remove the $3 from the total until the radio buttons are clicked at least twice.
The first two radio buttons are 78.25 and the 3rd is 88.25. Click first radio button 78.25 and then the checkbox will make it 81.25, then pretend your the user change your mind and hit the second radio button it should change it back to 78.25 when you click. But it does not and it keeps 81.25 if you click the third radio button it finally realizes it and corrects itself?
I have it set up to uncheck the checkbox when another radio button is checked but for some reason the fee is not changing instantly and is delayed for some reason. Can some one please assist?
If anyone has any suggestions or advice it would be greatly appreciated!
http://jsfiddle.net/Ln1fnstb/2/
$(function(){ //added by me
$('#brandnewrv').click(function(){
calculateTotal();
});
});
function rvsPrice()
{
var rvPrice=0;
var theForm = document.forms["form"];
var brandnewRv = document.getElementById('brandnewrv');
if(brandnewRv.checked==true)
{
rvPrice=3;
}
return rvPrice;
}
//Setting Proof of Ownership Prices
//Set up an associative array
var title_prices = new Array();
title_prices["MCO"]=78.25;
title_prices["FL Title"]=78.25;
title_prices["OOS Title"]=88.25;
// Proof of Ownership Radio Buttons
function getProofOfOwnership()
{
var proofOfOwnership=0;
//Get a reference to the form id="form"
var theForm = document.forms["form"];
//Get a reference to the title the user Chooses name=ownerShip":
var ownerShip = theForm.elements["ownership"];
//Here since there are 4 radio buttons ownerShip.length = 4
//We loop through each radio buttons
for(var i = 0; i < ownerShip.length; i++)
{
//if the radio button is checked
if(ownerShip[i].checked)
{
proofOfOwnership = title_prices[ownerShip[i].value];
//If we get a match then we break out of this loop
//No reason to continue if we get a match
break;
}
}
//We return the proofOfOwnership
return proofOfOwnership;
}
function calculateTotal()
{
var titleFees = rvsPrice() + getProofOfOwnership();
var divobj = document.getElementById('totalPrice');
divobj.style.display='block';
divobj.innerHTML = "Estimated Transfer Fees $"+titleFees;
}
function hideTotal()
{
var divobj = document.getElementById('totalPrice');
divobj.style.display='none';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form name="form">
<label><strong>Proof of Ownership</strong></label><br />
<label class='radiolabel'><input type="radio" name="ownership" required="yes" message="Please select proof of ownership." value="MCO" onclick="calculateTotal()" onchange="statedropDown(this.value);"/>Manufacturer's Statement of Origin </label>
<label class='radiolabel'><input type="radio" name="ownership" value="FL Title" onclick="calculateTotal()" onchange="statedropDown(this.value);"/>Florida Certificate of Title </label>
<label class='radiolabel'><input type="radio" name="ownership" value="OOS Title" onclick="calculateTotal()" onchange="statedropDown(this.value);"/>Out-of-state Certificate of Title </label>
<div id="div3" style="display:none">
<div class="clearfix">
<select name="month1" id="month1" size="1">
<option value="">Choose a Month</option>
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select>
</div>
</div>
<div id="div4" style="display:none">
<!---You are not qualified to see this form.--->
</div>
<div id="div5" style="display:none">
<p><label for='brandnewrv' class="inlinelabel"> Check if Brand new RV/Motor Home</label>
<input type="checkbox" id="brandnewrv" name='brandnewrv' onclick="calculateTotal()" /></p>
</div>
<div id="totalPrice"></div>
<script type="text/javascript">
function statedropDown(ownership) {
if (ownership == "OOS Title") {
document.getElementById("div3").style.display = 'block';
document.getElementById("div4").style.display = 'none';
document.getElementById("div5").style.display = 'none';
document.getElementById("brandnewrv").checked = false;
rvsPrice();
}
else if (ownership == "FL Title") {
document.getElementById("div4").style.display = 'block';
document.getElementById("div3").style.display = 'none';
document.getElementById("div5").style.display = 'none';
document.getElementById("titlestates").selectedIndex = 0;
document.getElementById("brandnewrv").checked = false;
rvsPrice();
}
else if (ownership == "MCO") {
document.getElementById("div5").style.display = 'block';
document.getElementById("div3").style.display = 'none';
document.getElementById("div4").style.display = 'none';
document.getElementById("titlestates").selectedIndex = 0;
}
}
</script>
</form>

I think there's some more complexity than there needs to be. I think the radio buttons really just need a "click" handler that calls a modified version of the "statedropDown" function, and no "change" handler. The "statedropDown" function should be changed so that it calls "calculateTotal()" at the end. And that line that references "titlestates" needs to be commented out in the fiddle, since that part of the DOM isn't there.
<label class='radiolabel'>
<input type="radio" name="ownership" required="yes" message="Please select proof of ownership." value="MCO" onclick="statedropDown(this.value)">Manufacturer's Statement of Origin </label>
<label class='radiolabel'>
<input type="radio" name="ownership" value="FL Title" onclick="statedropDown(this.value)">Florida Certificate of Title </label>
<label class='radiolabel'>
<input type="radio" name="ownership" value="OOS Title" onclick="statedropDown(this.value)">Out-of-state Certificate of Title </label>
and then
function statedropDown(ownership) {
if (ownership == "OOS Title") {
document.getElementById("div3").style.display = 'block';
document.getElementById("div4").style.display = 'none';
document.getElementById("div5").style.display = 'none';
document.getElementById("brandnewrv").checked = false;
} else if (ownership == "FL Title") {
document.getElementById("div4").style.display = 'block';
document.getElementById("div3").style.display = 'none';
document.getElementById("div5").style.display = 'none';
//document.getElementById("titlestates").selectedIndex = 0;
document.getElementById("brandnewrv").checked = false;
} else if (ownership == "MCO") {
document.getElementById("div5").style.display = 'block';
document.getElementById("div3").style.display = 'none';
document.getElementById("div4").style.display = 'none';
//document.getElementById("titlestates").selectedIndex = 0;
}
calculateTotal();
}
Here is the updated fiddle. (I changed a couple of other minor things while tinkering with it, but I think the above changes are the key.)

Getting divs to close if another one opens with Javascript

Basically I have signup and signin and I they're both divs which appear and disappear on the click of a link but I wish for one to close if the other is clicked and then opened.
Example:
signin area is open and signup button is clicked. I wish for signin area to disappear and for the signup content to be revealed.
Current Code:
<script language="javascript">
function toggle() {
var ele = document.getElementById("signin");
var text = document.getElementById("signtext");
var ele2 = document.getElementById("signup");
var text2 = document.getElementById("signuptext");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
ele2.style.display = "block";
text2.innerHTML = "hide";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
ele2.style.display = "block";
text2.innerHTML = "hide";
}
}
function toggle2() {
var ele2 = document.getElementById("signup");
var text2 = document.getElementById("signuptext");
var ele = document.getElementById("signin");
var text = document.getElementById("signtext");
if(ele2.style.display == "block") {
ele2.style.display = "none";
text2.innerHTML = "show";
ele.style.display = "block";
text.innerHTML = "hide";
}
else {
ele2.style.display = "block";
text2.innerHTML = "hide";
ele.style.display = "block";
text.innerHTML = "hide";
}
}
</script>
Html :
<div id="signin" style="display: none">
<form action="loginscript.php" method="post">
<p>Username:<input type="text" id="username"></p>
<p>Password:<input type="password" id="password"> <input type="submit" value="submit"></p>
</form>
</div>
<div id="signup" style="display: none">
<h1>peek-a-boo</h1>
</div>

Try this.There is no need of creating two different functions.Lesser the number of functions=Better the code + smarter is the coder!!!!
function toggle(id){
switch(id)
{
case 'signin':
document.getElementById('signin').style.display='block';
document.getElementById('signup').style.display='none';
break;
case 'signup':
document.getElementById('signup').style.display='block';
document.getElementById('signin').style.display='none';
break;
}
HTML
<div id="signin" onclick="toggle(this.id)"> SignIN</div>
<div id="signup" onclick="toggle(this.id)"> SignUp</div>

You can invoke a function on "onclick" event and hide the div using CSS:Visibility property
<a id="myLink" href="#" onclick="MyFunction();">link text</a>

Try this one:
function signUpIn(objId) {
document.getElementById('signin').style.display = 'none';
document.getElementById('signup').style.display = 'none';
document.getElementById(objId).style.display = 'block';
}
Your html changes:
<div id="signin" style="display: block">
</div>
<div id="signup" style="display: none">
</div>
Sign Up
Sign In
Check if it works for you.

Try to grab concept from this, may not be a perfect, but still contain some learning part -
Check this working Fiddle - http://jsfiddle.net/j7LDD/
Working Code -
HTML PART -
<form id="signup" method="get" style="display:none;">
<label>SignUp Name</label>
<input type="text" name="signupname" />
<input type="submit" name="signupsubmit" value="signup" />
</form>
<form id="signin" method="get" style="display:none;">
<label>SignIn Name</label>
<input type="text" name="signinname" />
<input type="submit" name="signinsubmit" value="signin" />
</form>
<button id="signupbutton" onclick="toggle(this.id);">SignUp</button>
<button id="signinbutton" onclick="toggle(this.id);">SignIn</button>
JS PART -
<script>
function toggle( val ) {
if( "signupbutton" == val ) {
document.getElementById("signup").style.display = 'block';
document.getElementById("signin").style.display = 'none';
}
else {
document.getElementById("signin").style.display = 'block';
document.getElementById("signup").style.display = 'none';
}
}
</script>