Building a HideShow toggle

[DarkxPunk]

Originally I put the button behind cause it was causing issues with Chrome and Opera (I can't get the issue to repeat now, I am so confused) anyway I need to make this code slimmer and it must be possible. Whether we have to do some oddities or not, my goal is to make this clean, and simple. To clarify this is my goal and again reinforcing why I did not include HTML originally.

 

All I want is a toggle switch that can be added by linking to one JS file, one CSS file, and as minimal lines of html as possible. Below will be the bare minimum html required:

/* Backup for older IE's when JS is turned off */<!--[if lte IE 9]><noscript><style>.hideShowLabel {display: none;}.hideShowContent {display: block;}</style></noscript><![endif]-->/* The Actual Button */<div class="hideShowToggle"><input type="checkbox" id="hideShowInput2" class="hideShowInput"/><label for="hideShowInput2" class="hideShowLabel" onclick="hideShowToggle(this)"><!----><input type="button" class="hideShowButton show" value="Show"/><!----><input type="button" class="hideShowButton hide" value="Hide"/><!----></label>/* Can be any element */<div class="hideShowContent">Stuff</div></div>

With this added around an element the user would like to hide it will do so without the need of JS by adding class="hideShowContent" to the following element. The CSS trick required for this to work is as follows:

	.hideShowInput {		width: 0;		height: 0;		display: none;		position: absolute;	}	.hideShowLabel,.hideShowButton {		margin: 0;		border: 0;		width: 200px;		padding: 8px 0;		font-size: 100%;		position: relative;		cursor: pointer;	}	.hideShowButton {		background: red;	}	.hideShowButton:focus {		outline: 0;	}	.hideShowLabel:hover .hideShowButton {		background: blue;		color: #ffffff;	}	.show {		display: inline-block;	}	.hide,.hideShowContent {		display: none;	}	 	.hideShowInput:checked > .hideShowLabel ~ .show {		display: none;	}		.hideShowInput:checked > .hideShowLabel ~ .hide {		display: inline-block;	}	.hideShowInput:checked ~ .hideShowContent {		display: block;	}

But obviously that does not work in IE 9 and under so we need a JS alternative. But I need it simple. The solution which does work is as follows:

function hideShowToggle(e) {	var btn = e.childNodes[1];	var aftClk = e.childNodes[3].value;	var bfrClk = e.childNodes[5].value;	var nS = e.nextSibling;	btn.value = btn.value == aftClk ? bfrClk : aftClk;	while(nS.nodeType != '1') { nS = nS.nextSibling; break; }	nS.style.display = nS.style.display == 'block' ? 'none' : 'block';}

Now since this all works and I have tested it across browsers I will stick with this and maybe play with it as I go. Any additions or further simplification is welcomed. I just don't wanna grow this any bigger...

Thanks for all the inputs.

[Hadien]

You're seriously trying to re-intent the wheel. people out there have already gone through the trouble so that you can work smart, not hard. There are so many browsers that are so different there's no point for you to try and figure out how to make them all work by yourself, when someone has already made it their job to do that for you.

 

Frameworks like jQuery exist to handle the exact requirements you're looking for. There shouldn't be any reason that you are blacklisting jQuery when you're basically trying to accomplish exactly what it was built to do: Providing cross-browser functionality while also implementing a highly simplistic interface to the programmer. You'll actually end up with less code onsite simply using jQuery (and linking to jQuery from google's servers).

 

With jQuery you could do everything you're trying to do with just this:

$(".hideShowLabel").onclick(function(){$(".hideShowButton",this).toggleClass("hide");});

And it works in pretty much every browser. AND is a simple 1-liner.

 

You need to face it. Without jQuery, cross-browser functionality will NOT be simple. There are times that you need to realize that a requirement is simply unfeasible.

[DarkxPunk]

JQuery is great once you have a broad understanding of javascript. The problem I see now in days is a lot of people who can write JQuery but not Javascript (crazy right?). I black list it cause I don't wanna be babied until I understand where it comes from. This tool i am making is a learning experience and a tool for people like myself. Simple as that.