Here is a quick lightweight javascript toggle function for sites where you dont want to use jquery.
The JavaScript:
<script>
function toggle(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
var list = document.getElementsByClassName("tmc");
for (var i = 0; i < list.length; i++) {
list[i].style.display="none";
e.style.display = 'block';
}
}
</script>
Some example CSS:
<style>
.dbn {
display:block;
float:right;
width:40vw;
border:.05em solid #000;
padding:.8em;
margin:1em;
box-shadow:0 0 .3em #000;
}
#aa {background-color:#f00;}
#bb {background-color:#0f0;}
#cc {background-color:#00f;}
</style>
Some excmple HTML:
<ul>
<li><a onclick="toggle('aa');" style="cursor:pointer ">one</a></li>
<li><a onclick="toggle('bb');" style="cursor:pointer ">two</a></li>
<li><a onclick="toggle('cc');" style="cursor:pointer ">three</a></li>
</ul>
<div id="aa" class="dbn">
Content of Div aa
</div>
<div id="bb" class="dbn">
Content of Div bb
</div>
<div id="cc" class="dbn">
Content of Div cc
</div>
Example:
Content of Div aa
Content of Div bb
Content of Div cc
Simple script to show and hide multiple div's
Example:
Spotlight 1,
Spotlight 2,
Spotlight 3
Spotlight 1 content
Spotlight 2 content
Spotlight 3 content
The code:
<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 a bit of creative javascript and these Methods you can do some pretty neat stuff.
On this page I've create an example for multiple elements display block/none function based onclick function. You could also utilize checkbox.checked, onmouseover, or other such functions.
You can replace querySelectorAll with getElementsByClassName or getElementById for broader browser support or you can simply create a detector onload to look for an element on the page and hide it if the Method is supported with querySelector like this:
window.onload = function(){
document.querySelector('#compat').style.display = 'none';
}
The Code:
HTML
<div class="aa" style="display: block;">class: aa, no id</div>
<div class="aa" id="aa" style="display: block;">class: aa, id: aa</div>
<div class="bb" style="display: block;">class: bb, no id</div>
<div id="aa" style="display: block;">no class, id: aa</div>
<a onclick="showClass('.aa');" href="#">Looks for class: aa</a>
<a onclick="showClass('#aa, .bb');" href="#">Looks for class: bb, and id: aa</a>
<a onclick="showClass('.aa, .bb');" href="#">Looks for class: aa, bb</a>
<div id="compat" style="display:block;position:absolute;width:100%;height:100%;background-color:#fff;top:0;left:0;padding:50px; "><h1>Compatability Error!</h1>
<p>This page uses newer coding technologies. You should consider upgrading your browser.</p>
<p>for suggestions, please go <a href="http://outdatedbrowser.com/en">here</a>.</p>
<a href="#" onClick="document.getElementById('compat').style.display = 'none';">Continue Anyways</a>
Javascript
function showClass(s){
var e = [];
var e = document.querySelectorAll(s);
for (var i = 0; i < e.length; i++){
if(!e[i])return true;
if(e[i].style.display=="none"){
e[i].style.display="block"
} else {
e[i].style.display="none"
}
}
return true;
}
Use your imagination and see what you can do with it.
Here is a working example:
class: aa, no id
class: aa, id: aa
class: bb, no id
no class, id: aa
Looks for class: aa
Looks for class: bb, and id: aa
Looks for class: aa, bb
Compatability Error!
This page uses newer coding technologies. You should consider upgrading your browser.
for suggestions, please go here.
Continue Anyways
Create a file called mobile.js and add the following code to it, be sure to replace shawnhyde.com with your own domain name.
You will need to create a link back to your full version site for people with large display smart phones that do not want to use the mobile site. In order to do this you just need to add the following code somewhere on your mobile site.
You can also add a floating link back to your mobile site in case they have problems by adding the following code to your main site.
You will need to add a file named desktop.css with something like the following code.
You will need to add a file named mobile.css with something like the following code.
Also, be sure you update the code to reflect the correct folders for files. For example, "css" folder, "js" folder.
Edit / Updated the code to support newer mobile clients.