The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Need a little help editing this simple js?

  • # February 13, 2013 at 5:18 pm

    This demo here…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 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.


    # February 13, 2013 at 9:07 pm

    This reply has been reported for inappropriate content.

    Your links is broken, but am I right in guessing you mean this?

    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: might be what you’re after, though.

    # February 13, 2013 at 9:13 pm

    This reply has been reported for inappropriate content.

    Ahh ya sorry. Your right it was this one 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.

    Eric W

    # February 13, 2013 at 10:13 pm

    This reply has been reported for inappropriate content.

    I suppose this would probably do:

    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.

    # February 13, 2013 at 10:25 pm

    This reply has been reported for inappropriate content.

    @JoshBlackwood awesome. Thank you very much. I will play with these and see what works best for me. Take care!

    # February 14, 2013 at 8:04 am

    This reply has been reported for inappropriate content.

    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

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed