How to hide multiple Show/Hide DIV's when another DIV is clicked
Question
How do I hide all buttons in the second and third row if a different button is clicked in the first row and if a another button is clicked in the second row it will hide the buttons for that column and show buttons for the column that is clicked? I'm trying to achieve a form similar to http://gazelle.com/ for my website but it's getting a bit difficult for me.
Example: If I click, "iPhone" -- buttons iphone 5, iphone 4s, iphone 4, and iphone 3gs show, then click, "iphone 5" -- buttons at&t, sprint, verizon, unlocked, and other show under the first row, then I change my mind and decide to click "tablet" in the first, the buttons for "tablet" show up but the buttons from iphone 5 go back to hiding but the buttons for "tablet" show up.
<!DOCTYPE html>
<html>
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function showHide(obj) {
var div = document.getElementById(obj);
if (div.style.display == 'none') {
div.style.display = '';
}
else {
div.style.display = 'none';
}
}
</script>
</head>
<body>
<table>
<td>
<a href="#" onclick="showHide('hidden_div'); return false;"><button>iPhone</button></a>
<a href="#" onclick="showHide('q2'); return false;"><button>iPod</button></a>
<a href="#" onclick="showHide('q3'); return false;"><button>Tablet</button></a>
</td>
</table>
<div id="hidden_div" style="display: none;">
<button onclick="showHide('q4'); return false;">iPhone 5</button>
<button>iPhone 4S</button>
<button>iPhone 4</button>
<button>iPhone 3GS</button>
</div>
<div id="q2" style="display: none;">
<button>iPod Touch</button>
<button>iPod Nano</button>
<button>Classic iPod</button>
</div>
<div id="q3" style="display: none;">
<button>iPad</button>
<button>Windows</button>
<button>Nook</button>
</div>
<div id="q4" style="display: none;">
<button onclick="showHide('q'); return false;">AT&T</button>
<button>Sprint</button>
<button>Verizon</button>
<button>Unlocked</button>
<button>Other</button>
</div>
</body>
</html>
3 answers
solution1
1 ACCPTED 2013-08-24 07:05:12
Try this i hope it will solve your requirement. http://jsfiddle.net/satheeaseelan/Qf5B3/
<!DOCTYPE html>
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">.categories, .serviceProviders button{ display:none;}</style>
</head>
<body>
<table>
<td>
<a href="#" class="mainHead"><button>iPhone</button></a>
<a href="#" class="mainHead"><button>iPod</button></a>
<a href="#" class="mainHead"><button>Tablet</button></a>
</td>
</table>
<div class="categories">
<button class="iphone5">iPhone 5</button>
<button class="iphone4s">iPhone 4S</button>
<button class="iphone4">iPhone 4</button>
<button class="iphone3gs">iPhone 3GS</button>
</div>
<div class="categories">
<button class="ipodT">iPod Touch</button>
<button class="ipodN">iPod Nano</button>
<button class="ipodC">Classic iPod</button>
</div>
<div class="categories">
<button class="ipad">iPad</button>
<button class="windows">Windows</button>
<button class="nook">Nook</button>
</div>
<div class="serviceProviders">
<button class="iphone5 ipodN iphone4s ipad">AT & T</button>
<button class="nook ipodN iphone3gs ipad">Sprint</button>
<button class="iphone5 iphone4s windows">Verizon</button>
<button class="nook ipodN ipodT ipad iphone4">Unlocked</button>
<button class="iphone5 iphone3gs windows">Other</button>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$('.mainHead').each(function(index, element) {
$(this).click(function(){
$('.categories').hide();
$('.serviceProviders button').hide();
$('.categories').eq(index).show();
});
});
$('.categories button').each(function(index, element) {
$(this).click(function(){
var temp = $(this).attr('class');
$('.serviceProviders button').hide();
$('.serviceProviders button').each(function(){
if($(this).hasClass(temp)){
$(this).show();
}
})
});
});
});
</script>
</body>
</html>
solution2
0 2013-08-24 05:41:18
Try This:
<table>
<td>
<a href="#" onclick="showHide(1);"><button>iPhone</button></a>
<a href="#" onclick="showHide(2);"><button>iPod</button></a>
<a href="#" onclick="showHide(3)"><button>Tablet</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>iPod Touch</button>
<button>iPod Nano</button>
<button>Classic iPod</button>
</div>
<div id="q3" style="display: none;">
<button>iPad</button>
<button>Windows</button>
<button>Nook</button>
</div>
<div id="qq1" style="display: none;">
<button onclick="subSubShowHide('1');">AT&T</button>
<button>Sprint</button>
<button>Verizon</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>
solution3
0 2013-08-24 07:18:11
This is sooo bad practice, but here is solution:
You need jQuery for this to work so jQuery needs to be loaded before this script whichever option you decide to use.
Put this in script tag in your tag. Or in separate javascript document with document ready:
function showHide(obj) {
$('#' + obj).toggle('fast');
console.log('#' + obj);
}
Ping me for more elegant and smooth solution
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.