Add Hide/Show Button to Category Title Bar (See Library)

[john1960]

When clicked on hides the complete category from view except the title bar. Click again the full category content re-appears.

Put in 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>



You can adjust the "maxWidth" to meet your forum width settings.

Preview:

theridetest.freeforums.net/


Edit: This code works if you are using the plugin called V4 News Fader and will not allow Hide/show button on that category. If you are not using this plugin and want to have Hide/show button on the top category then refer to the last code I submitted.

[Tumbleweed]

Nice code john1960. Did you know on your preview site, the category doesn't have the hide/show (checked in Chrome & IE) and thus doesn't work? Because of that, I went and tested it on my test site and it works fine so not sure why it's not showing on your site. Just thought you'd want to know but this is a nice addition to headers/footer library.

[john1960]

May 12, 2016 20:06:04 GMT -8 Tumbleweed said:

Nice code john1960 . Did you know on your preview site, the category doesn't have the hide/show (checked in Chrome & IE) and thus doesn't work? Because of that, I went and tested it on my test site and it works fine so not sure why it's not showing on your site. Just thought you'd want to know but this is a nice addition to headers/footer library.

That's odd? I didn't think to check it in chrome but it worked fine for me on my test site in W10 and IE11? I also just checked it in Firefox and it worked great.

Thank you

[john1960]

May 12, 2016 21:04:06 GMT -8 Lynx said:

Just as a note, there is a Collapsible Category plugin for this. However, the plugin doesn't have any buttons on the title bar for show / hide - it just performs a toggle when clicked anywhere on the category's title bar. The plugin uses localStorage (as your code does), but just for guests - it uses a key for members.

No plugin or key needed for this code and I like the buttons as a visual reminder.

Thank You

[Tumbleweed]

May 13, 2016 9:20:22 GMT -8 john1960 said:

May 12, 2016 20:06:04 GMT -8 Tumbleweed said:

Nice code john1960 . Did you know on your preview site, the category doesn't have the hide/show (checked in Chrome & IE) and thus doesn't work? Because of that, I went and tested it on my test site and it works fine so not sure why it's not showing on your site. Just thought you'd want to know but this is a nice addition to headers/footer library.

That's odd? I didn't think to check it in chrome but it worked fine for me on my test site in W10 and IE11? I also just checked it in Firefox and it worked great.

Thank you

The hide/show works on the legend and info center but does not show, for me, on the category on your site. All I see on your site is the General category with no hide/show if that helps. Double checked again in Chrome, FF and IE and no go. As I said, I have your code on a test site and it works fine for my categories but something is stopping it from showing for me on your site and I'm not sure why but since you have that as a preview for members, thought maybe we can figure that out.



I decided to do some further testing and I have two sites where it isn't showing on the first category only. One I had a "General" category not showing/working with the hide/show but at some point I had aligned the text right so thought that was why it wasn't working so went on to a different site and now I have it not working on this site: putteraround5.proboards.com/ Just to be sure I didn't have anything wonky I was testing, I created a new theme, disabled the only plugin I had enabled and that is what you see there.

Does the first category hide/show work/show for you on that putteraround5 test site I posted?  It's weird how it doesn't work for me on your site but works on one site of mine perfectly but doesn't work on two other test sites of mine. Now this is bugging me. lol

[john1960]

May 13, 2016 16:15:16 GMT -8 Tumbleweed said:

May 13, 2016 9:20:22 GMT -8 john1960 said:

That's odd? I didn't think to check it in chrome but it worked fine for me on my test site in W10 and IE11? I also just checked it in Firefox and it worked great.

Thank you

The hide/show works on the legend and info center but does not show, for me, on the category on your site. All I see on your site is the General category with no hide/show if that helps. Double checked again in Chrome, FF and IE and no go. As I said, I have your code on a test site and it works fine for my categories but something is stopping it from showing for me on your site and I'm not sure why but since you have that as a preview for members, thought maybe we can figure that out.



I decided to do some further testing and I have two sites where it isn't showing on the first category only. One I had a "General" category not showing/working with the hide/show but at some point I had aligned the text right so thought that was why it wasn't working so went on to a different site and now I have it not working on this site: putteraround5.proboards.com/ Just to be sure I didn't have anything wonky I was testing, I created a new theme, disabled the only plugin I had enabled and that is what you see there.

