In page Tabs not displaying and working

[Garani]

I have an issue. I have written the templates as shown in several places, but I can't get in page TABS to be working as expected. XenPorta's tabs are working fine, as well as Xenforo's own. It is just mine that are not correctly displayed, like it is shown in this snapshot.


Has anyone got any idea of what could be wrong?

 

[Chris D]

One issue is you have two <ul tags with the same ID and on the first <ul element you're setting that ID > li as the target. That will no doubt confuse matters.

Remove the second <ul completely (or comment it out with <xen:comment>) and try again.

It's also worth noting that the second tab (the second <li element in the first <ul block) has display none set on it. Did you do that?

EDIT: Just noticed you've used the same ID in several HTML elements. The ID attribute should be completely unique and you shouldn't re-use the same ID on different elements. It's also worth noting that most elements probably don't need an ID. For styling purposes you should use classes.

 

[Garani]

Chris,
thanks for the reply. Some change, but still it isn't working. This is the template code I have shutoff all CSS, but when the FFXIV node gets rendered, it get a "display:none" style added.

<div class="section sectionMain">
   
<ul id="davincidigitalRoster" class="tabs mainTabs Tabs" data-panes="#davincidigitalRoster> li" data-history="on">
<li>
                <a href="{$requestPaths.requestUri}#gw2">Guild Wars 2</a>
</li>
<li>
                <a href="{$requestPaths.requestUri}#ffxiv">Final Fantazy XIV</a>
</li>
</ul>
<ul>
<li id="gw2" class="profileContent">
<ol class="section memberList">
    <xen:foreach loop="$rosterUserList.gw2" value="$user">
        <xen:include template="member_list_item">
            <xen:set var="$noOverlay">1</xen:set>
        </xen:include>
    </xen:foreach>
</ol>
</li>
<li id="ffxiv" class="profileContent">
<ol class="section memberList">
    <xen:foreach loop="$rosterUserList.ffxiv" value="$user">
        <xen:include template="member_list_item">
            <xen:set var="$noOverlay">1</xen:set>
        </xen:include>
    </xen:foreach>
</ol>
</li>
</ul>
</div>

 

[Bob]

you are missing the data pane ID on the 2nd UL tag

<ul id="davincidigitalRoster">

also, REMOVE or CHANGE the first UL's ID as it can't be the same as the pane ID

 

[Garani]

YES! That was the issues all along! The pane ID put in the first UL! I have been going around that error like a stupid monkey!