Jennifer put together this awesome tutorial on how to show and hide the extended portion of an entry for MT. So I took that and adapted that to EE. It was not as bad as I thought. Here is the original post. I didn’t write this script, but I do understand it so if you need help implementing it on your site, let me know.
This doesn’t involve any back-end hacking due to ExpressionEngine’s use of Templates. (thank you guys!) Here’s what you’ll need to do. Just like Jennifer says, you can probably use this for anything. Actually Jules uses it for a bunch of stuff on her side bar. On to the tutorial.
This is the javascript i have set wherever I have a more/less option:
<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>
It’s exactly the same as Jennifer’s. Here’s what you’re going to have within your weblog/index Template:
{if extended != “”}
<div id=”extLink{entry_id}”>
<a href=”javascript:void(0);” name=”ext{entry_id}” onclick=”showHide({entry_id},’{permalink}’,this,’entry’);return false;”>Read More…</a>
</div>
<div id=”extText{entry_id}” style=”display: none”>
{extended}
<a href=”javascript:void(0);” onclick=”showHide({entry_id},0,this,’entry’);return true;”>Read Less…</a>
</div>
{/if}
And that’s basically it. I’ve confirmed this works in Opera, Safari, IE6, and Firefox, on Windows and Mac. :)
UPDATED: Sue was kind enough to let me know how to display the { and } signs in a post. :)
Loading ...
You’ve got smart quotes in the code, so it won’t work with copying and pasting. :)
I couldn’t get it to work on my site, but I did put in a secondary javascript for my PBase list. That’s working just fine.
I get a syntax error in ShowHide, there’s no id being put in like I see on your pages.
ah crud. there are some {} brackets in there i did not code. I’ll fix it real quick, so sorry!
Just one more thing. you are saving the entry in xhtml. that makes the single quote and double quotes show up incorrectly, and the function won’t work.
I fixed it on my end, and now it works.
I better change that as well. Whew! Thanks Sue. :cowtiny:
Thanks for placing this method in. I did put the javascript into a global variable so I can call it on any page with a single line addition.
It really makes for a marvelous addition to any content site, and it means that there is one less page to manage. (one doesn’t need a ‘more’ page this way.
Wow is this ee cool.
Yet another thanks to Yoshi! This is EXACTLY what I was looking for.
CJ – Thanks, that’s a great tip on making this a global variable.
I have this for both Comments and “More” on my MT site, but can’t get it to work with EE.
How do I add the comments variables?
Comments within entries is not supported by EE at this time. If you do find it, let me know. I’d like to do that myself.
Oh, Thanks. Shoot, I really liked that feature too.
Yeah it’s something I would like to have as well. I put in a feature request for it, but I think it’s pretty tough to implement. we shall see.
I know I am being dense here, but I cannot figure out where to put the javascript. In the head? or as a seperate file?
You can do it both ways. You can include it as a .js file or put it into the head of the page. they both should work just fine.
Thanks I got it working… I don’t really know much about javascript. I thought that some scripts had to be in the head and others in a file.
Ok. My brain must not be on today. I’m trying to implement this for my sidebar and I just cannot for the life of me figure it out!
Remember that each div you set up to be “hidden” must be a unique id, otherwise, clicking once could potentially open all! : ) what exactly is it doing? Is it live to see on your site?
Just to say I’ve added a link to this entry at my tutorial site:
http://www.leoandmeg.com/welcome/tutorial
If you have any other EE tutorials I could link to, I’d love to hear from you: how do you do the live preview for example?
You can find the live preview thing here
Can this be done up as a plugin? Hypothetically speaking of course. :-)
Well, you could, but CJ (above in comments) had a great idea by putting the javascript into a global variable. If this was made into a plugin, essentially the only thing being displayed would be the javascript. Keeping it in a global variable would essentially do the same thing really.
So yeah, it coud be, but….(imho) why?
Oh geez, I feel like a real idiot after reading all this.. I think I know where to put the first part (in the head).. but I’m lost on how to do the second part – could someone explain it in dummy-terms? LoL
The 2nd part goes where you would normally put your body portion in your weblog entries tag, in your template.
Have (somewhat) successfully implemented the show/hide script, so thanks, Yoshi for making this easy. Sorry about the length of this post…
<scriptyGoddess had posted (it’s #3 in his list of issues). He had this mouse wheel issue when expanding an entry; my glitch came with collapsing. I fixed it by adding the same “htmlObj.blur();” statement to the second “else” statement, thereby forcing the collapse link to give up focus.
<a href=”http://tweezersedge.com/archives/2003/11/000173.html”>http://tweezersedge.com/archives/2003/11/000173.html</a>
3) My third issue takes its lead from Tweezerman’s issue #4 (same link as above): he was able to make the browser jump back to the “read more” link when the “hide more” link is selected (as opposed to jumping back to the beginning of the post). (This is not browser-specific.) Since I’m new at all of this, does anyone know how can it be applied to EE? – Thanks
Note regarding my heavily nested div/css structure: In getting the dropshadow to work across browsers/platforms (Win/Mac only), the blog/sidebar content kept popping outside the “confines” of the dropshadow. The structure I’m using now seems to work, but if anyone has a simpler structure, I’d sure be open to it.
Have (somewhat) successfully implemented the show/hide script, so thanks, Yoshi for making this easy. Sorry about the length of this post…
<scriptyGoddess had posted (it’s #3 in his list of issues). He had this mouse wheel issue when expanding an entry; my glitch came with collapsing. I fixed it by adding the same “htmlObj.blur();” statement to the second “else” statement, thereby forcing the collapse link to give up focus.
<a href=”http://tweezersedge.com/archives/2003/11/000173.html”>http://tweezersedge.com/archives/2003/11/000173.html</a>
3) My third issue takes its lead from Tweezerman’s issue #4 (same link as above): he was able to make the browser jump back to the “read more” link when the “hide more” link is selected (as opposed to jumping back to the beginning of the post). (This is not browser-specific.) Since I’m new at all of this, does anyone know how can it be applied to EE? – Thanks
Note regarding my heavily nested div/css structure: In getting the dropshadow to work across browsers/platforms (Win/Mac only), the blog/sidebar content kept popping outside the “confines” of the dropshadow. The structure I’m using now seems to work, but if anyone has a simpler structure, I’d sure be open to it.
Have (somewhat) successfully implemented the show/hide script, so thanks, Yoshi for making this easy. Sorry about the length of this post…
http://dogskinreport.com/index2.php/weblog/index_rev/
http://dogskinreport.com/index2.php?weblog/weblog_css/
Nonetheless, I have a couple of glitches in Mozilla browsers (Win/Mac), the second of which I fixed, and I’d welcome feedback (please read note below):
1a) When “read more” link is selected, repeating background “dropshadow” contracts vertically. If you resize the browser window, it magically repairs itself.
1b) When expanding/collapsing several entries, the footer jumps up to the top-right of the page.
2) When collapsing the entry, the mouse wheel no longer scrolled the page. Tweezerman addressed this in his “clean-up” of what ScriptyGoddess had posted (it’s #3 in his list of issues). He had this mouse wheel issue when expanding an entry; my glitch came with collapsing. I fixed it by adding the same “htmlObj.blur();” statement to the second “else” statement, thereby forcing the collapse link to give up focus.
http://tweezersedge.com/archives/2003/11/000173.html
3) My third issue takes its lead from Tweezerman’s issue #4 (same link as above): he was able to make the browser jump back to the “read more” link when the “hide more” link is selected (as opposed to jumping back to the beginning of the post). (This is not browser-specific.) Since I’m new at all of this, does anyone know how can it be applied to EE? – Thanks
Note regarding my heavily nested div/css structure: In getting the dropshadow to work across browsers/platforms (Win/Mac only), the blog/sidebar content kept popping outside the “confines” of the dropshadow. The structure I’m using now seems to work, but if anyone has a simpler structure, I’d sure be open to it.
david. have you tried posting your issues in the pMachine Design forum? I’d imagine you’d get way more responses from there than here. I’m not sure what to tell you with those problems you’re having.
Will do. Thanks.
See my post at pMachine.
http://www.pmachine.com/forum/threads.php?id=17943_0_26_0_C
I easily took care of my issue #3.
THANKS – worked like a bomb.
Thanks!!!!
I tried this, and it almost works. For some reason, when I click “Read Less”, it opens a new window. Any thoughts?
OK, my first issue was easily fixed by adding a target=”_self”. but now my problem is that when you click “read less”, the entry contracts, but the browser keeps you down at the bottom where the extended text used to be.
Rick, see Useful Tweak #3 here:
http://www.pmachine.com/forum/threads.php?id=17943_0_26_0_C
Essentially, this creates a bookmark for your browser to return to when you click “read less.”
Just Posted about this on my site… Did a couple of tweaks to the code.
Thanks for the impetus
DJ
Im in the process of translating my MT blog into an EE one. I’ve installed this code, and the read more/read less link works fine, but since installing the code, my CSS no longer works. Did this happen to anyone else?
ack. never mind.
Nice work on the show/hide script. I have tried unsuccefully to use a graphic rather than the “Read more..”, etc.
Is this possible?
Works great, thanks. 2 minutes of setup time!
What about search engines, are the robots able to index the text in “Read more…” or is it better to feed them via a site map?
Is there any workaround, if a visitor has javascript in the browser disabled?
Maybe to jump directly to the “comment-page”?
awesome script thanks so much :)
Just wanted to say thanks for the see more/see less script for use in EE. I have it set up to work in mine. Very nice, and clean Thanks!!
SMagee
Any idea on how I could use this to show/hide the main body of an entry, as opposed to the extended text?
Thanks in Advance…
thanks so much! this seems to have worked perfectcly for my extended entries on my main page. THANK YOU!
Thaks for the tutorial! =)
Just want to ask what’s the best way to hide and show a bunch of stuff at the same time.