Collapse Expand addon block

Discuss phpBB 3.0.x in general.
Forum rules
Please post any phpBB 3.1.x related topics in the phpBB 3.1.x discussion forum.
clight77
New member
New member
Posts: 5
Joined: 23 Mar 2013, 04:51

Collapse Expand addon block

Postby clight77 » 09 Aug 2015, 12:24

I don't know what I am doing wrong, when I click the collapse icon nothing happens :(
Can anyone give me a clue as to what I am missing.
Thanks :)

------------------------------------------------------------------------------------------------------------------
latest_post_center.html ......This is the addon block I want to collapse and expand .......
------------------------------------------------------------------------------------------------------------------

Code: Select all

<div class="forabg">
  <div class="forumlist">
         <div class="inner"><span class="corners-top"><span></span></span>
         <ul class="topiclist" style="position:relative">
            <li class="header">
               <dl class="icon">
               <dt><font color="yellow">{L_LP_TITEL}</font></dt>
   <dd class="posts"><font color="yellow">{L_REPLIES}</font></dd>   
   <dd class="views"><font color="yellow">{L_VIEWED}</font></dd>   
   <dd class="lastpost">&nbsp;<font color="yellow">Last Post/Reply</font></dd>
                 </dl>
            </li>
         </ul>
      <div class="trigger active"></div>
    <div class="collapsethis">
               <!-- BEGIN latest_post -->
         <ul class="topiclist forums">
            <li class="row<!-- IF latest_post.S_ROW_COUNT is even --> flbg2<!-- ELSE --> flbg1<!-- ENDIF -->">         
               <dl class="icon" style="background-image: url({forumrow.FORUM_FOLDER_IMG_SRC}); background-repeat: no-repeat;">
            <dt title="{forumrow.FORUM_FOLDER_IMG_ALT}">
                  <dt><a href="{latest_post.POST_LINK}">{LAST_POST_IMG}</a>&nbsp;<a href="{latest_post.FORUM_LINK}" class="forumtitle">{latest_post.FORUM_TITLE}</a><br /><a class="lp_center_text" href="{latest_post.POST_LINK}">{latest_post.POST_TEXT}</a><br />{L_IN} <span class="lp_center_forumname">{latest_post.FORUM_NAME}</span></dt>
                  <dd class="posts">{latest_post.REPLIES}</dd>
                  <dd class="views">{latest_post.VIEWS}</dd>
                  <dd class="lastpost">
                     <!-- IF LP_SHOW_AVATAR --><div class="lp_center_avatar">{latest_post.USER_AVATAR}</div><!-- ENDIF -->
                     <!-- IF LP_SHOW_AUTHOR --><div class="lp_center_author">&nbsp;{L_FROM} {latest_post.POST_AUTHOR}<br />&nbsp;{latest_post.POST_DATE}</div><!-- ELSE --><div class="lp_center_date">&nbsp;{latest_post.POST_DATE}</div><!-- ENDIF -->
                  </dd>
               </dl>
            </li>
         </ul>
         <!-- BEGINELSE -->
         <div class="panel">
            <div class="inner"><span class="corners-top"><span></span></span>
               <strong>{L_LP_NO_FORUM}</strong>
               <span class="corners-bottom"><span></span></span></div>
         </div>
         <!-- END latest_post -->
      </div>
   <span class="corners-bottom"><span></span></span></div>
</div></div></div>


------------------------------------------------------------------------------------
forumlist_body.html ....phpbb3 .....
------------------------------------------------------------------------------------

Code: Select all

