Expandable Text in Sharepoint Site within a column - I have no idea what I'm doing

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:

<SPAN class=heading>HEADING</SPAN>
<HR style=“WIDTH: 100%; HEIGHT: 1px; COLOR: black”>
<table>
<tr>
<td><SPAN CLASS=BODY><FONT size=2>Acronym/Term</SPAN></td>
<td><SPAN CLASS=BODY><FONT size=2>Description</SPAN></td>
<td><SPAN CLASS=BODY><FONT size=2>collapsed/expanded text</SPAN></td>
</tr>
</table>

All I have to work with is a content editor web part that designates a place where I can enter in HTML into the content editor.

Please help!!

I don’t work with Sharepoint so I can provide little help. I’m curious about the poll though. I don’t see what it has to do with your question

I don’t know I was just playing with the site as I’m new to the sitepoint.com site.

Could you assist with what I’m trying to do?

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.