Toggling Comment Visibility
aka turning comments on/off using Javascript.
Code 1: Simple Toggle On/Off - Default On
<a href="javascript:;" onmousedown="var a=document.getElementById('comments'); if(a.style.display!='none'&&a.style.display!='block') {a.style.display='block';} if(a.style.display == 'none') { a.style.display = 'block'; } else if(a.style.display == 'block') { a.style.display = 'none'; }"> Toggle Comments </a>
<body onload="document.getElementById('comments').style.display='none';"></body><a href="javascript:;" onmousedown="var a=document.getElementById('comments'); if(a.style.display!='none'&&a.style.display!='block') {a.style.display='block';} if(a.style.display == 'none') { a.style.display = 'block'; } else if(a.style.display == 'block') { a.style.display = 'none'; }">Toggle Comments</a>
Code 3: Two-Button On/Off - Default On
<a href="javascript:;" onmousedown="document.getElementById('comments').style.display='none'; if(document.getElementById('comments').style.display == 'none'){ document.getElementById('comments').style.display = 'block'; } else if(document.getElementById('comments').style.display == 'block'){ document.getElementById('comments').style.display = 'none'; } ">Show comments</a> | <a href="javascript:;" onmousedown="document.getElementById('comments').style.display='block'; if(document.getElementById('comments').style.display == 'none'){ document.getElementById('comments').style.display = 'block'; } else if(document.getElementById('comments').style.display == 'block'){ document.getElementById('comments').style.display = 'none'; } ">Hide comments</a>
Code 4: Two-Button On/Off - Default Off
<a href="javascript:;" onmousedown="document.getElementById('comments').style.display='none'; if(document.getElementById('comments').style.display == 'none'){ document.getElementById('comments').style.display = 'block'; } else if(document.getElementById('comments').style.display == 'block'){ document.getElementById('comments').style.display = 'none'; } ">Show comments</a> | <a href="javascript:;" onmousedown="document.getElementById('comments').style.display='block'; if(document.getElementById('comments').style.display == 'none'){ document.getElementById('comments').style.display = 'block'; } else if(document.getElementById('comments').style.display == 'block'){ document.getElementById('comments').style.display = 'none'; } ">Hide comments</a> <style>#comments{display:none}</style>
Note: Unfortunately the on/off display state resets on each new comment page.
Credit goes to the wonderful
AlisonRobin and
GMSuerte who helped out a lot with this and did most of the coding, really.
Also credit to
Hraeth and
Nirvana for the main JS base.
Couldn't have done it without them. You rock.
One Button:
Try it!
Two Button:
Show comments | Hide comments
Test comment ~
This'll be fun! Thanks, you
maannn this is wicked cool
Thank you! I hope it'll come
This is absolutely cool! You
Groggy morning track. Was fun
Oh tracking ♥ ! Thank
Sig: Aihnna
Thank you!
Snazzyyyyy
Nice!! Thank you! c:
Avvie by Hadoukin
I adore this.
Thank you, Tuo and Kohva!
/thank you/
Oh my gosh this made my day.
Cool o3o
So for a long time I thought
onloadto work but then I talked to the wonderful GMSuerte (who is a totally awesome and wonderfully helpful dude as it turns out, I do not have enough good things to say about him, seriously) and he had a solution, which was to create a second body tag inside of the blog and use onload through it. That way you can use one JS function inonloadto assigndisplay:noneto the comments, and then you have the other function in the anchor tag asonmousedownto toggle visibility!<body onload="document.getElementById('comments').style.display='none';"></body><a href="javascript:;" onmousedown="if(document.getElementById('comments').style.display=='none'){document.getElementById('comments').style.display='block';}else if(document.getElementById('comments').style.display=='block'){document.getElementById('comments').style.display='none';}">CHANGE</a>Alison you and your friend
I just met the guy and asked,
EDIT: Still been reading up on more stuff and been learning to use variables more efficiently. Been going through my code and making things shorter where I can and did it with the stuff on this page too:
<a href="javascript:;" onmousedown="var a=document.getElementById('comments'); if(a.style.display!='none'&&a.style.display!='block') {a.style.display='block';} if(a.style.display == 'none') { a.style.display = 'block'; } else if(a.style.display == 'block') { a.style.display = 'none'; }">Toggle Comments</a>So I made the long part with the method just "a" so that instead of typing out the whole thing every time you can just write a.style.display etc. Almost cuts the simple page toggle code by half.
Sorry for the late reply
Track.. useful thing
Shelby