My Eco Home - Picked Products


/ Published in: jQuery
Save to your folder(s)



Copy this code and paste it in your HTML
  1. $(document).ready(function(){
  2.  
  3. // -- FILTER BY BRAND
  4.  
  5. // Hide all product info
  6.  
  7. $(".view-picked-products .views-row").hide();
  8.  
  9. // Click a brand name
  10.  
  11. $(".view-picked-products h3").click(function() {
  12.  
  13. // First hide any other expanded brands within the type (ie, Fridge)
  14.  
  15. $(this).parent().find(".views-row").hide();
  16.  
  17. // Then show the three product divs applicable to brand
  18.  
  19. $(this).next().show(); // First div
  20. $(this).next().next().show(); // Second div
  21. $(this).next().next().next().show(); // Third div
  22.  
  23. });
  24.  
  25. // -- FILTER BY PRODUCT
  26.  
  27. // Hide all product info (except for the serial number)
  28.  
  29. $(".view-picked-products .views-row > div:not(.views-field-field-serialnumber-value)").hide();
  30.  
  31. // Click a product's serial number
  32.  
  33. $(".view-picked-products .views-field-field-serialnumber-value").click(function() {
  34.  
  35. // First, hide any other expanded products within the type (ie, Fridge)
  36.  
  37. $(this).parent().parent().find(".views-row > div:not(.views-field-field-serialnumber-value)").hide();
  38.  
  39. // Then show the four extra product details
  40.  
  41. $(this).next().show(); // "Cost"
  42. $(this).next().next().show(); // "RRP"
  43. $(this).next().next().next().show(); // "Water rating"
  44. $(this).next().next().next().next().show(); // "Energy rating"
  45.  
  46. // Lastly, stop the link from going to another page
  47.  
  48. return false;
  49.  
  50. });
  51.  
  52. });

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.