Accordion Content, need to hide an element

[atroxmavenia]

1) Script Title: Accordion Content script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...daccordion.htm

3) Describe problem: I'm trying to modify it to hide the content element when it's not using it. I'm experiencing a display problem when using this in a nested table. I need to display a table row when someone clicks on a cell in a row above it, but it messes with the formatting of the table and spazzes out, then corrects itself as the animation finishes. I'm guessing because of the way it's adding a row into the table.

Anyway, I'm trying to either hide a specific element by ID when clicking on the header, or have it just hide whatever element is using the content class. Any ideas?

[Beverleyh]

I'm afraid we need to see the web page before we can offer a fix - please post a link to save us from guessing the context.

[atroxmavenia]

The site's on a closed system, not accessible to the public. However, there's not really any context to guess... I just need to simply change the style of the content when clicking on the expand/collapse link.

[Beverleyh]

Without a sample I can't offer any real suggestions, so at this stage i'd say look into jQuery and the append() function. http://www.jquery.com/

You'll probably get more specific help though if you can provide a sample page on a non-secure network/system or at the very least, post all the code for that page. I'm not being awkward - we just need to see what we're working with to offer real solutions.

[atroxmavenia]

<table>
<thead>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</thead>
<tbody>
<tr>
<td>Sample Text</td>
<td class="header">Expand</td>
</tr>
<tr class="content">
<td>This is the content that</td>
<td>would be hidden until expand was clicked.</td>
</tr>
</tbody>
</table> 

The table-row with the class "content" is what I want to remain hidden. I'd like to use display: none on it, but I couldn't figure out how to switch to any other display mode in the accordion code. I'd like to either be able to use the class "content" to set the style of the element, or just hide it with javascript by calling getElementById.

[Beverleyh]

As I said before, we need all the code for the whole page so we can see where everything fits in in context. It would make things so much easier and help you get the correct answer faster.

I appreciate that you may be reluctant to post your code but try and see it from our side - you're asking for help and asking us to work blind.
Even with the best intentions, a description and code snippet can be interpretted many different ways and people will be reluctant to offer help in the form of stab-in-the-dark type guesses due to the shear (pointless) effort involved.

If you would like somebody to help you and help you efficiently, please give us all the information we need.

[atroxmavenia]

I'm not reluctant to post my code, I simply can't. As I said, it's on a closed system. But, if you assume that the code I posted above is the code in it's entirety, that will work. It's the only part of the code that matters. The script is included, and the initialization work is done, just as the script says. The only difference is my table has 8 columns, then between each row of information, there's a row that I want completely hidden that will expand when the user presses an expand button. That row is 1 column wide, but colspan is 8.

[Beverleyh]

Assuming I've interpretted correctly, try taking class="content" out of the <tr>, then lose one of the <td>s below but put colspan="2" in the remaining one. Lastly, put your content in <div class="content">content here</div> inside the table cell that is now spanning 2 columns.

You may also need to zero the padding on the <tr> and <td> that now contains the content <div> with style="padding:0;"

[Beverleyh]

Did that work? Please post your feedback so others may also benefit from the suggestion.

[atroxmavenia]

I've already tried that as well. While the animation is smoother, and there's no glitching, there's also a row that shows about 20px that can't be hidden. I've tried setting padding, height and line-height to 0, but it doesn't go away. This table I have can have several hundred rows, so adding in an extra 20px between each row just makes the page too long.