Grow your CSS skills. Land your dream job.

Organic Tabs – One UL – Different classes show hide

  • # April 14, 2010 at 12:52 pm

    I’m wanting to use the Organic Tabs example to improve a messy situation I have currently.

    Example here:
    http://www.coldwellutah.com/test/agents.html

    I have a list of all the agents in our office, and then have them broken down by specialty – each specialty loading a completely different page. A nightmare to maintain. What I’d love to do is keep all the info on one page using the organic tabs solution, which I can do thanks to the excellent demo. HOWEVER, what I would most like to do is keep everything in ONE UL instead of showing and hiding different UL’s as the Organic Tabs does currently. The problem is I have no idea how to tell jQuery to load an li by class.

    Is there a way to have one UL where each person can have multiple classes assigning them to a specific specialty, or multiple specialties and then show and hide them depending on the class / specialty?

    For example:
    <li><a href="profiles/beaudry-zach.html" class="retailspecialty" class="officespecialty">Zach Beaudry</a></li>

    So this person would show up on the master list, but also on the OFFICE TAB and the RETAIL TAB.

    I have no idea how or if this could work but hoping someone could help me out.
    Much appreciated!

    # April 14, 2010 at 2:14 pm

    You can use multiple classes by just putting a gap in between the names…

    <li><a href="profiles/beaudry-zach.html" class="retailspecialty officespecialty">Zach Beaudry</a></li>

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".