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();
 });
});

score 1 · Accepted Answer · answered Jun 25 '13 at 04:06

1

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

  jsfiddle.net/nZyXJ/

answered Jun 25 '13 at 04:06

steve

1,365
4
19
33

Thanks for your help Steve! Yes, it's very helpful! I tried your code and it's working fine but I tried to work around your code to get a code that let me display different lengths for the "beginning of the sentence" (like replacing the var showChar = 100; by "read more" in the sentence ) but without success. I also tried to add a sort of slow toggle effect when the "end of the sentence" is appearing, but it wasn't a success either! – JinSnow Jun 25 '13 at 12:26
I am sorry, I read my comment and it wasn't clear at all. var showChar = 100 can't work for my case because I need sometimes to have my toggle start after 100 char, but sometimes it will be 300. Actually, I won't even know the number of characters because I will start the toggle at the best place in the sentence, so it could be after 3 words or after 50 words. There is no way I can predict where the toggle will be, so the jquery has to reflect this flexibility. Again, I am sorry,my bad. – JinSnow Jun 25 '13 at 16:20

score 0 · Answer 2 · edited May 23 '17 at 12:28

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.

jquery slide toggle without line break

2 Answers2