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

[ramesh_umk3]

Nope its still present see "Programming" Section

@Mr. Running give me your forum url so that i can check once

Regards,

[M.C.]

would be nice to have it in FORUMDISPLAY template too

[DemOnstar]

That's a good looking site you got there ramesh_umk3.

I particularly like the collapsible postbit. Is that a mod from here or one of your own?

[ramesh_umk3]

Originally Posted by M.C.

would be nice to have it in FORUMDISPLAY template too

Like what bro so that i can help you in doing it.

Originally Posted by DemOnstar

That's a good looking site you got there ramesh_umk3.

I particularly like the collapsible postbit. Is that a mod from here or one of your own?

Apply this modification code for postbit_legacy just small changes in CSS you will get what you see at our place bro ...

[DemOnstar]

I think you have me misunderstood kind sir..

I have applied the code above and see no changes. Perhaps this is because I have no sub forums to work with, I will create them tomorrow.

What I was referring to was this....



Slightly confused here..

[ramesh_umk3]

Yes brother i understood what you asked just little changes of the code which i provided here and you will get it

Example:

<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;">


POSTBIT_LEGACY CODE HERE


</div></div>

And change your desired value name in code

that's it

[DemOnstar]

Thanks for your patience old boy but I really have no idea what you are talking about.

<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;">


Particularly this POSTBIT_LEGACY CODE HERE


</div></div>

Never mind, it will all be ok in the end.....lol

[ramesh_umk3]

Just Paste your complete POSTBIT_LEGACY code here it would be simple now

[DemOnstar]

Cheers Mr umk_3, I will give that a go in the morning...

My head is full of numbers and symbols right now and drinking beer doesn't make it any easier..