PunBB-Hosting Support Forum

The official support forum for all things related to PunBB-Hosting

You are not logged in.



#1 2013-10-09 21:09:17

Regular Member
Registered: 2014-02-19
Posts: 255

HOWTO: Show/Hide Blocks Of Content

Go into the Administration menu (admin_index.php) and click "Edit Templates" (admin_loader.php?plugin=AP_Edit_Templates.php) and click "Edit main.tpl" (admin_loader.php?plugin=AP_Edit_Templates.php&template=main.tpl). Code should pop up. Find the content you wish to show/hide. Above it, add the code:


<script type="text/javascript">
function showContent(id) {
    document.getElementById(id).style.display = 'block';
function hideContent(id) {
    document.getElementById(id).style.display = 'none';
<span id="content" style="display:block;">

With the code <span id="content" style="display:block;"> the content will be shown by default. To change the default to hidden, replace "block" with "none" so you end up with <span id="content" style="display:none;"> as your final code.
Now, after the content you wish to hide, put:



Wherever you would like to put the Show/Hide Option (in this example, it will be a link) put:


<a href="#" onclick="if(document.getElementById('content').style.display=='none') { showContent('content') } else { hideContent('content') }">Show/Hide Content</a>

If you have any questions about this code like how to change the text for the link or how this works, ask here in the forums or PM me.

There is new code. You can replace the last code shown above with


<button class="link" onclick="if(document.getElementById('content').style.display=='none') { showContent('content') } else { hideContent('content') }">Show/Hide Content</button>

You may also add underline tags (<u>) around the "Show/Hide Content" text so you end up with <button class="link" onclick="if(document.getElementById('content').style.display=='none') { showContent('content') } else { hideContent('content') }">Show/Hide Content</button>.

This would also require some styling. Somewhere in the template your are editing, put the code


.link {
color: #000066;
background-color: #FFFFFF;
border-style: none;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
text-decoration: underline;

Make sure when you put this code it isn't inside any tags as that may cause some issues. Depending on the forum style, you may have to change "color:#000066;" to match the link color the forum uses. You may also have to change "background-color:#FFFFFF" depending on the default background color of your forum.

The benefit of this new code is if you are trying to detect the URL of a page, you don't have to do it for the page URL and then for the page URL with "#" on the end of it. This will help reduce code and make life much easier.

Last edited by curiouscrab (2015-07-06 14:46:50)

My Stuff
Current political-science testing in progress here.



2013-10-09 21:09:17



Board footer

Powered by FluxBB
Hosted by PunBB-Hosting