jquery slide toggle without line break

Question

I'm looking for a slide-toggle jQuery for my Joomla! website that will work as in this example: I want my article to start with the beginning of a sentence and then a (read-more). Clicking on the (read-more) will hide the (read-more) and display the end of the sentence (without line-break, or even space). And at the end of the full sentence, a "close" link.

For my try, I used a trick to get around the problem but it's not working (when I click on the "beginning of the sentence" instead of the "(...)" the toogle hide all the content of my joomla article (even so it's working here)

HTML :

<ul id="containertoggle">
    <li><a class="opener" style="text-decoration: none;"> <span style="color: #585858;">This is the begining of the sentence </span>(...)</a>
        <div style="display: none;">
            <p>This is the beginning of the sentence and this is the end of the sentence </p>
        </div></li>
    <li><a class="opener" style="text-decoration: none;"> <span style="color: #585858;">This is the begining of the sentence </span>(...)</a>
        <div style="display: none;">
            <p>This is the beginning of the sentence and this is the end of the sentence </p>
        </div></li></ul>

QUERY

var $j = jQuery.noConflict();
$j(function () {
$j('#containertoggle').on('click', 'a.opener', function () {
     $j(this).next().toggle('slow').find('p').append('<span>[close]</span>');
     $j(this).hide();
 });
 $j('#containertoggle').on('click', 'span', function () {
     $j(this).closest('div').toggle('slow').closest('li').find('a').show();
     $j(this).remove();
 });
});

Answer 1

You can try this script It is simple very basic script may be helpful to you.

  jsfiddle.net/nZyXJ/

Answer 2

The fiddle from Steve above is one that I used, until I found that the text was being cut off in a very strange way. When you click on the 'more' link, the text is not displayed correctly. All you have to do is change the .more function to the following:

$('.more').each(function () {
    var content = $(this).html();
    if (content.length > showChar) {
        var c = content.substr(0, showChar);
        var h = content.substr(showChar, content.length - showChar);
        var html = c + '<span class="moreelipses">' + ellipsestext + '</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';
        $(this).html(html);
    }
});

I'm posting this as an answer simply because I can't post comments.

In fact, I now use another script all together, from https://stackoverflow.com/a/11417877/3842368. I found this one to work better in multiple instances.