Collapsible Info Center with Remember

[aRMY83]

Hello again Bennett 🚀

It did not work and this is the mod I did:

<script type="text/javascript">
$(document).ready(function(){
var info = false;
if(window.localStorage["center-close"] && window.localStorage["center-close"] == "true"){
$(".quick-reply .content").hide();
var info = true;
}
$(".quick-reply .title-bar").click(function(){
$(".quick-reply .content").animate({ height:"toggle" }, 1000, "easeOutQuad");
if(info){
info = false;
window.localStorage["center-close"] = "false";
} else {
window.localStorage["center-close"] = "true";
info = true;
}
});
});
</script>


and this is the mod to the Layout Templates > Thread > Quick Reply:

<h2>Post Quick Reply <span style="float: left; "><font size="1">Hide/Show</font></span></h2>

[Bennett 🚀]

Jan 13, 2014 19:15:58 GMT -8 aRMY83 said:

Hello again Bennett 🚀

It did not work and this is the mod I did:

<script type="text/javascript">
$(document).ready(function(){
var info = false;
if(window.localStorage["center-close"] && window.localStorage["center-close"] == "true"){
$(".quick-reply .content").hide();
var info = true;
}
$(".quick-reply .title-bar").click(function(){
$(".quick-reply .content").animate({ height:"toggle" }, 1000, "easeOutQuad");
if(info){
info = false;
window.localStorage["center-close"] = "false";
} else {
window.localStorage["center-close"] = "true";
info = true;
}
});
});
</script>


and this is the mod to the Layout Templates > Thread > Quick Reply:

<h2>Post Quick Reply <span style="float: left; "><font size="1">Hide/Show</font></span></h2>

Primarily because you're supposed to just click the whole header. To add your little hide-show thing, add a class="hide-quick-reply" to the span and use the following code:


<script type="text/javascript">

$(document).ready(function(){

var info = false;

if(window.localStorage["center-close"] && window.localStorage["center-close"] == "true"){

$(".quick-reply .content").hide();

var info = true;

}

$(".hide-quick-reply").click(function(){

$(".quick-reply .content").animate({ height:"toggle" }, 1000, "easeOutQuad");

if(info){

info = false;

window.localStorage["center-close"] = "false";

} else {

window.localStorage["center-close"] = "true";

info = true;

}

});

});

</script>

[aRMY83]

Hello Bennett 🚀

Sorry for the late response, but our IP went down last night and could not get back here to reply.

Anyways... I placed and or inserted this:

<span class="hide-quick-reply" style="float: left; ">Hide/Show</span>

in every possible area of the code below, and it would not work.

<div class="container quick-reply">
<div class="title-bar">
<ul class="controls">
<li style="display: inline-block; padding-right: 4px;"><a onclick="scroll(0,0);">Back to Top</a></li>
{if $[reply_button]}<li style="display: inline-block;">$[reply_button]</li>{/if}
</ul>
<h2>Post Quick Reply</h2>
</div>
<div class="content cap-bottom">
$[form.header]
           {if $[form.created_by_guest_name.input]}
<div class="guest_name">
<label>Guest Name:</label>
$[form.created_by_guest_name.input]
</div>
{/if}
<div class="message">
$[form.message.input]
</div>
$[captcha]
$[form.post.button]
$[form.footer]
</div>
</div>

I'm quite sure that there is something I'm doing wrong or just can't put hand on what could be causing it not to work.

[Bennett 🚀]

Jan 14, 2014 4:36:00 GMT -8 aRMY83 said:

Hello Bennett 🚀

Sorry for the late response, but our IP went down last night and could not get back here to reply.

Anyways... I placed and or inserted this:

<span class="hide-quick-reply" style="float: left; ">Hide/Show</span>

in every possible area of the code below, and it would not work.

<div class="container quick-reply">
<div class="title-bar">
<ul class="controls">
<li style="display: inline-block; padding-right: 4px;"><a onclick="scroll(0,0);">Back to Top</a></li>
{if $[reply_button]}<li style="display: inline-block;">$[reply_button]</li>{/if}
</ul>
<h2>Post Quick Reply</h2>
</div>
<div class="content cap-bottom">
$[form.header]
           {if $[form.created_by_guest_name.input]}
<div class="guest_name">
<label>Guest Name:</label>
$[form.created_by_guest_name.input]
</div>
{/if}
<div class="message">
$[form.message.input]
</div>
$[captcha]
$[form.post.button]
$[form.footer]
</div>
</div>

I'm quite sure that there is something I'm doing wrong or just can't put hand on what could be causing it not to work.

It should go to the right of the <h2>Post Quick Reply</h2>

[aRMY83]

I already tried that early this morning with a no go. Just for you info, I still have it there:

<div class="container quick-reply">
   <div class="title-bar">
<ul class="controls">
<li style="display: inline-block; padding-right: 4px;"><a onclick="scroll(0,0);">Back to Top</a></li>
{if $[reply_button]}<li style="display: inline-block;">$[reply_button]</li>{/if}
</ul>
<h2>Post Quick Reply</h2><span class="hide-quick-reply" style="float: center;">Hide/Show</span>
</div>
<div class="content cap-bottom">
$[form.header]
           {if $[form.created_by_guest_name.input]}
<div class="guest_name">
<label>Guest Name:</label>
$[form.created_by_guest_name.input]
</div>
{/if}
<div class="message">
$[form.message.input]
</div>
$[captcha]
$[form.post.button]
$[form.footer]
</div>
</div>

[Bennett 🚀]

Jan 14, 2014 13:06:45 GMT -8 aRMY83 said:

I already tried that early this morning with a no go. Just for you info, I still have it there:

<div class="container quick-reply">
   <div class="title-bar">
<ul class="controls">
<li style="display: inline-block; padding-right: 4px;"><a onclick="scroll(0,0);">Back to Top</a></li>
{if $[reply_button]}<li style="display: inline-block;">$[reply_button]</li>{/if}
</ul>
<h2>Post Quick Reply</h2><span class="hide-quick-reply" style="float: center;">Hide/Show</span>
</div>
<div class="content cap-bottom">
$[form.header]
           {if $[form.created_by_guest_name.input]}
<div class="guest_name">
<label>Guest Name:</label>
$[form.created_by_guest_name.input]
</div>
{/if}
<div class="message">
$[form.message.input]
</div>
$[captcha]
$[form.post.button]
$[form.footer]
</div>
</div>

Where are you putting the code I provided?
What is your forum url?

[aRMY83]

The code is in the main footer and right now, I working with it on my test site:

link

[aRMY83]

Hello Bennett 🚀

I have decided to delete my code input w/images within this thread and to find a more suitable way for collapsing the quick reply. Then again, I just may leave the quick reply as it is.

Thanks for your valued input and greatly appreciated.

[Deleted]

Mar 3, 2013 16:28:57 GMT -8 Bennett 🚀 said:

Main Footer

pastebin.com/7SMXQjUM
(PB screws this up in the code tags..)

Will close your info center and remember it until you click to show it again!
In use here.

hello

could you tell me where i put these codes please ?