Collapsible DIV - Can it make a BOX open wider?

Question

http://winteradagency.com/MessageBroadcast/applications.htm

On the above page I have boxes inside of a div scrolling area. In many of the boxes the text exceeds the size of the box and the client wants to have the boxes click to enlarge so that all the text can be seen within the box when they click on the words "read more".

I looked at some script called Collapsible DIV v2.2- by dynamicdrive

Any suggestions on how to get the box in the first URL to expand?

Any suggestions would be greatly appreciated.

Answer 1

To constrain the size of the boxes, set explicit height and overflow: hidden. Then, to show all content, set height: auto. The scripting to do this should be trivial.

Answer 2

I do not recall how to do this with javascript only but you should use jquery for that. You should change text and add after 100th elements a link called "read more" so that after user clicks this link it can bring back rest of the text and animate the panel container into height of 100 percent.That's our roadmap.I just made an example.

$(document).ready(function() {

        var slicePoint = 100;
        var widow = 4;

        $('#area div.pane').each(function() {

            var allText = $(this).html();
            var startText = allText.slice(0, slicePoint).replace(/\w+$/, '');
            var endText = allText.slice(startText.length);
            if (endText.replace(/\s+$/, '').split(' ').length > widow) {
                $(this).html([startText,
                '<a href="#" class="more">read more..</a>',
                '<span class="details">',
                endText,
                '</span>'].join('')
                );
            }
        });


        //hide details until read-more is clicked

        $('span.details').hide();
        $('a.more').click(function() {
            $(this).hide().next('span.details').fadeIn();
            $('a.more').parent().animate({ 'height': '100%' });
            return false;
        });
    });

Your html file could be look like this.

<div id="area">
    <div class="pane">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit .......
    </div>
    <div class="pane">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit .......
    </div>
    <div class="pane">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit .......
    </div>
    <div class="pane">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit .......
    </div>
    <div class="pane">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit .......
    </div>
    ......
</div>

Here content is pane , so give exactly a height i.e 50px then 100 percent so entire text should be visible
That's all.
Source
Hope this helps.