Does the first category hide/show work/show for you on that putteraround5 test site I posted?  It's weird how it doesn't work for me on your site but works on one site of mine perfectly but doesn't work on two other test sites of mine. Now this is bugging me. lol

Extremely weird? No the Hide/show button doesn't show for me either on your site? But it does work here for me:

itistheride.boards.net/

It does not appear for me at all on your test site Category labeled The Picture Board. Wonder if this is a height issue?

[Tumbleweed]

May 13, 2016 22:19:41 GMT -8 john1960 said:

May 13, 2016 16:15:16 GMT -8 Tumbleweed said:

The hide/show works on the legend and info center but does not show, for me, on the category on your site. All I see on your site is the General category with no hide/show if that helps. Double checked again in Chrome, FF and IE and no go. As I said, I have your code on a test site and it works fine for my categories but something is stopping it from showing for me on your site and I'm not sure why but since you have that as a preview for members, thought maybe we can figure that out.



I decided to do some further testing and I have two sites where it isn't showing on the first category only. One I had a "General" category not showing/working with the hide/show but at some point I had aligned the text right so thought that was why it wasn't working so went on to a different site and now I have it not working on this site: putteraround5.proboards.com/ Just to be sure I didn't have anything wonky I was testing, I created a new theme, disabled the only plugin I had enabled and that is what you see there.

Does the first category hide/show work/show for you on that putteraround5 test site I posted?  It's weird how it doesn't work for me on your site but works on one site of mine perfectly but doesn't work on two other test sites of mine. Now this is bugging me. lol

Extremely weird? No the Hide/show button doesn't show for me either on your site? But it does work here for me:

itistheride.boards.net/

It does not appear for me at all on your test site Category labeled The Picture Board. Wonder if this is a height issue?

I don't think it is a height issue or all the categories wouldn't work. So far, it just seems to be the first category that doesn't work on some for whatever reason.

Oh and your code works perfect for me on the itistheride link you posted.  I'm not sure what is going on here but I'm not giving up on finding out why this is happening. And since it was working perfect on that site, went back to look at the original "preview" link you posted and your General Category remains the same, not working. I'll probably be trying to figure this out off and on later today. I remember having issues with first categories before but it's been so long ago I can't remember the exact circumstances or solution.

Edit, on that putteraround board, I moved the non-working "The Picture Board" category to come second. Now the one in first position, 'Sunshiney Day' isn't working as the first category. 

[john1960]

Had any luck on this Tumbleweed? I'm still working on it.

[Tumbleweed]

May 20, 2016 18:47:19 GMT -8 john1960 said:

Had any luck on this Tumbleweed ? I'm still working on it.

I never figured anything out on that. I am not a javascript code writer so since it is your code, you'd know more about that than me. I just went to my test site, the putteraround5 one and added a new category as the first category. Now Sunshiney Day is working but the new first one isn't. So I decided to hide the new first category I made and now Sunshiney Day isn't working. Tossed it on yet again another test site and it works fine on all cats and everything else, so I'm at a loss. If it didn't work on the first category of every site, that would be one thing but since it is a hit and miss, makes it hard to even know where to start to find the problem.

I'm not sure what to tell you but at least members who are interested can try it and if it works, great. If it does't work, then I don't know what to tell them.

[john1960]

May 20, 2016 20:17:15 GMT -8 Tumbleweed said:

May 20, 2016 18:47:19 GMT -8 john1960 said:

Had any luck on this Tumbleweed ? I'm still working on it.

I never figured anything out on that. I am not a javascript code writer so since it is your code, you'd know more about that than me. I just went to my test site, the putteraround5 one and added a new category as the first category. Now Sunshiney Day is working but the new first one isn't. So I decided to hide the new first category I made and now Sunshiney Day isn't working. Tossed it on yet again another test site and it works fine on all cats and everything else, so I'm at a loss. If it didn't work on the first category of every site, that would be one thing but since it is a hit and miss, makes it hard to even know where to start to find the problem.

I'm not sure what to tell you but at least members who are interested can try it and if it works, great. If it does't work, then I don't know what to tell them.

Well I remembered something that made the top category buttons disappear and it's because on the forums I use it on where it works correctly I use the plugin of the V4 News Header and I didn't want the Hide/Show buttons on that header so look at this line in the code and remove it:


