XF 1.5 help setting up custom tabs for site feed

zoldos

Well-known member
I have setup custom tabs for my forum using the below code (it's all contained in PAGE_CONTAINER). It works great (the main tab for the forum display, and the second tab for the site news feed), but I can't get the news feed to display when the tab is selected/clicked. It always says "there is no feed to display" but if I click the displayed link, "View Older Feed", it then displays the current feed. How can I fix this? I'd like it display the feed as soon as the tab is clicked. Thanks!

Below is all the code for the mod:

Code:
<xen:if is="{$isIndexPage}">
<style>
.tabs-menu {
    height: 30px;
    float: left;
    clear: both;
}

.tabs-menu li {
    height: 30px;
    line-height: 30px;
    float: left;
    margin-right: 10px;
    background-color: #ccc;
    border-top: 1px solid #d4d4d1;
    border-right: 1px solid #d4d4d1;
    border-left: 1px solid #d4d4d1;
}

.tabs-menu li.current {
    position: relative;
    background-color: #fff;
    border-bottom: 1px solid #fff;
    z-index: 5;
}

.tabs-menu li a {
    padding: 10px;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none; 
}

.tabs-menu .current a {
    color: #2e7da3;
}

.tab {
    border: 1px solid #d4d4d1;
    background-color: #fff;
    float: left;
    margin-bottom: 20px;
    width: auto;
}

.tab-content {
 
    padding: 20px;
    display: none;
}

#tab-1 {
 display: block;  
}
</style>


<script>
$(document).ready(function() {
    $(".tabs-menu a").click(function(event) {
        event.preventDefault();
        $(this).parent().addClass("current");
        $(this).parent().siblings().removeClass("current");
        var tab = $(this).attr("href");
        $(".tab-content").not(tab).css("display", "none");
        $(tab).fadeIn();
    });
});
</script>
</xen:if>

Code:
<xen:if is="{$isIndexPage}">
                       
                       
                        <div id="tabs-container">
                           <ul class="tabs-menu">
                               <li class="current"><a href="#tab-1">Forum</a></li>
                               <li><a href="#tab-2">Site News Feed</a></li>
                               
                           </ul>
                            <div class="tab">
                                                 <div id="tab-1" class="tab-content">
                                                    {xen:raw $contents}
                                                 </div>
                                                 <div id="tab-2" class="tab-content">
                                                    <xen:include template="news_feed_page_global" />
                             </div>
                                                 </div>
                                               </div>

                        <xen:else />
                         {xen:raw $contents}
                        </xen:if>  
                        </xen:if>
 
Top Bottom