So as you can see in the picture I want to have a - + for the forum so that when you click the - it hides and the + shows the forum...

Also add another row under the forum title with labels of the columns.


I just found this link for hide/show code...

Where in the templates would I put it?

I'm searching for Jquery hide code to

Hey,

Which version is this? Link to your forum please?

I'm using PUNBB
Just letting you know cause i'm searching for this to

For show hide thing, you can use this tutorial...
http://www.webartzforum.com/tutorials-f7/making-show-hide-content-t903.htm

I am using phpbb2

http://thisisatest.goo-board.com/index.htm

Yeah that is a similar code to what I had.. I tried to test it out in the templates but didn't quite work.. as you can see where it says click.

How would I set it up in templates and how would I add a second bar underneath the forum title?

Hello , Anki i need one that you can toggle closed on the first page
And it needst to be a sliding one , just like here

blindbat1457 wrote:I am using phpbb2

http://thisisatest.goo-board.com/index.htm

Yeah that is a similar code to what I had.. I tried to test it out in the templates but didn't quite work.. as you can see where it says click.

How would I set it up in templates and how would I add a second bar underneath the forum title?

To add a bar underneath the forum title, add this code...

Code:

<tr>
<th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
<th nowrap="nowrap" width="50">{L_TOPICS}</th>
<th nowrap="nowrap" width="50">{L_POSTS}</th>
<th nowrap="nowrap" width="150" class="catoggle"><div style="width:150px;">{L_LASTPOST}</div><span>+/-</span></th>
</tr>

For the show/hide thing, add this code to your CSS...

Code:

.catoggle {
position: relative;
display: block;
}
.catoggle span {
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
}

And this code in the header template...

Code:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript">$(document).ready(function(){$(".catoggle span").click(function(){
$(this).parent().parent().next("tr").slideToggle("slow");});});</script>

You need to add it in index_box template after the table code starts.

Emilio wrote:Hello , Anki i need one that you can toggle closed on the first page
And it needst to be a sliding one , just like here

It can be done on punBB but I know your forum templates are heavily modified, so coding for you would be different

Heavily modified? True.
But there's still place!
You know how i can start this anki?

Emilio wrote:Heavily modified? True.
But there's still place!
You know how i can start this anki?

I did mean that there is no space. I mean that since your templates are different I can't help until I see your templates. I can give you the javascript code but you have to figure where to put it.

Code:

<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
   <tr>
      <td valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <span class="gensmall">{LAST_VISIT_DATE}<br />
         {CURRENT_TIME}<br />
         </span>
         <!-- END switch_user_logged_in -->
         <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
      </td>
      <td class="gensmall" align="right" valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
         <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
         <!-- END switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
      </td>
   </tr>
</table>
<!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <th colspan="4" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM}</th>
   </tr>
   <!-- END tablehead -->
   <!-- BEGIN cathead -->
   <div id="foo">
        <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
         <h{catrow.cathead.LEVEL} class="hierarchy">
            <span class="cattitle">
               <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
            </span>
         </h{catrow.cathead.LEVEL}>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
   </tr>
<br />
   <!-- END cathead -->
   <!-- BEGIN forumrow -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
      <!-- END inc -->
      <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
         <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      </td>
      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
         <h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
               <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
            </span>
         </h{catrow.forumrow.LEVEL}>
         <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
         <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
         </span>
      </td>
      <!-- BEGIN forum_link_no -->
      <td class="row21" align="center" valign="middle" height="50">
         <div class="topics">Topics: {catrow.forumrow.TOPICS}<br />Posts: {catrow.forumrow.POSTS}</span>
      </td>
      <td class="row3 over" align="center" valign="middle" height="50">
         <div class="lastpost">{catrow.forumrow.LAST_POST}</span>
      </td>
      <!-- END forum_link_no -->
      <!-- BEGIN forum_link -->
      <td class="row3" colspan="3" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.forum_link.HIT_COUNT}</span></td>
      <!-- END forum_link -->
   </tr>
   <!-- END forumrow -->
   <!-- BEGIN catfoot -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
   </tr>
   <!-- END catfoot -->
   <!-- BEGIN tablefoot -->
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow --></div>

That is my index_box template at the moment.. where do I place them?

@blindbat

This will be your template code, copy-paste it.

Code:

<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
  <tr>
      <td valign="bottom">
        <!-- BEGIN switch_user_logged_in -->
        <span class="gensmall">{LAST_VISIT_DATE}

        {CURRENT_TIME}

        </span>
        <!-- END switch_user_logged_in -->
        <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
      </td>
      <td class="gensmall" align="right" valign="bottom">
        <!-- BEGIN switch_user_logged_in -->
        <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a>

        <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>

        <!-- END switch_user_logged_in -->
        <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
      </td>
  </tr>

</table>
<!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
    <th nowrap="nowrap" width="50">{L_TOPICS}</th>
    <th nowrap="nowrap" width="50">{L_POSTS}</th>
    <th nowrap="nowrap" width="150" class="catoggle"><div style="width:150px;">{L_LASTPOST}</div><span>+/-</span></th>
    </tr>
  <!-- END tablehead -->
  <!-- BEGIN cathead -->
  <div id="foo">
        <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
        <h{catrow.cathead.LEVEL} class="hierarchy">
            <span class="cattitle">
              <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
            </span>
        </h{catrow.cathead.LEVEL}>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
  </tr>


  <!-- END cathead -->
  <!-- BEGIN forumrow -->
  <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
      <!-- END inc -->
      <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      </td>
      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
        <h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>

            </span>
        </h{catrow.forumrow.LEVEL}>
        <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
        <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
        </span>
      </td>
      <!-- BEGIN forum_link_no -->
      <td class="row21" align="center" valign="middle" height="50">
        <div class="topics">Topics: {catrow.forumrow.TOPICS}
