scriptygoddess

06 Jan, 2004

another revision to the show/hide script

Posted by: Jennifer In: Scripts

This is in reference to this post which included a link to a revised version of the show/hide (collapsing/expanding) script. That one was designed specifically for entries. Most people use this script for their comments to, so I made a slight change to it so that you can use ONE function that will work with both.

Here's the new function. I added a new, additional variable that needs to be passed to it: type. My changes to the first revision are in bold.

<script type="text/javascript">
function showHide(entryID, entryLink, htmlObj, type) {
if (type == "comments") {
extTextDivID = ('comText' + (entryID));
extLinkDivID = ('comLink' + (entryID));
} else {
extTextDivID = ('extText' + (entryID));
extLinkDivID = ('extLink' + (entryID));
}

if( document.getElementById ) {
if( document.getElementById(extTextDivID).style.display ) {
if( entryLink != 0 ) {
document.getElementById(extTextDivID).style.display = "block";
document.getElementById(extLinkDivID).style.display = "none";
htmlObj.blur();
} else {
document.getElementById(extTextDivID).style.display = "none";
document.getElementById(extLinkDivID).style.display = "block";
}
} else {
location.href = entryLink;
return true;
}
} else {
location.href = entryLink;
return true;
}
}
</script>

For the extended entries, the prefix "ext" is used for the name of the <div> – and when the javascript function is called, 'entry' is passed in. Basically this is the same as the first updated version, except now we pass in that extra value for type, which in this case is 'entry'.

<MTEntryIfExtended>
<div id="extLink<$MTEntryID$>">
<a href="<$MTEntryPermalink$>" name="ext<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,'<$MTEntryPermalink$>',this,'entry');return false;">Read More… ?</a>
</div>
<div id="extText<$MTEntryID$>" style="display: none">
<$MTEntryMore$>
<a href="#ext<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,0,this,'entry');return true;">? All done!</a>
</div>
</MTEntryIfExtended>

Then for the comments, I changed "ext" to "com" and for type: "comments":

<MTEntryIfAllowComments>
<div id="comLink<$MTEntryID$>">
<a href="<$MTEntryPermalink$>" name="com<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,'<$MTEntryPermalink$>',this,'comments');return false;">Show Comments (<$MTEntryCommentCount$>)</a> | <a href="<$MTEntryPermalink$>#comments">Add your comment</a>
</div>
<div id="comText<$MTEntryID$>" style="display: none">
<a href="#com<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,0,this,'comments');return true;">Hide Comments</a>
| <a href="<$MTEntryPermalink$>#comments">Add your comment</a>
<MTComments>
<$MTCommentBody$>
<p>Posted by <$MTCommentAuthorLink show_email="0"$> at <$MTCommentDate$></p><br>
</MTComments>
<a href="#com<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,0,this,'comments');return true;">Hide Comments</a> | <a href="<$MTEntryPermalink$>#comments">Add your comment</a>
</div>
</MTEntryIfAllowComments>

34 Responses to "another revision to the show/hide script"

1 | marc

January 7th, 2004 at 2:28 am

Avatar

Thanks Jennifer. I'll try to place this code later this evening.

2 | Kevin

January 7th, 2004 at 11:10 am

Avatar

Wow! It's simple enough for even me to understand! 😉

3 | iagofest

January 7th, 2004 at 2:03 pm

Avatar

Hi! Great site. I'm a bloggy beginner, so I was wondering if I could use the collapse/expand script for a Blogger weblog instead of MT. If so, what changes to I need to make? Please email me if you get a chance. Thanks.

4 | Jennifer

January 7th, 2004 at 2:44 pm

Avatar

I don't see why you couldn't – except that it's been about two years since I blogged using blogger – so I've completely forgotten the tags (or even what functionality it has available, for that matter).

5 | Phoenix

January 7th, 2004 at 6:54 pm

Avatar

OK, I posted of a problem with the show, hide script before. Seems that I cant use this with the old "Hide Anything" script from geekgrrl.

6 | Jennifer

January 7th, 2004 at 9:19 pm

Avatar

Phoenix – I know what I'm doing in my version of the show/hide anything – and it uses PHP – if the version you're using from geekgrrl is different, then I can't begin to guess the specifics without seeing the code.

