Add Hide/Show Collapsable Category Button on Title Bar

[john1960]

This code puts a Hide/Show button on your Category Title bar that when clicked will make the Category threads/posts disappear. When re-clicked the category threads/posts will re-appear. Really good to use when the forum is long and has lots' of categories and you don't use some of them.


Put this in the Main Footer:


<script>

jQuery(function($){

var info = {};

$(".title-bar").each(function(i, v){

var $c = $(".content", $(v).parent()), ts = "title-bar" + i,

$ae = ($ae = $('h2 .title_wrapper', v)).length? $ae : $('h2', v);

if(window.localStorage[ts] && window.localStorage[ts] === "true"){

$c.hide();

info[ts] = true;

}

i && $ae.css({maxWidth: 880});

$ae.append('<span style="float: right; cursor: pointer;">Hide/Show</span>').

click(function(){

$c.animate({ height:"toggle" }, 1000, "easeOutQuad");

if(info[ts]){

info[ts] = false;

window.localStorage[ts] = "false";

} else {

window.localStorage[ts] = "true";

info[ts] = true;

}

});

});

});

</script>


Now to make the buttons line up properly one has to set the

i && $ae.css({maxWidth: 880});

to match their forums width. If your forum is 1200px wide then set the code at the same width.



Preview:   theridetest.freeforums.net/




Now for those who use the plugin called V4 News Fader you will need to use the following code that keeps the Hide/Show button from appearing on the News Fader title bar, in fact if you didn't want the Hide/Show button on your top category title bar you would still use this code and again put it in the

Main Footer 



<script>

jQuery(function($){

var info = {};

$(".title-bar").each(function(i, v){

if(!i){return true;}

var $c = $(".content", $(v).parent()), ts = "title-bar" + i,

$ae = ($ae = $('h2 .title_wrapper', v)).length? $ae : $('h2', v);

if(window.localStorage[ts] && window.localStorage[ts] === "true"){

$c.hide();

info[ts] = true;

}

$ae.css({maxWidth: 880}).append('<span style="float: right; cursor: pointer;">Hide/Show</span>').

click(function(){

$c.animate({ height:"toggle" }, 1000, "easeOutQuad");

if(info[ts]){

info[ts] = false;

window.localStorage[ts] = "false";

} else {

window.localStorage[ts] = "true";

info[ts] = true;

}

});

});

});

</script>


Again the same thing applies here as far as width settings.

Preview:   itistheride.boards.net/

[Former Member]

neat

[♥ ℒʊ√ ♥]

john1960 , I just saw this. It's great!


I had to tweak a bit so it didn't appear on my sidebar Title Bars or the Info Center, but otherwise, perfect. 

[underachieved4now]

Can you change the speed of hide/show?

[Tumbleweed]

Sept 16, 2016 14:26:51 GMT -8 underachieved4now said:

Can you change the speed of hide/show?

Since John hasn't been online in a while I hope he won't mind my helping you with his code but then of course he could have it bookmarked to send him a email. If so, sorry John for stepping in. Find this line in the code and change the 1000 to a lower number:

$c.animate({ height:"toggle" }, 1000, "easeOutQuad");

[morriganwoolf]

Would it be possible to have the code ignore certain categories? Sorry if this is a silly question.

[Alan Vende]

I would like to use something like this for my custom pages that I'm coding straight from the HTML tab. Is there a way that this code could be adapted to accomplish this?

Thanks!

[Tanya]

Is there a way to either make the 'hide/show' transparent or at least put an image in its place like   ??

[Tumbleweed]

May 20, 2017 23:16:19 GMT -8 Tanya said:

Is there a way to either make the 'hide/show' transparent or at least put an image in its place like   ??

To add an image find this line in the code and replace the red with an image....

$ae.css({maxWidth: 880}).append('<span style="float: right; cursor: pointer;">Hide/Show</span>').

So it looks like this:

$ae.css({maxWidth: 1000}).append('<div style="float:right; cursor: pointer;"><img src="http://image.png"></div>').

To give the text opacity add the blue below:

$ae.css({maxWidth: 1000}).append('<span style="float:right;opacity:0.3; cursor: pointer;">Hide/Show</span>').

0.9 would be nearly opague while 0.1 would be nearly totally transparent. If you want the Hide and show totally gone, just remove the text above bolded.

I do have to say, when I added images, they did not want to line up right so I had to do a lot of css tweaking but it's a test site so it might be my own fault since I change things all the time.  Let us (John hasn't been on ProBoards for a while so doubt he'll see this.) know if you have any issues. 

[Tanya]

I did go ahead and add the plugins that do the same thing but I was trying to stick to this route because I am trying to learn. Thank you Tumbleweed. I'll let you all know how it goes for me using my own testboard that has all the same themes as my forum. If I ever learn to detail a theme, this might not work at all. Anyway, I'll have results tomorrow at some point so everyone knows.

[Tumbleweed]

May 21, 2017 14:03:55 GMT -8 Tanya said:

I did go ahead and add the plugins that do the same thing but I was trying to stick to this route because I am trying to learn. Thank you Tumbleweed . I'll let you all know how it goes for me using my own testboard that has all the same themes as my forum. If I ever learn to detail a theme, this might not work at all. Anyway, I'll have results tomorrow at some point so everyone knows.

When V6 comes out (no date when that will be), headers and footers, as we know them, will be gone. So probably the better route is the plugin. But I still use headers and footers once in a while. If you can learn from it, that's a good thing.

[Tanya]

May 21, 2017 16:01:52 GMT -8 Tumbleweed said:

May 21, 2017 14:03:55 GMT -8 Tanya said:

I did go ahead and add the plugins that do the same thing but I was trying to stick to this route because I am trying to learn. Thank you Tumbleweed . I'll let you all know how it goes for me using my own testboard that has all the same themes as my forum. If I ever learn to detail a theme, this might not work at all. Anyway, I'll have results tomorrow at some point so everyone knows.

When V6 comes out (no date when that will be), headers and footers, as we know them, will be gone. So probably the better route is the plugin. But I still use headers and footers once in a while. If you can learn from it, that's a good thing.

haha, I know but.... 'until then..'

I went ahead and put in the three options, one at a time of course (though the first two together looked interesting)
Added in the image and got this: 

Made it opaque and got this: 

Made it transparent and got this: 

First two are not lined up at all. Last one looks good but I ran into a snag. The Legend and Forum Information & Statistics refused to open. They stayed stuck shut. The opaque idea is a nice one. I'll remember it for future use. 
You are not the only one who struggled with lining them up. 

[Tumbleweed]

Tanya , Not sure why your Legend and Info Center didn't work. Mine did but they were misaligned too. Probably better to stick with the the plugin.