Grow your CSS skills. Land your dream job.

‘Load All’ removing html — help?

  • # June 28, 2013 at 8:43 pm

    Hi there,

    I have a “load all” script in jQuery. Inside this div, I have a bunch of headings, paragraphs, tables, basic HTML. The problem is, when you click on “load all”, that HTML is stripped. How do I make it so that the information is retained?

    You can see what I mean by going here:

    http://jsfiddle.net/D4sN8/

    Hmm… thoughts?

    # July 1, 2013 at 9:00 am

    http://jsfiddle.net/waylaid/3jVkw/

    Probably not the most elegant solution but I wanted to see if I could do it :P

    First you need to grap the **html** rather than _ text_ from .load-all otherwise it strips out all the html tags.

    Further down you’ll see I _append_ **’.morecontent’** because

    > var html = c + ‘‘ + h + ‘ ‘+moretext+’‘;

    causes some problem where it shortens only the first paragraph to 300 characters and then displays all the rest.

    My solution has a problem where the closing p tag is still used after 300 characters. To get around the paragraph space this would cause when displaying **’.morecontent’** I’ve targeted the first p tag to **display: inline**. For this example I also made the ‘.morelink’ display:block to drop it below the text.

    Edit: I changed the url above.

    # July 1, 2013 at 9:05 am

    I also changed this:

    > $(this).parent().prev().toggle();

    >$(this).prev().toggle();

    to:
    > $(this).parent().find(‘.morecontent span’).toggle();

    to get the toggle to work

    # July 11, 2013 at 5:17 pm

    Wow, thank you so much waylaid! You are wonderful :) Smart.

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".