The function in this current post would need to be modified to be used to show/hide anything. Looking at your source: <span id="varP1234"><a href="#my_favorite_blogs" onclick="showMore(1234,0,this);return false;">Favorite Blogs »</a><br /></span><div id="varXYZ1234" style="display: none">…I think, for a quick fix, put back the original "showMore" function you were using (prior to the fixed/revised code) – (Because you're not even calling the new one from that code anyway – and looking at your source, you're not defining any "showMore" function – which is why you're getting a javascript error when you click those side links)

7 | Jennifer

January 7th, 2004 at 9:23 pm

Avatar

I should clarify – your extended entries and comments are working fine with this new code – so just ADD the original function in (so you'll have TWO functions defined – the showHide function (you currently have there) and the old showMore function…

8 | Marc Brazeau

January 9th, 2004 at 12:06 am

Avatar

I used your prior version of expandable comments and I love the functionality, but it made my text bigger and somehow a little awkward.

Here is a page with expandable comments:

http://www.joehilldispatch.org

and here is one without:

http://www.joehilldispatch.org/smallaxe

Any thoughts?

9 | Marc Brazeau

January 9th, 2004 at 12:06 am

Avatar

I used your prior version of expandable comments and I love the functionality, but it made my text bigger and somehow a little awkward.

Here is a page with expandable comments:

http://www.joehilldispatch.org

and here is one without:

http://www.joehilldispatch.org/smallaxe

Any thoughts?

10 | Jennifer

January 9th, 2004 at 8:04 am

Avatar

Uhm… they look the same to me… what am I looking for? (I wonder if it's a browser issue? I'm using IE on Win2K – although just for kicks, I loaded it on Mozilla, and they still looked the same… Maybe email me a screenshot of what you're seeing… :
scripty AT scriptygoddess DOT com

11 | buckethead

January 22nd, 2004 at 10:07 pm

Avatar

Jennifer, is there a version of this hack for pMachine? I attempted to adapt it using the expand/collapse more functions for pMachine as a model, but my thumbfisted, hamfingered coding skills were not up to the task. Any help would be greatly appreciated.

12 | JJ

February 9th, 2004 at 10:26 pm

Avatar

I think your tags are misplaced. If comments are disallowed, users won't be able to post new comments, but they won't be able to see previous comments either. That's no fun; just because the topic's closed doesn't mean the comments should be, after all.

I suggest that users of your script move the tags to enclose the comments item or the tag that provides the comments popup.

This is something like what I do at my own blog, although I'm still getting my site set up. Everything's messy in the extreme. =)

Best wishes,
JJ

13 | JJ

February 9th, 2004 at 10:30 pm

Avatar

Silly me. I had a slip of the fingers there and some unparsed code slipped by. The above comment should read:

"I think your <MTEntryIfAllowComments> tags are misplaced…"

and

"… move the <MTEntryIfAllowComments> tags … or the <a> tags …"

I also forgot to thank you for a great script, too. So thanks. =)

14 | girl

February 17th, 2004 at 1:12 am

Avatar

Hi,

is this specifically for show/hide both comments and extended entry? cos i just want a show/hide for extended entry.. not including the comments, which will remain as a popup.

how do i modify the above to fit my needs?

15 | Chasmyn

February 18th, 2004 at 1:59 am

Avatar

I'm wondering (I'm new and know very little coding) – my blog is of course MT and I was looking for a show/hide script for my blogrolling in my sidebar? Can you tell me how I can customize this to make it so, as in this blog: http://www.fridayfishwrap.com/ ?

She has made it so her blogrolls are collapsable and I love that, it cleans up the place. I want to categorize my blogrolls but am unsure of how to do it thus far. Any help would be appreciated – I've been searching all night :)

16 | ktpupp

April 7th, 2004 at 11:14 pm

Avatar

I just added this script to my test blog to see how it works and I have one question/problem.

When you click the Hide Comments or All Done links, the page goes back to the same link rather than the top of the entry. It makes it kinda hard to follow since the entry you were actually reading is not visible, just the Show… links.

Is this behavior intentional or unavoidable?

What I would like it to do is return the viewer to the title of the entry rather than the links for the Ext Entry or Comments.

I'm hoping you'll have an answer for me as I know little to nothing about programming/writing scripts.

The test page where this is showing up is as follows: http://www.sumbler.com/blog/testing

It's not quite ready for prime time, but feel free to take a look at it! I appreciate any help and will of course give you bigtime credit when this new template/layout goes live!

-=kt=-

17 | ktpupp

April 19th, 2004 at 9:45 am

Avatar

I just noticed something else happening with this script, maybe I did something wrong?

On my main page, the "read more/all done" link only shows when there actually is an extended entry, as it should.

On my individual entry archive pages, the "read more" shows even when there isn't an entry. I can't see anything different in my template from one page to the other…

Anyone want to help me figure this out?

Main page: http://www.sumbler.com/blog/

