Create two super simple websites with drop down text/menus using Javascript:
PROJECT 1:
Between your site title and the body of the site, paste this code:
<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
}
}
</script>
Then, in the body of your site, paste the following code to set up your drop down menu:
<a id="displayText" href="javascript:toggle();">show</a> <== click Here (warning: SPOILERS!!!)
<div id="toggleText" ><h1>BTW, Snape killed Dumbledore.</h1></div>
Change the "click HERE" text and the "BTW, Snape killed Dumbledore" text to make it your own project!
-----------------------------------------------------------------------------------------------------
PROJECT 2:
Between your site title and the body of the site, paste this code:
<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
}
}
</script>
Then, in the body of your site, paste the following code to set up your drop down menu:
<a id="displayText" href="javascript:toggle();"><p >Click here for links to sites</p></a>
<div id="toggleText" >
<ul>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://www.deviantart.com">deviantArt</a></li>
<li><a href="http://www.reddit.com">Reddit</a></li>
</ul>
</div>
Change the "click here" text and make an ordered list (my example is unordered) of 5 of your favorite websites to make it your own project!
PROJECT 1:
Between your site title and the body of the site, paste this code:
<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
}
}
</script>
Then, in the body of your site, paste the following code to set up your drop down menu:
<a id="displayText" href="javascript:toggle();">show</a> <== click Here (warning: SPOILERS!!!)
<div id="toggleText" ><h1>BTW, Snape killed Dumbledore.</h1></div>
Change the "click HERE" text and the "BTW, Snape killed Dumbledore" text to make it your own project!
-----------------------------------------------------------------------------------------------------
PROJECT 2:
Between your site title and the body of the site, paste this code:
<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
}
}
</script>
Then, in the body of your site, paste the following code to set up your drop down menu:
<a id="displayText" href="javascript:toggle();"><p >Click here for links to sites</p></a>
<div id="toggleText" >
<ul>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://www.deviantart.com">deviantArt</a></li>
<li><a href="http://www.reddit.com">Reddit</a></li>
</ul>
</div>
Change the "click here" text and make an ordered list (my example is unordered) of 5 of your favorite websites to make it your own project!