Question

This is probably a fairly easy question, but I’m new to JavaScript and jquery….

I have a website with a basic show/hide toggle. The show/hide function I’m using is here:
http://andylangton.co.uk/articles/javascript/jquery-show-hide-multiple-elements/

So here’s my question….. I would really like the first 5-10 words of the toggled section to always be visible. Is there some way I can change it so that it doesn’t hide the entire element, but hides all but the first few words of the element?

Here’s a screenshot of what I would like it to do:
http://answers.alchemycs.com/mobile/images/capture.jpg

Answer 1

You can do some plugin authoring,I did a sample demo here ,based on your screenshot

<div class="toggle">ShowHide</div>
<div class="content">some content some content  some content  some content  some content <br/> some content  some content  some content </div>
<div class="toggle">ShowHide</div>
<div class="content">some content some content  some content  some content  some content <br/> some content  some content  some content </div>

here is javascript/jquery code

jQuery.fn.myToggle = function(selector, count) {
    var methods = {
        toggle: function(selector, count) {
            if ($(selector).is(':visible')) {
                var span = $('<span>');
                span.text($(selector).text().substr(0, count) + "...");
                span.insertAfter($(selector));
                $(selector).hide();
            }
            else {
                $(selector).show();
                $(selector).next('span').hide();
            }
        }
    };
    $(this).each(function() {
        methods.toggle($(this).next(selector), count);
        $(this).click(function(evt) {
            methods.toggle($(this).next(selector), count);
        });
    });
};
$(function() {
    $('.toggle').myToggle('.content', 3);
});