A little something about everything

Here is a quick lightweight javascript toggle function for sites where you dont want to use jquery.

The JavaScript:

Some example CSS:

Some excmple HTML:

Example:

• one
• two
• three

In order to target a div you can do so by id or by class, for example

<div id="centerme" class="centerit">some content</div>

here is the css:

#centerme {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/* in some cases you may want to give it a width and height first */
height:100%;
max-height: 10rem;
width: 100%;
max-height: 20rem;
}
/* another option only vertical via class rather than id */
.centerit {
top: 50%;
transform: translateY(-50%);
}
/* or only horizontal  */
.centerit {
left: 50%;
transform: translateX(-50%);
}

That's it!

Simple script to show and hide multiple div's

Example:

Spotlight 1, Spotlight 2, Spotlight 3

<script language="javascript">
function getElementsByClass( searchClass, domNode, tagName) {
	if (domNode == null) domNode = document;
	if (tagName == null) tagName = '*';
	var el = new Array();
	var tags = domNode.getElementsByTagName(tagName);
	var tcl = " "+searchClass+" ";
	for(i=0,j=0; i<tags.length; i++) {
		var test = " " + tags[i].className + " ";
		if (test.indexOf(tcl) != -1)
			el[j++] = tags[i];
	}
	return el;
}
function ShowHide(bioname) {
	var bios = getElementsByClass('bio');
	for(i=0; i<bios.length; i++)
		bios[i].style.display = 'none';
	document.getElementById(bioname).style.display='block';
}
</script>
<style>
#bio2,#bio3 {
	display: none;
}
</style>
<p>Simple script to show and hide multiple div's</p><p>Example:</p>
<p>
<a href="#" onclick="ShowHide('bio1');">Spotlight 1</a>,
<a href="#" onclick="ShowHide('bio2');">Spotlight 2</a>, 
<a href="#" onclick="ShowHide('bio3');">Spotlight 3</a></p>
<div id="bio1" class="bio" style="width:400px;margin:10px;padding:10px;border:1px solid #000;box-shadow: 0 0 5px #000;"><h4 style="color:#000;">Spotlight 1 content</h4>
</div>
<div id="bio2" class="bio" style="width:400px;margin:10px;padding:10px;border:1px solid #f00;box-shadow: 0 0 5px #f00;"><h4 style="color:#f00;">Spotlight 2 content</h4>
</div>
<div id="bio3" class="bio" style="width:400px;margin:10px;padding:10px;border:1px solid #0f0;box-shadow: 0 0 5px #0f0;"><h4 style="color:#0f0;">Spotlight 3 content</h4>
</div>

With the launch of googles new mobile friendly test tool you can expect to see google pushing mobile friendly code for search placements. 

The results are basic with no in major code diagnostics, with the following two main results:

• Awesome! This page is mobile-friendly.
• Not mobile-friendly
• generic fail reason

This method allows you to show/hide a form element without making another request against the server. It also works when the show/hide element is required by the asp.net code behind.

You can use any type of sub element under a dropdown with this script. You will need to use a CDN or download and host your own jquery-1.3.2.min.js file.

SCRIPT

<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script> <script type="text/javascript"> $(function() { $('#<%= Dropdown1.ClientID %>').change(function() { if (this.value=="My Value") { $('#<%= Element1.ClientID %> ').css({ visibility: 'visible' }); } else { $('#<%= Element1.ClientID %> ').css({ visibility: 'hidden' }); }}); }); </script>

HTML

<asp:DropDownList runat="server" ID="Dropdown1" class="required" >
<asp:ListItem Value=""> none</asp:ListItem>
<asp:ListItem Value="My Value">Some Text Here</asp:ListItem>
</asp:DropDownList>

<!-- place any element here with id="Element1" -->