I am trying to structure a part of this Sharepoint 2007 site to look something like this:
Acronym/Term Description Explanation |> (the explanation would ideally have the arrow - yes that is my arrow - that allows you to click to expand or hide the text)
Acronym/Term2 Description2 Explanation2 |>
Acronym/Term3 Description3 Explanation3 |>
I got a good start with the columns portion (I think), but now I have no clue how to get the expand/collapse function into this:
Expanding/collapsing would be done with some JavaScript and there are hundreds of ways to do so. You may want to Google it a bit.
Since you’re using HTML, then I suspect that you’re doing this to be viewed in a browser and therefore I think that it may be your solutions.
Although placing all the text and info into a table doesn’t work well with collapsing/expanding text.
Your HTML is not semantic. I would change it to something like (keeping the current structure)
[COLOR=#333333]<h1>HEADING</h1>[/COLOR]
[COLOR=#333333]<table>
[/COLOR]<thead>
[COLOR=#333333]<th>Acronym/Term</th>[/COLOR]
[COLOR=#333333]<th>Description</th>[/COLOR]
[COLOR=#333333]<th>Additional Info</th>[/COLOR]
</thead>
<tbody>
[COLOR=#333333]<tr>[/COLOR]
[COLOR=#333333]<td>This could be a term</td>[/COLOR]
[COLOR=#333333]<td>Here would be teh description</td>[/COLOR]
[COLOR=#333333]<td>some more text</td>[/COLOR]
[COLOR=#333333]</tr>
[/COLOR]</tbody>
[COLOR=#333333]</table>[/COLOR]
or
[COLOR=#333333]<table>
[/COLOR][COLOR=#333333]<caption>HEADING</caption>[/COLOR][COLOR=#333333]
[/COLOR]<thead>
[COLOR=#333333]<th>Acronym/Term</th>[/COLOR]
[COLOR=#333333]<th>Description</th>[/COLOR]
[COLOR=#333333]<th>Additional Info</th>[/COLOR]
</thead>
<tbody>
[COLOR=#333333]<tr>[/COLOR]
[COLOR=#333333]<td>This could be a term</td>[/COLOR]
[COLOR=#333333]<td>Here would be teh description</td>[/COLOR]
[COLOR=#333333]<td>some more text</td>[/COLOR]
[COLOR=#333333]</tr>
[/COLOR]</tbody>
[COLOR=#333333]</table>[/COLOR]
But if you want to follow the route of the collapsing/expanding text, probably this code could be better
[COLOR=#333333]<h1>HEADING</h1>
[/COLOR]<h2>Acronym/term</h2>
<h2>Description</h2>
<div class="expand">
<p>whatever text you need to include</p>
</div>
And then, that div would expand/collapse (once you added the javascript)
Also, you can look into jQuery’s accordion for collapsing/expanding text.