Show/Hide Subforums

[ramesh_umk3]

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(startCo lorstr='#F9F9F9',endColorstr='#EAEAEA',GradientTyp e=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(startCo lorstr='#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 (http://www.mobilescommunity.com/)

Thanks All

[faisaly.com]

heres an attached image from the site.

[snakedevil]

Thanks !

Possible to exclude forum sections ? :)

[Macgiber]

good job friend, you would have to do to be centered under the subforum oh?

[ramesh_umk3]

Thanks !

Possible to exclude forum sections ? :)

Just go through VB Template Conditions you can apply it i think . Feel Free to try :)

Thanks

good job friend, you would have to do to be centered under the subforum oh?

Possible just add <center> above the code and </center> below the code it will work :)

Thanks

[Macgiber]

Thanks , ready.

[puertoblack2003]

nice setup looks like xda forum but the light version :D

[ramesh_umk3]

nice setup looks like xda forum but the light version :D

Yeah we have a low budget :D but we did and still doing our best with model :up:

[snakedevil]

Just go through VB Template Conditions you can apply it i think . Feel Free to try :)


Does not work :(

[tbworld]

Does not work :(

Please post something helpful, your response does not help the author or other users as you gave no details on your experience using it. At least indicate what version of vbulletin you were using and any errors you received from your browser and/or server logs. This helps the whole community. Thank you! :)

Most likely the JavaScript is not executing, check your browser for JavaScript errors.

[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

<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 (http://www.mobilescommunity.com/programming/). Just place comma after each forum id example below

<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]

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?

[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]

would be nice to have it in FORUMDISPLAY template too ;)

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

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....

https://vborg.vbsupport.ru/attachment.php?attachmentid=148995&stc=1&d=1399053032

Slightly confused here..:confused:

[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..