Blogger Comment Form Collapse-Expand - Help me out

I implemented this guide i found for the comment form on a small blogger blog i use to test stuff.

Basically it collapses the comment form and the user clicks it to expand it if they want to place a comment. But i encountered 2 problems.

One is that the widget won't work on posts that have one or more comments to them. It only works on posts with No comments.

The other is that when i view the blog in chrome the pager links (previous/newest/home) dissapear.

Here is the tutorial i used: http://www.mybloggertricks.com/2012/06/expandcollapse-blogger-comment-box-with.html

Here is my blog so you can see the difference. This post has comments, so open any other post on the blog to see how it looks on a post with no comments: http://testingtestingblogblognow.blogspot.com/2013/09/test-post-1.html

I did try to solve it myself, but failed.

If anyone can help me out it would be much appreciated. Thanks.

I think his site do not have the collapsible box for post already with comments too.
But you can achieve it by adding the same code around this line of code

<div id="commentsHolder">

Click to expand...

As for the pager links, it is because you lack of the following code

<div class="clear"></div>

Click to expand...

This line of code should be between

end of <div class="blog-posts hfeed">
and
start of <div id="blog-pager" class="blog-pager">

Thanks man, but it didn't work.

When i add the code around this line of code:

<div id="commentsHolder">

Click to expand...

What happens is that the comments and the comment form become included in the widget. So the comments and the comment form get expanded/collapsed as i click the button.

And in a way, that could be good. But what also happens is that when i click on "Reply" on Any comment, the comment form loads normally, but a new blank tab opens as well...

And about the pager links, well, that didn't work. I tried implementing it as you said, but it didn't work...

Thanks for trying anyway.

Sorry, I'm not sure about the commentsHolder part as I can't really test it.

But for the pager links, I would really think it will work.


You can edit the html through Chrome or Firefox and you will see that adding the line did work.

Eheeey thank you man... I did it!

Although, in the HTML it looked a bit differently than in your screenshot, here is where i had to put it:



Thanks a lot, couldn't have done it without you.

Ok, that's one down, one to go.

Actually, when i originally implemented this to my test blog i spent hours trying to make it work for posts that have comments on them, but failed...

I tried to find the part of code that affects ONLY the comment form, and wrap that with the code. But the closest i got to it was to wrap the comment form and the comments, or wrap the whole area from X Comment: down to the pager. Or i think i even managed to wrap the whole goddamn page in it.. But i didn't manage to do what i wanted, to wrap Only the comment form...

Anyway, thanks for the help man, i appreciate it...

If there's anything i can do for you, don't hesitate to PM me.

Well, actually there is an issue with the solution above.

While it does solve the positioning, it makes it so that every time the "Reply" button is clicked on any existing comment a new _blank tab opens...

As soon as i remove the <div class="clear"></div>, it stops happening...

I tried inserting <p></p>

I tried inserting <a></a>

Didn't work at all.....

HOORAAY... I tried <p class="clear"></p> and it worked, and a new tab Doesn't open when i click "Reply" on any comment.

Perfect...

Now, i tried doing the comment form again, but i couldn't get it to work... I managed to make it disappear entirely at one point though

Hahahahahaha I managed to wrap Every number of posts under a label for each label, on the sidebar... hahaha funny as fuck!!

I'll leave it like that for you to see, hilarious....

I think you got the expansion and collapse working, just that you put in the wrong place.

Look for the code

and wrap with the script given to something like


That's what I would try to do.
As said, you got it working, but just that you put in the wrong location.

See, that's the problem.

If i go to "Inspect Element" and look at the code, i can see the code you told me to wrap.

But if i open my blog's HTML and search for the code, it's nowhere to be found...

I don't understand it... I don't have that code in my HTML, but i can clearly see it if i Inspect Element...

I'm not a coder or anything, so my knowledge of all this is limited. Maybe some sort of Javascript or something is used which - when the page loads - creates that piece of code. So i should look for the javascript...

Anyway, thanks for your effort man..

I tried to search through my own blogger theme and I think it may be because the code you are looking for is located at the other widget.

There are different widgets in blogger theme.

Did you try to download them to your local?

To find the location of the code, this is what I will do
- go to each of the widget, copy and paste the entire code into a local file, 1 widget to 1 file
- then I'll use a search tool to search the content (try other search terms within the block of code as it's unlikely everything is in javascript)

hth

mypmmail said:

I tried to search through my own blogger theme and I think it may be because the code you are looking for is located at the other widget.

There are different widgets in blogger theme.

Did you try to download them to your local?

To find the location of the code, this is what I will do
- go to each of the widget, copy and paste the entire code into a local file, 1 widget to 1 file
- then I'll use a search tool to search the content (try other search terms within the block of code as it's unlikely everything is in javascript)

hth

Click to expand...

I may have misunderstood you, but when you search the HTML section it searches through the whole thing, so if it ain't there it ain't there...

Unless you meant to download the backup of the blog?

lol.. I think that this is a lost cause... Even the guys on stackoverflow ignored me on this one, and i know there's some insanely good programmers there...

Anyway, it's not that important anyway.. I've wasted enough time on this situation...

If somebody actualy knows the solution, i would be happy to hear it...

Thanks for taking an interest mypmmail