- Joined
- Jun 24, 2019
- Messages
- 141
- Points
- 53
Reputation:
Hi everyone, I have a question, I am currently using [XFA] Forum List Tabs 2.1.0 to split my forum sections, my result so far:
PC View:
Responsive:
The point is that the addon uses a lot of js and a library to serve Fontawesome (it doesn't make sense because xenforo have it by default) so I want to change for this other simpler addon: https://enxf.net/resources/j-forum-list-tabs.2888/
But I think it's TOO simple, I'm trying to make the responsive version only show the icons, any ideas?
my test enviroment:
The template code:
I think it could be done with this piece of code
PC View:
Responsive:
The point is that the addon uses a lot of js and a library to serve Fontawesome (it doesn't make sense because xenforo have it by default) so I want to change for this other simpler addon: https://enxf.net/resources/j-forum-list-tabs.2888/
But I think it's TOO simple, I'm trying to make the responsive version only show the icons, any ideas?
my test enviroment:
The template code:
PHP:
<xf:if is="$xf.options.j_fl_enable">
<xf:foreach loop="$xf.options.forumlist_tabs" value="$tab">
<xf:if is="$tab.id is not empty">
<xf:css>
.content{$tab.id}{
display:none;
}
input#tab{$tab.id} {
display: none;
}
#tab{$tab.id}:checked ~ .content{$tab.id} {
display: block !important;
padding: 20px 0 0;
}
</xf:css>
<input id="tab{$tab.id}" type="radio" name="tabs" <xf:if is="$xf.options.j_tab_default == $tab.id">checked</xf:if> >
<label for="tab{$tab.id}" class="button">{$tab.name|raw}</label>
</xf:if>
</xf:foreach>
<xf:js>
$("input[name='tabs']").change(function(){
var tabid = $('input[type=radio][name=tabs]:checked').attr('id');
XF.Cookie.set('tabid', tabid);
});
$(window).on('load', function()
{
var tabid = XF.Cookie.get('tabid');
var inputid = 'input[type=radio][name=tabs][id='+tabid+']';
$(inputid).prop("checked", true);
});
</xf:js>
<xf:css src="j_tabs_forum_list.less" />
</xf:if>
I think it could be done with this piece of code
PHP:
<input id="tab{$tab.id}" type="radio" name="tabs" <xf:if is="$xf.options.j_tab_default == $tab.id">checked</xf:if> ><label for="tab{$tab.id}" class="button">{$tab.name|raw}</label>