I have a table listing products in a Guitar store. Each row contains one item. Each line (and each product) is either new, or used, or consigned. I would like the user to be able to click the link on the UL sidebar (by clicking the Create, Use, or Ends button), and only the table rows of this corresponding condition remain visible. Therefore, if the user clicked "Use", all the lines New and Cons will disappear.
I did this work with some simple JavaScript, but uses getElementByID , which will not work for me, because I need to identify TRs with classes. So when I get dumb. I am not sure how to do this work with classes.
Here is the solution I have developed so far:
<html> <head> <script> function used() { document.getElementById("new").style.display = 'none'; document.getElementById("cons").style.display = 'none'; document.getElementById("used").style.display = ''; } function news() { document.getElementByClass("new").style.display = ''; document.getElementById("cons").style.display = 'none'; document.getElementById("used").style.display = 'none'; } function cons() { document.getElementByClass("new").style.display = 'none'; document.getElementById("cons").style.display = ''; document.getElementById("used").style.display = 'none'; } </script> </head> <body> <span onClick="used();">Used</span><br /> <span onClick="news();">New</span><br /> <span onClick="cons();">Cons</span><br /><br /> <table border="1"> <tr id="used"> <td>Used</td> </tr> <tr id="new"> <td>New</td> </tr> <tr id="cons"> <td>Cons</td> </tr> </table> </body> </html>
The above code works fine, and if I could get it to work with classes, that would solve my immediate need. However, ultimately, I would like to increase it to use for Brands, so that the user could click on the brand and see only messages for this brand. In this situation, I may have 20 or 30 brands in the table, so the above will not be ideal. In addition, this will ultimately live on the Wordpress website, and I would ideally like to create classes for each brand from metadata in wordpress and similarly create a dynamic UL containing brands that switch the table, as well as have a js solution. which can work with a changing set of variables! Therefore, I know that what I have above is not the best approach, but this is the only thing that I know enough to try right now.
Help with the foregoing will be rated most highly, as will tips on how I can do this more efficiently as I move towards the more complex aspect of Brands.
EDIT:
Google has helped me, and I have a new direction - this may solve my problem:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <title>Sandbox</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <style type="text/css" media="screen"> </style> </head> <body> <ul class="side-nav"> <li><a class="cond" href="#">Show all</a></li> <li><a class="used" href="#">Used</a></li> <li><a class="new" href="#">New</a></li> <li><a class="cons" href="#">Cons</a></li> </ul> <table> <tr class="cond used"> <td>A Used Item</td> <td>Used.</td> </tr> <tr class="cond new"> <td>A New Item</td> <td>New</td> </tr> <tr class="cond cons"> <td>A Cons Item</td> <td>Cons</td> </tr> </table> <script> $(function() { $('ul.side-nav a').click(function() { $('tr.cond').hide(); $('tr.' + $(this).attr('class')).show(); }); }); </script> </body> </html>