Treehouse: Grow your CSS skills. Land your dream job.

Hiding & Displaying multiple elements based on their class or ID

  • # October 11, 2010 at 3:19 pm

    Hi everyone,

    I’ve got this page here that I just finished designing. There’s a lot of redundancy in it that I feel could be solved with some more efficient javascript. Unfortunately I’m not well versed in the javascript language.

    The idea behind the page is to display the manufacturers the company carries by category. Right now I’m using Tabs from jQuery Tools to accomplish this. Each tab has a listing of the appropriate manufacturers in it. The redundancy is that I have many manufacturers that are displayed in more than one category. So I have the same code repeated over and over again.

    I was thinking that something like this would be more efficient.


    The above tag would be visible when the user clicks on the “All”, “Projectors”, “Flat Panels”, or “Digital Signage” navigation links. Otherwise it would be set to display:none;.

    Any help in understanding how to accomplish this would be greatly appreciated. :)

    On another note, I have a CSS question in regards to making an element’s height fill its container. On this same page you’ll notice that when the section at the bottom is set to “All Manufacturers” that my navigation doesn’t fill the container’s height completely. Here’s the CSS for my page.

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.