<div class="forumlist">
<!-- BEGIN forumrow -->
   <!-- IF (forumrow.S_IS_CAT and not forumrow.S_FIRST_ROW) or forumrow.S_NO_CAT  -->
         </ul>
         </div>
         <span class="corners-bottom"><span></span></span></div>
      </div>
   <!-- ENDIF -->

   <!-- IF forumrow.S_IS_CAT or forumrow.S_FIRST_ROW  or forumrow.S_NO_CAT  -->
      <div class="forabg<!-- IF $MODERATOR_COLUMN_ON_INDEX == 'yes' and $SIDEBARS != 'both' --> modcolumn<!-- ENDIF --><!-- IF $SIDEBARS == 'both' --> bothsidebars<!-- ENDIF -->">
         <div class="inner"><span class="corners-top"><span></span></span>
         <ul class="topiclist">
            <li class="header">
               <dl class="icon">
                  <dt><!-- IF forumrow.S_IS_CAT --><a href="{forumrow.U_VIEWFORUM}"><font color="yellow">{forumrow.FORUM_NAME}</font></a><!-- ELSE --><font color="yellow">{L_FORUM}</font><!-- ENDIF --></dt>
                  <dd class="topics"><font color="yellow">{L_TOPICS}</font></dd>
                  <dd class="posts"><font color="yellow">{L_POSTS}</font></dd>
                        <!-- IF $MODERATOR_COLUMN_ON_INDEX == 'yes' and $SIDEBARS != 'both' -->
                           <dd class="moderators">{L_MODERATORS}</dd> 
                        <!-- ENDIF -->                     
                  <dd class="lastpost"><span><font color="yellow">{L_LAST_POST}</font></span></dd>
               </dl>
            </li>
         </ul>
            <!-- IF SCRIPT_NAME eq 'index' and $COLLAPSIBLE_CATEGORIES == 'on' --><div class="trigger active"></div><!-- ENDIF -->
            <div class="collapsethis">
         <ul class="topiclist forums">
   <!-- ENDIF -->

   <!-- IF not forumrow.S_IS_CAT -->
      <li class="row<!-- IF forumrow.S_ROW_COUNT is odd --> flbg1<!-- ELSE --> flbg2<!-- ENDIF -->">
         <dl class="icon" style="background-image: url({forumrow.FORUM_FOLDER_IMG_SRC}); background-repeat: no-repeat;">
            <dt title="{forumrow.FORUM_FOLDER_IMG_ALT}">
            <!-- IF S_ENABLE_FEEDS and forumrow.S_FEED_ENABLED --><!-- <a class="feed-icon-forum" title="{L_FEED} - {forumrow.FORUM_NAME}" href="{U_FEED}?f={forumrow.FORUM_ID}"><img src="{T_THEME_PATH}/images/feed.gif" alt="{L_FEED} - {forumrow.FORUM_NAME}" /></a> --><!-- ENDIF -->

               <!-- IF forumrow.FORUM_IMAGE --><span class="forum-image">{forumrow.FORUM_IMAGE}</span><!-- ENDIF -->
               <a href="{forumrow.U_VIEWFORUM}" class="forumtitle">{forumrow.FORUM_NAME}</a><br />
               {forumrow.FORUM_DESC}
               <!-- IF forumrow.MODERATORS and $MODERATOR_COLUMN_ON_INDEX == 'no' -->
                  <br /><strong>{forumrow.L_MODERATOR_STR}:</strong> {forumrow.MODERATORS}
               <!-- ENDIF -->
               <!-- IF forumrow.SUBFORUMS and forumrow.S_LIST_SUBFORUMS --><br /><strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}<!-- ENDIF -->
            </dt>
            <!-- IF forumrow.CLICKS -->
               <dd class="redirect"><span>{L_REDIRECTS}: {forumrow.CLICKS}</span></dd>
            <!-- ELSEIF not forumrow.S_IS_LINK -->
               <dd class="topics">{forumrow.TOPICS}<dfn>{L_TOPICS}</dfn></dd>
               <dd class="posts">{forumrow.POSTS} <dfn>{L_POSTS}</dfn></dd>
                    <!-- IF $MODERATOR_COLUMN_ON_INDEX == 'yes' and $SIDEBARS != 'both' -->
                  <dd class="moderators">
                           <span><!-- IF forumrow.MODERATORS -->{forumrow.MODERATORS}<!-- ELSE -->--<!-- ENDIF --></span>
                        </dd>
                    <!-- ENDIF -->                   
               <dd class="lastpost"><span>
                  <!-- IF forumrow.U_UNAPPROVED_TOPICS --><a href="{forumrow.U_UNAPPROVED_TOPICS}">{UNAPPROVED_IMG}</a><!-- ENDIF -->
                  <!-- IF forumrow.LAST_POST_TIME --><dfn>{L_LAST_POST}</dfn> {L_POST_BY_AUTHOR} {forumrow.LAST_POSTER_FULL}
                  <!-- IF not S_IS_BOT --><a href="{forumrow.U_LAST_POST}">{LAST_POST_IMG}</a> <!-- ENDIF --><br />{forumrow.LAST_POST_TIME}<!-- ELSE -->{L_NO_POSTS}<br />&nbsp;<!-- ENDIF --></span>
               </dd>                   
            <!-- ENDIF -->
         </dl>
      </li>
   <!-- ENDIF -->

   <!-- IF forumrow.S_LAST_ROW -->
         </ul>
         </div>
         <span class="corners-bottom"><span></span></span></div>
      </div>
   <!-- ENDIF -->

<!-- BEGINELSE -->
   <div class="panel">
      <div class="inner"><span class="corners-top"><span></span></span>
      <strong>{L_NO_FORUMS}</strong>
      <span class="corners-bottom"><span></span></span></div>
   </div>
<!-- END forumrow -->
</div>

<!-- IF $COLLAPSIBLE_CATEGORIES == 'on' -->
   <script type="text/javascript">
        $(".forumlist").collapse({show: function(){
                this.animate({
                    opacity: 'toggle',
                    height: 'toggle'
            }, 300);
            },
            hide : function() {
                   
                this.animate({
                    opacity: 'toggle',
                    height: 'toggle'
            }, 300);
            }
   
        });
</script>
<!-- ENDIF -->



-----------------------------------------------------------------------------------
common.css ..... phpbb3 .....
-----------------------------------------------------------------------------------

Code: Select all

.trigger {
    background: url("{T_THEME_PATH}/images/collapse-icon.png") no-repeat;
    width: 18px;
    height: 19px;
    cursor: pointer;
    float: right;
    position: relative;
    z-index: 9998;
    margin-top: -30px;
   margin-right: 5px;
}
.active {background-position: left top;}
.inactive {background-position: left bottom;}
}

Return to “phpBB 3.0.x "Olympus" discussion”

Who is online

Users browsing this forum: CommonCrawl [Bot] and 3 guests