if(!i){return true;}
Now this will give one a Hide/Show button on the top category but there is a new problem with it I have to solve? Look for yourself:

theridetest.freeforums.net/

Got to figure out how to line it up on the right side like the other buttons.

[Tumbleweed]

May 21, 2016 18:13:02 GMT -8 john1960 said:

May 20, 2016 20:17:15 GMT -8 Tumbleweed said:

I never figured anything out on that. I am not a javascript code writer so since it is your code, you'd know more about that than me. I just went to my test site, the putteraround5 one and added a new category as the first category. Now Sunshiney Day is working but the new first one isn't. So I decided to hide the new first category I made and now Sunshiney Day isn't working. Tossed it on yet again another test site and it works fine on all cats and everything else, so I'm at a loss. If it didn't work on the first category of every site, that would be one thing but since it is a hit and miss, makes it hard to even know where to start to find the problem.

I'm not sure what to tell you but at least members who are interested can try it and if it works, great. If it does't work, then I don't know what to tell them.

Well I remembered something that made the top category buttons disappear and it's because on the forums I use it on where it works correctly I use the plugin of the V4 News Header and I didn't want the Hide/Show buttons on that header so look at this line in the code and remove it:


if(!i){return true;}
Now this will give one a Hide/Show button on the top category but there is a new problem with it I have to solve? Look for yourself:

theridetest.freeforums.net/

Got to figure out how to line it up on the right side like the other buttons.

Awww, that fixed it. Told you I don't know javascript so it all looks like jibberish to me. Seems the problem I've run across is the title-wrapper doesn't go the full width across so I had to add css like: .title_wrapper{width:121%!important;}
But you also have that max width in there that is restraining it as well.

When I delete that bit ---- $ae.css({}).append('<span style="float: right; cursor: pointer;">Hide/Show</span>')---- it fixes it with the css I mentioned. Can't tell you how to proceed from here though or why the title wrapper does that.

But anyway, now on those test sites where it wasn't working, it's working.

[Lynx]

This line:


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


is setting your max-width to 880px, according to Inspect Element. Changing it to 100% moved it to the right like the rest of them. If you want to target it via CSS:


.container.boards > .title-bar > h2 > .title_wrapper {
  max-width: 100% !important;
}


[Tumbleweed]

May 21, 2016 20:23:21 GMT -8 Lynx said:

This line:


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


is setting your max-width to 880px, according to Inspect Element. Changing it to 100% moved it to the right like the rest of them. If you want to target it via CSS:


.container.boards > .title-bar > h2 > .title_wrapper {
  max-width: 100% !important;
}


That actually didn't work for me, neither of those options, MSG, changing the javascript to 100% or adding the css you posted. Changing the javascript to 100% sent the hide/show into never, never land but since I don't know javascript, maybe I didn't enter it right? 

I currently have the css you posted on my test site but added a white border to show where it ends. The theme on the test site is a clean slate. But thanks for jumping in to help because I suck at javascript and helping anyone with it.  putteraround5.proboards.com/

Edit. Viewing inspect source, the css you posted isn't working at all, actually, on my test site. Nevermind, now it shows 100% when viewing the source, but as you can see, it still isn't moving the hide/show.  But if I use what I posted in my previous thread, the 121%,  it does work. *Shrugs*.

[john1960]

Lynx Tumbleweed

I found out in general why it's acting like it is. The top category is like this and I'm presuming on the server side:

<div class="title-bar bbcode"><h2><div class="title_wrapper">General</div></h2></div>

While the rest of them are like this:

<div class="title-bar"><h2>Legend</h2></div>

They will not respond the same to this:

$ae.css({maxWidth: 880})

no matter what width you use. Where $ae represents either the h2 element or its .title_wrapper div child it did work out in the example I provided before.

New Code:


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


Problem solved:

theridetest.freeforums.net/

So if one doesn't have the plugin like I use on the top category then they need to use the last code. I'm going to put a edit note on the first code.

Thanks


Edit:  The above code will need the width adjusted according to your forum's width accordingly.

[Lynx]

Glad you got it solved, john1960. I'll just refrain from posting any more replies though - since it seems apparent I don't know what I'm talking about. ::shrug::