Mini Mods - Show/Hide Subforums

Show/Hide Subforums & Save Page Load Time...!

Hello All,
Hope this mod is not present already and this mod will be useful to save page load time for busy/huge forums like ours.

Lets Start

GOTO --> Style Manager --> forumhome_forumbit_level1_post

Find:

{vb:raw forum.subforums}

Replace:

<div class="divspoiler">
<input type="button" class="mc" value="→ MORE SUBFORUMS" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; this.value = '↑ HIDE SUBFORUMS'; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none'; this.value = '↓ SHOW SUBFORUMS'; }" />
</div><div><div class="spoiler" style="display: none;">
                        
<div style="padding:1px;">{vb:raw forum.subforums}</div>

</div></div>

Button Style CSS: [Add below code any were in additional.css template]

.mc {
display: inline-block;
margin-top: 8px;
background: #f9f9f9;
background: -moz-linear-gradient(top,#f9f9f9 0,#eaeaea 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#f9f9f9),color-stop(100%,#eaeaea));
background: -webkit-linear-gradient(top,#f9f9f9 0,#eaeaea 100%);
background: -o-linear-gradient(top,#f9f9f9 0,#eaeaea 100%);
background: -ms-linear-gradient(top,#f9f9f9 0,#eaeaea 100%);
background: linear-gradient(top,#f9f9f9 0,#eaeaea 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F9F9F9',endColorstr='#EAEAEA',GradientType=0);
height: auto;
border: 1px solid #cacaca;
border-radius: 3px;
padding: 7px;
text-align: left;
line-height: 23px;
box-shadow: inset 0 1px 2px white,0px 1px 1px rgba(0,0,0,0.12);
padding-left: 9px;
font-weight: bold;
text-transform: uppercase;
color: #6f6f6f;
text-shadow: 0 1px white;
margin-top: 10px;
cursor:pointer;
     -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}

.mc:hover {
    background: #fefefe;
    background: -moz-linear-gradient(top, #fefefe 0, #fbfbfb 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefefe), color-stop(100%, #fbfbfb));
    background: -webkit-linear-gradient(top, #fefefe 0, #fbfbfb 100%);
    background: -o-linear-gradient(top, #fefefe 0, #fbfbfb 100%);
    background: -ms-linear-gradient(top, #fefefe 0, #fbfbfb 100%);
    background: linear-gradient(top, #fefefe 0, #fbfbfb 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FEFEFE', endColorstr='#FBFBFB', GradientType=0);
}
.mc:active {
    box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.40), 0px 1px 1px rgba(0, 0, 0, 0.12);
}

Also follow same procedure in forumhome_forumbit_level2_post template

LIVE DEMO

Thanks All

[faisaly.com]

This works great using vb4.2.0

no problems at all!

[Leifer]

Works on 4.2.1 too
Thanks a lot

[mohammed146]

good work

[mikez006]

anyway to make this work on certain forums only?

[ramesh_umk3]

Yes possible just use if - else it will work below is example and demo

PHP Code:

<vb:if condition="in_array($forum['forumid'], array(9))">
<div class="divspoiler">
<input type="button" class="spb" value="→ MORE SUBFORUMS" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; this.value = '↑ HIDE SUBFORUMS'; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none'; this.value = '↓ SHOW SUBFORUMS'; }" />
</div><div><div class="spoiler" style="display: none;">             
<div style="padding:1px;">{vb:raw forum.subforums}</div>
</div></div>

<vb:else />

{vb:raw forum.subforums}
</vb:if> 


were 9 is my forum id for Programming. Just place comma after each forum id example below

PHP Code:

<vb:if condition="in_array($forum['forumid'], array(9,11,105,200))"> 


Regards,

[Mr_Running]

Excellent One thing I did notice: If there is no Forum Description entered the Button locates it self to the right but if there is a Description the button will stay under the Description.

Trying to figure out...How to keep the button under Forum Title without the forum Description?

[mikez006]

perfect, thanks

[ramesh_umk3]

Originally Posted by Mr_Running

Excellent One thing I did notice: If there is no Forum Description entered the Button locates it self to the right but if there is a Description the button will stay under the Description.

Trying to figure out...How to keep the button under Forum Title without the forum Description?

search and move below code in the mod which i released at 1st post

<vb:if condition="$show['forumdescription']"><p class="forumdescription">{vb:raw forum.description}</p></vb:if>

but that is not a proper style show description to users always so that they will find useful with subforums links...

[Mr_Running]

I could be wrong but I believe the code would add a forum description?

Here is an image of what it looks like when there is No forum description...

[Mr_Running]

Show/Hide Subforums buttons removed from Demo site?