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/