MyBB Community Forums

Full Version: Adding Collapse Buttons to Any Table
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2
Can anybody offer an update to this? Trying to use this on portal boxes, but the variables are not recognised so the collapse image does not appear, and the last state is not remembered.

Edit: Working now.

<div class="expcolimage"><img src="{$theme['imgdir']}/collapse{$collapsedimg['abcdef']}.png" id="abcdef_img" class="expander" alt="[-]" title="[-]"></div>

<div style="{$collapsed['abcdef_e']}" id="abcdef_e">
(2015-06-13, 09:15 PM)pandabb Wrote: [ -> ]helo thanks for this, whats the code to make the table CLOSED by default?

I need same code for use only in single table on my index page.
Hi, I just came across this, and I am trying to use it to add an expand/collapse image, to the header in a form plugin that I am using to allow people to collapse irrelevant sections on forms.

I would basically like to collapse sections of a long form, in the same way we can collapse the categories of the forums shown on the index.

And so, far I got the expand/collapse images to show up, but when I click on it, the only thing that changes is the expand/collapse image itself. Nothing else shows up.

Here was the original template before I tried to apply this tutorial.

<tr>
    <td class="thead" colspan="2">{$fieldoutput}</td>
</tr>

Note that in the original template, there is no reference to the trow, which is where the information would show.

Here is the template after I applied this.

<tr><td class="thead" colspan="2">
			<div class="expcolimage">
				<img id="inferno_img" class="expander" title="[-]" alt="[-]" src="images/collapse.png" style="cursor: pointer;">
			</div>{$fieldoutput}</td>
</tr>

I am sure I did something wrong here, but as I am not a coder, and am still getting used to this software, I have no idea where or how to fix it. I used some of the template from the inferno shoutbox because it seemed like the closest to the effect I was looking for.

My question is, how would I apply this tutorial to the original template in order to create the effect that I am going for?

Thank you in advance for your time, and I would appreciate any help offered.
I can't see your tbody part with all required classes. They are related.
Hi, thank you for the reply and I apologize for the late response.. here is the code..

<tbody>
<tr><td class="thead" colspan="2">
			<div class="expcolimage">
				<img id="inferno_img" class="expander" title="[-]" alt="[-]" src="images/collapse.png" style="cursor: pointer;">
			</div>{$fieldoutput}</td>
</tr>
</tbody>
Use the unique ID as I have stated in red very clear.
For expcolimage of .thead as well as in tbody.
Pages: 1 2