I have a page with lots of people, and each person may be included in a sub-directory by specialty.
Is there a way to do this without a database but just using jquery / css?
Here is the existing page:
http://www.coldwellutah.com/test/agents.html
Each sub-directory goes to a different page. This is way too cumbersome to keep maintained. I’d like to have everyone in one place.
For example could I assign a class to each specialty and have them list with some jquery mechanism?
I’m looking at this in this light because I don’t have a good understanding of DB or how to implement.
Thoughts?
Thanks.
You could use a definition list.
<dl>
<dt>Office Agents</dt>
<dd>Mike Ash</dd>
<dd>Scott Mangum</dd>
<dd>...</dd>
<dt>Retail Agents</dt>
<dd>Zach Beaudry</dd>
<dd>Kevin Harper</dd>
<dd>...</dd>
</dl>
Or, you could place them in a list, and use an accordion to show/hide the content.
<ul>
<li>Office Agents
<ul>
<li>Mike Ash</li>
<li>Scott Mangum</li>
<li>...</li>
</ul>
</li>
<li>Retail Agents
<ul>
<li>Zach Beaudry</li>
<li>Kevin Harper</li>
<li>...</li>
</ul>
</li>
</ul>
And there are a vast array of other types of structures as well. It all depends on what you’re intentions are going to be.
And we haven’t even started yet to touch any JavaScript.
Do you have any ideas of examples from other web pages around the internet that do things in a similar way to what you desire?
I’m liking this as an example:
I’ll pursue this unless I find a better solution.
Thanks for the input. These should be represented as a list. You are right on that for sure I think.
Well if you’re using the jQuery library, here is their tabs solution:
http://docs.jquery.com/UI/Tabs
Thanks for the link!
Do you think this will allow me to show specialty by adding a class?
Or do you think I’m looking the wrong direction for this…
yes, you should be able to use a class to adjust the presentation, so that you can show speciality.
Ok I hate to bother you on this but hoping for some glimmer of understanding.
I get that the “organic tabs” example is showing and hiding different UL’s by ID. However, it would be great to have only one list and show and hide parts of the one list by different classes. – I have no idea how to write this code. Any chance someone could show me an example of how this works, or if it will work?
Classes don’t work for tabs. Each tab relates to a single specific section of the page, which is why unique identifiers are the correct tool to use for them.
So the question needs to be asked. What are you attempting to do with tabs that makes using unique identifiers a problem.
The problem is if I have 1 list of say 10 people, and 2 of those people are specialists in Office, 5 are specialists in Retail, 2 are specialists in BOTH Office and Retail…
I can’t give them a unique ID. They all need to be of the “retail” class and show when I hit that tab. I can do this by simply adding a list of all the retail only people, office only people, etc. to a unique UL but it would be nice if I could have each person in once list with a way to filter or show only people associated with that specialty.
Example of current solution:
http://www.coldwellutah.com/test/agents.html
Bad
Organic Tabs in unique UL = better
One UL with the ability to show li with specific class = BEST
Sorry, I think I know what I want but don’t know if it can be done really.
Makes me think this needs to be a database I suppose.
http://www.coldwellutah.com/test/agents.html
Ok I just updated this page using a half-baked version of the script.
Default is a massive list of people. The Office division tab loads the office division UL.
But it would be cool if it could just load li elements that had a class of .office so I could keep everyone in one list instead of having multiple lists with redundant names.
Then perhaps you need something completely different than a standard tabbed solution.
It is possible to use classes so css automatically shows/hides the appropriate people, but do you first need to ensure that non=-javascript visitors can use it?
Or to phrase it another way, do you plan to provide a non-working page for non-javascript users? If yes, then there are ways that classes can help to automate the work for you.
right now I’m taking baby steps at this. 
ultimately yes I’d like maximum usability. I’m just trying to figure out if I can do this a more efficient way than having a completely different page for each specialty.
A more efficient way is to have a separate page for each tab. Each page uses some server-side code to generate the list of people. That works for the no-scripting situation.
Then from the main page, you use scripting to request from the server (via AJAX) the list of people to show when people click on each category, and replace the list of people with that retrieved list instead.