Posts: {catrow.forumrow.POSTS}</span>
      </td>
      <td class="row3 over" align="center" valign="middle" height="50">
        <div class="lastpost">{catrow.forumrow.LAST_POST}</span>
      </td>
      <!-- END forum_link_no -->
      <!-- BEGIN forum_link -->
      <td class="row3" colspan="3" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.forum_link.HIT_COUNT}</span></td>
      <!-- END forum_link -->
  </tr>
  <!-- END forumrow -->
  <!-- BEGIN catfoot -->
  <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
  </tr>
  <!-- END catfoot -->
  <!-- BEGIN tablefoot -->
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow --></div>


Be sure to take a backup before making changes.


@ Emilio

This is your template code...

Code:

<div class="pun-crumbs">
  <p class="crumbs"><b><a href="{U_INDEX}">{L_INDEX}</a></b><strong>{NAV_CAT_DESC}</strong></p>
</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("h2.catoggle").click(function(){
$(this).parent().parent().next(".main-content").slideToggle("slow");
});
});
</script>

<div class="main">
<!-- BEGIN catrow -->
  <!-- BEGIN tablehead -->
      <div class="main-head" >
        <div class="page-title" ><b>{catrow.tablehead.L_FORUM}</b><h2 class="catoggle">+/-</h2></div>
      </div>
      <div class="main-content" style="margin-left: 60px;" id="category">
        <table cellspacing="0" class="table" >
           
            <tbody class="statused">
  <!-- END tablehead -->

  <!-- BEGIN forumrow -->
              <tr>
                  <td class="tcl" style="padding-right: {catrow.forumrow.INC_LEVEL_RIGHT}; padding-left: {catrow.forumrow.INC_LEVEL_LEFT};">
                    <span class="status" style="margin-right: -{catrow.forumrow.INC_WIDTH_ICON}; margin-left: -{catrow.forumrow.INC_WIDTH_ICON};">
                        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                    </span>
                    <h{catrow.forumrow.LEVEL} class="hierarchy"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a></h{catrow.forumrow.LEVEL}>
                    <br />
                    {catrow.forumrow.FORUM_DESC}<div style="float: right; padding-right: 40px;  margin-top: -110px;"><span style="font-family: arial, verdana, arial, times;"><span style="font-size: 14px;"><b>{catrow.forumrow.POSTS}</b></span> Messages in 
                  <span style="font-size: 12px;"><b>{catrow.forumrow.TOPICS}</b> Threads</span></span><br><br>{catrow.forumrow.LAST_POST}</div>
                    <!-- BEGIN switch_moderators_links -->
                    <br />
                    {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                    <!-- END switch_moderators_links -->
                    <span style="color: #1a1a1a; text-align: center" margin-left: 0 auto;">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                                                      <strong>{forumrow.L_SUBFORUM_STR}</strong>{forumrow.SUBFORUMS}</span>
                   
                  <br>
                 
                 
              </tr>
  <!-- END forumrow -->

  <!-- BEGIN tablefoot -->
            </tbody>
        </table>
      </div>
  <!-- END tablefoot -->
<!-- END catrow -->
</div>
<script>
$("button").click(function () {
$("body").toggle("slow");
}); 
</script>
<!-- BEGIN switch_on_index -->
<div class="main-box clearfix">
  <ul>
      <li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a></li>
      <li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a></li>
      <li><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
  </ul>
  <!-- BEGIN switch_delete_cookies -->
  <p class="right">
      <a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
  </p>
  <!-- END switch_delete_cookies -->
</div>
<!-- END switch_on_index -->

and this is your CSS...

Code:

.page-title {
position: relative;
}
h2.catoggle {
position: absolute;
right: 0px;
top: 0px;
cursor: pointer;
}

Awesome , Anki Last Question , I've added a pic instead of the +/-
But how do i make the pic hover? Just wanna add an hover img

Just make it a :hover state

So I believe it would be

Code:

h2.catoggle:hover {
  background-image:URL('yourimagehere');
  background-position: 0px -40px;
}


Just how I would do it. The background position varies depending on the image.

Emilio wrote:Hello , Anki i need one that you can toggle closed on the first page
And it needst to be a sliding one , just like here

Hope you don't mind my responding, especially since I wrote the category toggle script for the forum in your above link.

Actually I didn't write all that much, because there was no need to do so. A good software developer doesn't like to re-invent the wheel, so they first look at what's available...in this case, I knew that every Invision board on forumotion has categories that can be toggled on/off. And the code to do it was provided by forumotion in this script file: http://illiweb.com/rsc/13/frm/invision.js

So, instead of re-inventing the wheel, I set up the categories like an Invision board, and then made calls to forumotion-supplied functions.

Oh, on forumotion Invision boards, and here, the toggle settings are maintained every time the homepage is loaded. It's something for you to consider.

blindbat1457 wrote:Just make it a :hover state

So I believe it would be

Code:

h2.catoggle:hover {
  background-image:URL('yourimagehere');
  background-position: 0px -40px;
}


Just how I would do it. The background position varies depending on the image.

Doesn't work

Just add a class to the plus icon from the templates
and use the code for the rep hearts in ur forum

dion wrote:Oh, on forumotion Invision boards, and here, the toggle settings are maintained every time the homepage is loaded. It's something for you to consider.

Oh yes, I could use cookies. Didn't thought of that before . jQuery has a good enough cookie plugin which we can use with this script.

No need for any plugins...use the my_getcookie() and my_setcookie() functions built into the forumotion system script.

wow...Nice find I should experiment with these functions. May I know in which file these are found?