You can try this script It is simple very basic script may be helpful to you.
jsfiddle.net/nZyXJ/
Вопрос
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();
});
});
Решение
You can try this script It is simple very basic script may be helpful to you.
jsfiddle.net/nZyXJ/
Другие советы
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> <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.