javascript - How to hide multiple Show/Hide DIV's when another DIV is clicked -
how hide buttons in second , third row if different button clicked in first row , if button clicked in second row hide buttons column , show buttons column clicked? i'm trying achieve form similar http://gazelle.com/ website it's getting bit difficult me.
example: if click, "iphone" -- buttons iphone 5, iphone 4s, iphone 4, , iphone 3gs show, click, "iphone 5" -- buttons at&t, sprint, verizon, unlocked, , other show under first row, change mind , decide click "tablet" in first, buttons "tablet" show buttons iphone 5 go hiding buttons "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>
try hope solve 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> 
Comments
Post a Comment