Button to hide a content and keep decision saved

[Shinobi]

I want something as the Shoutbox hide button that hides that chat and keeps the chat hidden until the user presses show chat again, I want the same but to hide content from headers.

[Shinobi]

Bump

[Shinobi]

bump

[Tumbleweed]

Apr 29, 2015 14:27:54 GMT -8 Shinobi said:

I want something as the Shoutbox hide button that hides that chat and keeps the chat hidden until the user presses show chat again, I want the same but to hide content from headers.

I'm giving you an old code that remembers (stores cookies) if you have the shoutbox open or closed and I'm not sure where I got it from, could be Dynamic Drive but I suspect it was a code either Todge or Jordan posted a long time ago (pre-V5) for our usage and it still works as I just tested it. Keep in mind it won't remember if you have your browser set to delete cookies when you close your browser or just delete your cookies)

First enable your shoutbox if you haven't already. Next go to your wrapper template:

Admin> Themes> Layout Templates>Forum Wrapper and scroll down to where you see this: $[shoutbox]

Put the red around it like so:

<div onclick="toggle('welc_tab');" id="tab">Hide/show</div>
<div id="welc_tab" class="tab_cont">
$[shoutbox]
</div>

And then right below it add this javascript:

<script>              
var cookie_data = document.cookie.split(";");

for(a = 0; a < cookie_data.length; a++){
     if(cookie_data[a].match(new RegExp("id:(.+?)=0($|;)","i"))){
           if(document.getElementById(RegExp.$1))
                 document.getElementById(RegExp.$1).style.display = "none";
     }
}

function toggle(_id){

     var obj = document.getElementById(_id);

     if(obj.style.display == ""){
           obj.style.display = "none";
           document.cookie = "id:" + _id + "=0;expires=Sat, 20 Jan 3000 12:12:12 UTC; path=/;";
     } else {
           obj.style.display = "";
           document.cookie = "id:" + _id + "=0;expires=Sat, 20 Jan 2000 12:12:12 UTC; path=/;";
     }
}
               </script>

And then you can add this above the red html div's to style your hide/show button and once you get it styled the way you want you can either leave the css there or you can move the css to your style sheet minus the <style> and </style> tags, of course.

<style>
#tab{
position: relative;
margin:auto;
width:100px;
backgound-color: #ddbbdd;
border: 1px solid red;
text-align:center;
}
</style>

 

[Shinobi]

Awesome Tumbleweed it totally worked