Question

here’s the example: http://jsbin.com/izegoy
problem: https://i.stack.imgur.com/XSHZR.png

script:

$(document).ready(function(){
    $("p:eq(1)").hide().after("<span>View more</span>");
    $("span").click(function(){
        $("p:eq(1)").slideToggle(200,function(){
            if($("span").text()=="View more"){
                $("span").text("View less");
        }   else{
                $("span").text("View more");
        }
        });
    });
});

html:

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>

When I update contents of the span tag, it creates the new text outside of the original span tag. It’s not noticeable on the page, but only when you look at the generated source code. I have no idea, what I do wrong.

Thank you for your time

Answer 1

That should really work fine. But you could try using the html(); method instead:

$("span").html("View less");