An archive page (no ext entry but the link shows anyway: http://www.sumbler.com/blog/archives/000480.html

Thanks for any help!

-=kt=-

18 | Brian

April 22nd, 2004 at 6:58 pm

Avatar

Is it possible to apply this code to all comments at once. I'm trying to create a link on the side of my blog so that the display of all the comments on the main page can be turned off (for those that are just interested in what I have to say) or on (if you want to read the inline comments for each post)

I can't use javascript to refer to a div class, so I'm thinking i'm stuck. Any advice is appreciated.

19 | Jessi

May 11th, 2004 at 11:34 am

Avatar

Is there a way to set the comment authorlink to _blank so that the link opens in a new window? Something like ? Thanks for any help!

20 | Jessi

May 11th, 2004 at 11:36 am

Avatar

I mean something like: $ MTCommentAuthorLink $ _blank

22 | The Daily Post :: Weblog

January 11th, 2004 at 3:54 pm

Avatar

Show / Hide
Have implemented the show/hide script displayed at scriptygoddess. It was a quick design amendment to assist those members of the population who find overuse of extended entry extremely annoying. To view click the 'continue reading…' link as normal….

23 | Wizbang

January 14th, 2004 at 10:10 pm

Avatar

Mailbag – Comment Blocks
From the mailbag: I was wondering if you could tell me how you made your inline comments? The link you have from ScriptyGoddess has changed and shows it as expandable links. I like your style better, where each comment is…

24 | joatBlog

February 6th, 2004 at 10:44 pm

Avatar

Show/hide (JavaScript)
ScriptyGoddess has a new show/hide script….

25 | LissaKay, Too

February 8th, 2004 at 4:12 pm

Avatar

Show/Hide Comments and Extended Entry
I simply adore this script from scriptygoddess! I use the first version on my main blog site and I will probably change it over to this one soon. What does it do? Two things … (click the "There's More!" link…

26 | testing new layouts

April 7th, 2004 at 11:00 pm

Avatar

Thanks!
Super thanks to Scripty Goddess for the Inline Comments and Extended Entry script!!!…

27 | testing new layouts

April 8th, 2004 at 10:05 am

Avatar

Thanks!
Welcome to the new and improved Puppy Pile! (Yes, there are no puppies here, at least for now… But that's neither here nor there.) I've spent countless hours working on the layout and design for this page to give a…

28 | The Puppy Pile!

April 8th, 2004 at 12:42 pm

Avatar

Welcome and Thanks!
Welcome to the new and improved Puppy Pile! (Yes, there are no puppies here, at least for now… But that's neither here nor there.) I've spent countless hours working on the layout and design for this page to give it…

29 | pensamientos errantes

May 7th, 2004 at 6:52 pm

Avatar

AH All done
Well I've finally finished up work on my first skin. Click the link to be brought to the skins page, there you can check out the skin and choose it if you'd like. Been working hard on this for the…

30 | bookmarks

June 26th, 2004 at 12:42 pm

Avatar


show/hide script…

31 | Diary::Weblog

September 9th, 2004 at 7:52 am

Avatar

「続きを読む」のスクリプト
Winで某FireFoxを使用時に、追記部分の"show"・"hide"をしているMTのBlog(ウチもそう)では、"show"状態で、ホイールによるスクロールが効かなくなります。 そこで、下記"「続きを読む」のス…

32 | gigglechick.com

September 29th, 2004 at 12:10 pm

Avatar

piece by piece.
you can tell i'm not working today, eh? what, with the barrage of entries. anyway, i finally sat down and got the expanded entry and comments to work again… unfortunately…

33 | Dida Kutz

May 17th, 2005 at 3:27 pm

Avatar

This is a great little script, and exactly what client had asked for on their MT blog. However, I'm still in the process of fully understanding CSS and am wondering what id to edit to change left alignment of the READ MORE text. Also, am i correct in assuming that I use a wildcard somewhere? TIA

34 | Dida Kutz

June 7th, 2005 at 11:03 am

Avatar

Nix my last comment- alignment OK. However, I am having an awful time styling the header now for the entres. Seems like it would be easy. Just style

or syle h3[id]. But nooooooo. And i am posting for help on Meyer's CSS forum and still can't get a fix that works. Can anyone help me out? I know there must be a SUPER SIMPLE solution that I'm somehow reminding blind to. TIA! Site in question is http://www.omniquiti.com

Featured Sponsors

Genesis Framework for WordPress

Advertise Here


  • Scott: Just moved changed the site URL as WP's installed in a subfolder. Cookie clearance worked for me. Thanks!
  • Stephen Lareau: Hi great blog thanks. Just thought I would add that it helps to put target = like this:1-800-555-1212 and
  • Cord Blomquist: Jennifer, you may want to check out tp2wp.com, a new service my company just launched that converts TypePad and Movable Type export files into WordPre

About


Advertisements