How do I add more buttons to Multiple Show/Hide DIV
Question
I'm having a problem connecting DIV's "q4", "q5", "q6", and "q7" to their rightful places. I want q4 to show when tablet is clicked, q5 to show when Macbook is clicked, q6 to show when Mac is clicked, and q7 to show when iPod is clicked. Could some please explain to me how this is done? I look at the javascript below and I kind of see a pattern but how do I add more buttons?
<!DOCTYPE html>
<html>
<table>
<td>
<a href="#" onclick="showHide(1);"><button>iPhone</button></a>
<a href="#" onclick="showHide(2);"><button>Cell Phone</button></a>
<a href="#" onclick="showHide(3)"><button>iPad</button></a>
<a href="#" onclick="showHide(3)"><button>iPod</button></a>
<a href="#" onclick="showHide(4);"><button>Tablet</button></a>
<a href="#" onclick="showHide(5);"><button>Macbook</button></a>
<a href="#" onclick="showHide(6)"><button>Mac</button></a>
</td>
</table>
<div id="q1" style="display: none;">
<button onclick="subShowHide('1');">iPhone 5</button>
<button>iPhone 4S</button>
<button>iPhone 4</button>
<button>iPhone 3GS</button>
</div>
<div id="q2" style="display: none;">
<button>HTC</button>
<button>Nokia</button>
<button>Motorola</button>
<button>Blackberry</button>
<button>Samsung</button>
<button>LG</button>
</div>
<div id="q3" style="display: none;">
<button>iPad Mini</button>
<button>iPad 4th Generation</button>
<button>iPad 3rd Generation</button>
<button>iPad 2nd Generation</button>
<button>iPad 1st Generation</button>
</div>
<div id="q4" style="display: none;">
<button>Apple</button>
<button>Amazon</button>
<button>Asus</button>
<button>Google</button>
<button>Microsoft</button>
<button>Samsung</button>
</div>
<div id="q5" style="display: none;">
<button>Macbook</button>
<button>Macbook Air</button>
<button>Macbook Pro</button>
</div>
<div id="q6" style="display: none;">
<button>iMac</button>
<button>Mac Mini</button>
<button>Mac Pro</button>
</div>
<div id="q7" style="display: none;">
<button>Touch</button>
<button>Nano</button>
<button>Classic</button>
</div>
<div id="qq1" style="display: none;">
<button onclick="subSubShowHide('1');">AT&T</button>
<button>Sprint</button>
<button>Verizon</button>
<button>T-Mobile</button>
<button>Unlocked</button>
<button>Other</button>
</div>
<div id="qqq1" style="display: none;">
<button>test1</button>
<button>test2</button>
<button>test3</button>
</div>
<script>
function showHide(obj) {
for(i=1;i<=1;i++){
document.getElementById('qq'+i).style.display = 'none';
}
for(i=1;i<=1;i++){
document.getElementById('qqq'+i).style.display = 'none';
}
for(i=1;i<=4;i++){
if (i == obj) {
document.getElementById('q'+i).style.display = 'block';
} else {
document.getElementById('q'+i).style.display = 'none';
}
}
return false;
}
function subShowHide(obj){
for(i=1;i<=1;i++){
document.getElementById('qqq'+i).style.display = 'none';
}
for(i=1;i<=1;i++){
if (i == obj) {
document.getElementById('qq'+i).style.display = 'block';
} else {
document.getElementById('qq'+i).style.display = 'none';
}
}
return false;
}
function subSubShowHide(obj){
for(i=1;i<=1;i++){
if (i == obj) {
document.getElementById('qqq'+i).style.display = 'block';
} else {
document.getElementById('qqq'+i).style.display = 'none';
}
}
return false;
}
</script>
</html>
3 answers
solution1
2 2013-08-24 16:26:57
Use jQuery show / hide methods:
<script>
$("#buttonID").click(function() {
$(".groupClass").show("fast");
});
</script>
solution2
1 2013-08-24 16:39:22
Here you go:
I want q4 to show when tablet is clicked
$('#tablet').click(function(){
$('#q4').show();
});
here tablet and q4 are IDs of the elements(button or div) respectively.
Same goes for the q5,q6 and so on you just need to change the IDs . I think some of my seniors have answered it before but I think I have cleared my self in a more clear ways that the questioner wants :)
solution3
1 ACCPTED 2013-08-24 16:50:23
Found the culprit, you were trying to call a function to show the 5th element or 6th element, but inside the function you checked only till 4 objects. Made a small correction and things should work.
Working code below :)
<!DOCTYPE html>
<html>
<table>
<td>
<a href="#" onclick="showHide(1);"><button>iPhone</button></a>
<a href="#" onclick="showHide(2);"><button>Cell Phone</button></a>
<a href="#" onclick="showHide(3)"><button>iPad</button></a>
<a href="#" onclick="showHide(3)"><button>iPod</button></a>
<a href="#" onclick="showHide(4);"><button>Tablet</button></a>
<a href="#" onclick="showHide(5);"><button>Macbook</button></a>
<a href="#" onclick="showHide(6)"><button>Mac</button></a>
</td>
</table>
<div id="q1" style="display: none;">
<button onclick="subShowHide('1');">iPhone 5</button>
<button>iPhone 4S</button>
<button>iPhone 4</button>
<button>iPhone 3GS</button>
</div>
<div id="q2" style="display: none;">
<button>HTC</button>
<button>Nokia</button>
<button>Motorola</button>
<button>Blackberry</button>
<button>Samsung</button>
<button>LG</button>
</div>
<div id="q3" style="display: none;">
<button>iPad Mini</button>
<button>iPad 4th Generation</button>
<button>iPad 3rd Generation</button>
<button>iPad 2nd Generation</button>
<button>iPad 1st Generation</button>
</div>
<div id="q4" style="display: none;">
<button>Apple</button>
<button>Amazon</button>
<button>Asus</button>
<button>Google</button>
<button>Microsoft</button>
<button>Samsung</button>
</div>
<div id="q5" style="display: none;">
<button>Macbook</button>
<button>Macbook Air</button>
<button>Macbook Pro</button>
</div>
<div id="q6" style="display: none;">
<button>iMac</button>
<button>Mac Mini</button>
<button>Mac Pro</button>
</div>
<div id="q7" style="display: none;">
<button>Touch</button>
<button>Nano</button>
<button>Classic</button>
</div>
<div id="qq1" style="display: none;">
<button onclick="subSubShowHide('1');">AT&T</button>
<button>Sprint</button>
<button>Verizon</button>
<button>T-Mobile</button>
<button>Unlocked</button>
<button>Other</button>
</div>
<div id="qqq1" style="display: none;">
<button>test1</button>
<button>test2</button>
<button>test3</button>
</div>
<script>
function showHide(obj) {
for(i=1;i<=1;i++){
document.getElementById('qq'+i).style.display = 'none';
}
for(i=1;i<=1;i++){
document.getElementById('qqq'+i).style.display = 'none';
}
for(i=1;i<=6;i++){ //CHANGED THIS LINE
if (i == obj) {
document.getElementById('q'+i).style.display = 'block';
} else {
document.getElementById('q'+i).style.display = 'none';
}
}
return false;
}
function subShowHide(obj){
for(i=1;i<=1;i++){
document.getElementById('qqq'+i).style.display = 'none';
}
for(i=1;i<=1;i++){
if (i == obj) {
document.getElementById('qq'+i).style.display = 'block';
} else {
document.getElementById('qq'+i).style.display = 'none';
}
}
return false;
}
function subSubShowHide(obj){
for(i=1;i<=1;i++){
if (i == obj) {
document.getElementById('qqq'+i).style.display = 'block';
} else {
document.getElementById('qqq'+i).style.display = 'none';
}
}
return false;
}
</script>
</html>
Although this code would work as expected by you, remember to use a better naming convention like I've demonstrated in my example HERE.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to add more Javascript buttons to multiple DIV Buttons
“Show More” Link for buttons inside div (multiple show more buttons)
Multiple radio buttons to show/hide div
show/hide a single div from multiple buttons
How do I show and hide loader to show more posts?
Use two or more Buttons to Show/hide and replace text in single DIV
How do I create show/hide elements for different buttons?
How do I toggle hide/show between three divs; using three buttons (each belongs to one div) dynamically?
Multiple show and hide buttons
Multiple buttons to show/hide div depending on current display
Related Tags