Should be simple to the trained eye. Two thing... I would like to add a smooth animation to its open and close. And two can you see why it adds two characters to any given word it cuts short when it shows the remainder of the text? I can get around this error by using the exact character count to place the cut in a space. But that's sloppy.
I would just use expander plugin http://plugins.learningjquery.com/expander/ but when it shows more of the text it does it with inline-block so the remander of the text drops down on the next line as if a "br" was inserted. Maybe I was doing that wrong somehow. But could not see why. This would be a fine solution too as it has the smooth animation out of the gate but, as I said, drops it down to the next line. I played with many demos of this and they all seem to do it.
Ahh ya sorry. Your right it was this one http://viralpatel.net/blogs/demo/jquery/show-more-link-shortened-content/. Ya that last one seems to be close I guess. I'll play with it too. I would prefer the LESS link be positioned directly following the text and not below it though. But I guess that could do if nothing better is found.
I just scoured google again. There is only one other I could find and there is no animation and the links are just blocked below the text.
I fixed the odd character insertion, and animated the toggle for you . . . very simple additions, honestly. If I were you, I'd use the plugin version, as it's more easily modifiable and makes everything cleaner. Just modify the lines I've commented to get the effects I've added.
I ended up going with the expander plugin. Finally found out how to make it do what I wanted. here is the result. I.E. Top paragraph http://www.websitecodetutorials.com/
This demo here http://viralpatel.net/blogs/demo/jqu...tened-content/
Should be simple to the trained eye. Two thing... I would like to add a smooth animation to its open and close. And two can you see why it adds two characters to any given word it cuts short when it shows the remainder of the text? I can get around this error by using the exact character count to place the cut in a space. But that's sloppy.
I would just use expander plugin http://plugins.learningjquery.com/expander/ but when it shows more of the text it does it with inline-block so the remander of the text drops down on the next line as if a "br" was inserted. Maybe I was doing that wrong somehow. But could not see why. This would be a fine solution too as it has the smooth animation out of the gate but, as I said, drops it down to the next line. I played with many demos of this and they all seem to do it.
Thanks, Eric
Your links is broken, but am I right in guessing you mean this? http://viralpatel.net/blogs/demo/jquery/show-more-link-shortened-content/
Let me take a closer look and play around with it after dinner, and get back to you. It looks like the last demo on this page: http://plugins.learningjquery.com/expander/demo/index.html might be what you're after, though.
Ahh ya sorry. Your right it was this one http://viralpatel.net/blogs/demo/jquery/show-more-link-shortened-content/. Ya that last one seems to be close I guess. I'll play with it too. I would prefer the LESS link be positioned directly following the text and not below it though. But I guess that could do if nothing better is found.
I just scoured google again. There is only one other I could find and there is no animation and the links are just blocked below the text.
Thanks! Eric W
I suppose this would probably do: http://codepen.io/JoshBlackwood/pen/zgfcm
I fixed the odd character insertion, and animated the toggle for you . . . very simple additions, honestly. If I were you, I'd use the plugin version, as it's more easily modifiable and makes everything cleaner. Just modify the lines I've commented to get the effects I've added.
@JoshBlackwood awesome. Thank you very much. I will play with these and see what works best for me. Take care!
I ended up going with the expander plugin. Finally found out how to make it do what I wanted. here is the result. I.E. Top paragraph http://www.websitecodetutorials.com/