Hello, I've came here again for quick help and
advice on how to make my show/hide function
within my javascript work properly. Username
xelawho helped me establish a starting point
in where to go, but now the javascript has
gotten more difficult. I setted up a Fiddle so you
can help and test out the current one so it may
function the way I wish it would. Again, I dont
have any experience in javascript or writing
argumentative script. The codes in fiddle is set up
how I want it to, but I now wish to make it function
for a total of 12 toggle and showMoreText. I supplied
the html with two javascripts, but the 2nd one
overwrited the original one. Where do I start?
<div class="expander"><div class="toggle">
Click here for more information
</div><div class="showMoreText" style="display: none">
Here, you will find some more information
</div><div class="showMoreText2" style="display: none">
You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here!
</div></div><div class="expander"><div class="toggle">
Click here for more information
</div><div class="showMoreText" style="display: none">
Here, you will find some more information
</div><div class="showMoreText2" style="display: none">
You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here!
</div></div>
<div class="expander"><div class="toggle">
Click here for more information
</div><div class="showMoreText" style="display: none">
Here, you will find some more information
</div><div class="showMoreText2" style="display: none">
You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here!
</div></div><div class="expander"><div class="toggle">
Click here for more information
</div><div class="showMoreText" style="display: none">
Here, you will find some more information
</div><div class="showMoreText2" style="display: none">
You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here!
</div></div>
Under "choose framework", choose anything but onload
Thank you Gray1989! Is there a way to make it so by clicking on the "Click here for more information", there are multiple options and from those multiple options, each option with its own hover text? Sorry for being so bothersome, I appreciate all your help so far in getting me forward.
<div class="expander"><div class="toggle">
Click here for more information
</div><div class="showMoreText" style="display: none" id="0">
Here, you will find some more information
</div><div class="showMoreText2" style="display: none" id="0">
You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here!
</div><div class="showMoreText" style="display: none" id="1">
Here, you will find some more information
</div><div class="showMoreText2" style="display: none" id="1">
You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here!
</div></div><div class="expander"><div class="toggle">
Click here for more information
</div><div class="showMoreText" style="display: none" id="0">
Here, you will find some more information
</div><div class="showMoreText2" style="display: none" id="0">
You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here!
</div></div>
I made a minor mistake in the code... It really shouldn't matter actually. To be honest, it could be touched up in a few places, PM me if you need anymore help with it.
Code:
window.onload = loadDisps;
function showMore(orig) {
var children = document.getElementsByClassName("expander")[orig].childNodes; var childelem;
for(i=0;i<children.length;i++) { if(children[i].className == "showMoreText") {
children[i].style.display=children[i].style.display == "none" ? "block" : "none"; } }
}
function showMore2(disp,orig,idfor) {
var children = document.getElementsByClassName("expander")[orig].childNodes; var childelem;
for(i=0;i<children.length;i++) { if(children[i].className == "showMoreText2" && children[i].id == idfor) {
children[i].style.display=children[i].style.display = disp; } }
}
function loadDisps() {
var elems1 = document.getElementsByClassName("expander");
for(i=0;i<elems1.length;i++) {
elems1[i].id = i;
elems2 = elems1[i].childNodes;
for(x=0;x<elems2.length;x++) {
if(elems2[x].className == "toggle") elems2[x].onclick = function() {
showMore(this.parentNode.getAttribute("id")); };
else if(elems2[x].className == "showMoreText") {
elems2[x].onmouseover = function() {
showMore2("block",this.parentNode.getAttribute("id"),this.getAttribute("id")); };
elems2[x].onmouseout = function() {
showMore2("none",this.parentNode.getAttribute("id"),this.getAttribute("id")); }; }
}
}
}
<div class="expander"><div class="toggle">
Click here for more information
</div><div class="showMoreText" style="display: none" name="0">
1 Here, you will find some more information
</div><div class="showMoreText2" style="display: none" name="0">
1 You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here!
</div><div class="showMoreText" style="display: none" name="1">
2 Here, you will find some more information
</div><div class="showMoreText2" style="display: none" name="1">
2 You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here!
</div><div class="showMoreText" style="display: none" name="2">
3 Here, you will find some more information
</div><div class="showMoreText2" style="display: none" name="2">
3 You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here!
</div><div class="showMoreText" style="display: none" name="3">
4 Here, you will find some more information
</div><div class="showMoreText2" style="display: none" name="3">
4 You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here!
</div></div><div class="expander"><div class="toggle">
Click here for more information
</div><div class="showMoreText" style="display: none" name="0">
1 Here, you will find some more information
</div><div class="showMoreText2" style="display: none" name="0">
1 You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here!
</div><div class="showMoreText" style="display: none" name="1">
2 Here, you will find some more information
</div><div class="showMoreText2" style="display: none" name="1">
2 You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here!
</div><div class="showMoreText" style="display: none" name="2">
3 Here, you will find some more information
</div><div class="showMoreText2" style="display: none" name="2">
3 You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here!
</div><div class="showMoreText" style="display: none" name="3">
4 Here, you will find some more information
</div><div class="showMoreText2" style="display: none" name="3">
4 You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here!
</div></div>
Script:
Code:
window.onload = function() {
var elems1 = document.getElementsByClassName("expander");
for (i = 0; i < elems1.length; i++) {
elems2 = elems1[i].childNodes;
for (x = 0; x < elems2.length; x++) {
if (elems2[x].className == "toggle") elems2[x].onclick = function() {
showMore(0, this);
};
else if (elems2[x].className == "showMoreText") {
elems2[x].onmouseover = function() {
showMore("block", this);
};
elems2[x].onmouseout = function() {
showMore("none", this);
};
}
}
}
};
function showMore(disp, elem) {
var children = elem.parentNode.childNodes;
for (i = 0; i < children.length; i++) {
if (disp != 0 && children[i].className == "showMoreText2" && children[i].getAttribute("name") == elem.getAttribute("name")) {
children[i].style.display = disp;
} else if (disp == 0 && children[i].className == "showMoreText") {
children[i].style.display = children[i].style.display == "none" ? "block" : "none";
}
}
}
<div class="expander"><div class="toggle">
Click here for more information
</div><div class="showMoreText" style="display: none" name="0">
1 Here, you will find some more information
</div><div class="showMoreText2" style="display: none" name="0">
1 You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here!
</div><div class="showMoreText" style="display: none" name="1">
2 Here, you will find some more information
</div><div class="showMoreText2" style="display: none" name="1">
2 You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here!
</div><div class="showMoreText" style="display: none" name="2">
3 Here, you will find some more information
</div><div class="showMoreText2" style="display: none" name="2">
3 You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here!
</div><div class="showMoreText" style="display: none" name="3">
4 Here, you will find some more information
</div><div class="showMoreText2" style="display: none" name="3">
4 You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here!
</div></div><div class="expander"><div class="toggle">
Click here for more information
</div><div class="showMoreText" style="display: none" name="0">
1 Here, you will find some more information
</div><div class="showMoreText2" style="display: none" name="0">
1 You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here!
</div><div class="showMoreText" style="display: none" name="1">
2 Here, you will find some more information
</div><div class="showMoreText2" style="display: none" name="1">
2 You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here!
</div><div class="showMoreText" style="display: none" name="2">
3 Here, you will find some more information
</div><div class="showMoreText2" style="display: none" name="2">
3 You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here!
</div><div class="showMoreText" style="display: none" name="3">
4 Here, you will find some more information
</div><div class="showMoreText2" style="display: none" name="3">
4 You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here!
</div></div>
Script:
Code:
window.onload = function() {
var elems1 = document.getElementsByClassName("expander");
for (i = 0; i < elems1.length; i++) {
elems2 = elems1[i].childNodes;
for (x = 0; x < elems2.length; x++) {
if (elems2[x].className == "toggle") elems2[x].onclick = function() {
showMore(0, this);
};
else if (elems2[x].className == "showMoreText") {
elems2[x].onmouseover = function() {
showMore("block", this);
};
elems2[x].onmouseout = function() {
showMore("none", this);
};
}
}
}
};
function showMore(disp, elem) {
var children = elem.parentNode.childNodes;
for (i = 0; i < children.length; i++) {
if (disp != 0 && children[i].className == "showMoreText2" && children[i].getAttribute("name") == elem.getAttribute("name")) {
children[i].style.display = disp;
} else if (disp == 0 && children[i].className == "showMoreText") {
children[i].style.display = children[i].style.display == "none" ? "block" : "none";
}
}
}
Once again Gray, you were of great help to me! Wished I knew you in life so I could buy you lunch and dinner!
I been fussing around with the awesome code that you provided but I still have a few questions on putting it over onto my html code. Could you tell me if my "names" are not in the correct names along with the IDs? Somehow when I placed "showMoreText1" and "showMoreText2" are not visible within the Live View on Dreamweaver anymore. Thanks!
Javascript:
Code:
window.onload = function() {
var elems1 = document.getElementsByClassName("clearfix grpelem");
for (i = 0; i < elems1.length; i++) {
elems2 = elems1[i].childNodes;
for (x = 0; x < elems2.length; x++) {
if (elems2[x].className && elems2[x].className.indexOf("u3567-4") != -1) elems2[x].onclick = function() {
showMore(0, this);
};
else if (elems2[x].className && elems2[x].className.indexOf("showMoreText1") != -1) {
elems2[x].onmouseover = function() {
showMore("block", this);
};
elems2[x].onmouseout = function() {
showMore("none", this);
};
}
}
}
};
function showMore(disp, elem) {
var children = elem.parentNode.childNodes;
for (i = 0; i < children.length; i++) {
if (children[i].className) {
if (disp != 0 && children[i].className.indexOf("showMoreText2") != -1 && children[i].getAttribute("name") == elem.getAttribute("name")) {
children[i].style.display = disp;
} else if (disp == 0 && children[i].className.indexOf("showMoreText1") != -1) {
children[i].style.display = children[i].style.display == "none" ? "block" : "none";
}
}
}
}
"Toggle"
Code:
<div class="clearfix grpelem" id="u3567-4"><!-- content -->
<p>Energy is irreplaceable</p>
</div>
"showMoreText1" (1st level)
Code:
<div class="showMoreText1 clearfix grpelem" id="u3308-10" style="display: none" name="0"><!-- content -->
<p id="u3308-2">Why is energy irreplaceable?</p>
<p id="u3308-4">Well, it has to do with how the</p>
<p id="u3308-6">earth came upon itself. Blah</p>
<p id="u3308-8">Blah blah blah blah blah blah</p>
</div>
"showMoreText2" (2nd level - this is an image that will appear)
Bookmarks