jQuery .. div显示/滑动？

Question

I have a div, which has content in it.

The content could be really long, or the content could be really small.

I don't want the content to stretch the page on page load if it is long, I want them to click a "more" link and it will slide down and reveal the rest of the content.

For example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vulputate mi egestas ligula feugiat volutpat. Morbi eros felis, aliquam in varius id, sodales quis nunc. Nulla sagittis consectetur arcu, sed auctor odio placerat quis. Praesent vitae lacus neque. Curabitur ultricies tristique sollicitudin. Suspendisse malesuada nunc at augue interdum at facilisis ipsum gravida.

Below it is a bar or link that says "show the rest"

Up on click, this div lengthens and shows the rest of the content:

Nunc congue sapien sed sem tincidunt ut adipiscing neque lacinia. Praesent facilisis quam sed tellus sodales id tristique massa ullamcorper. Donec sem turpis, cursus in elementum id, tincidunt a libero. Etiam feugiat, sem quis dictum imperdiet, nisl ante pharetra erat, ut ornare nulla justo ac sapien.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vulputate mi egestas ligula feugiat volutpat. Morbi eros felis, aliquam in varius id, sodales quis nunc. Nulla sagittis consectetur arcu, sed auctor odio placerat quis. Praesent vitae lacus neque. Curabitur ultricies tristique sollicitudin. Suspendisse malesuada nunc at augue interdum at facilisis ipsum gravida. Nunc congue sapien sed sem tincidunt ut adipiscing neque lacinia. Praesent facilisis quam sed tellus sodales id tristique massa ullamcorper. Donec sem turpis, cursus in elementum id, tincidunt a libero. Etiam feugiat, sem quis dictum imperdiet, nisl ante pharetra erat, ut ornare nulla justo ac sapien.

I know itll be hard to control what will be cut off, blah blah but it isn't for that type of thing. The div does not contain text, it contains a list of features, for example X listing may have 4 features, Z listing may have 14 features, instead of the page stretching if the listing has 14 features listed vertically, we want it to only show a few and then they must click "show me more" for it to slide down and reveal the rest.

How would I go about doing this? Even a jsfiddle to demonstrate it?

Thank you :)

Answer 1

Try giving a fixed height to the div. You can use CSS for this. Then compare height of the list with the outer div. If it is greater show the bar with link show more . On click of this bar you can manage the height of outer div. Like this -

CSS

   .parentDiv{
              height:some fixed height px;
              overflow: auto;
              }

Jquery

          var parentHeight = $('.parentDiv').height();
          var listHeight = $('#List').outerHeight(true);
          if(parentHeight < listHeight) {
                   $('#linkBar').show();
                }
          $('#linkBar').click(function(){
            //$('.parentDiv').height(listHeight);
            //OR you can use following code to animate the div
            $('.parentDiv').animate({'height': listHeight}, 'slow')
            });

Answer 2

Here's a working demo of my implementation (coincidentally similar to the answer given above; I was making this before any answers were given): http://jsfiddle.net/7fhrN/15/

It works for users without JavaScript and gives graceful degradation to your page. Try switching the JS library to something random on JsFiddle and click Run .

HTML:

<div class="stretchy">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vulputate mi egestas ligula feugiat volutpat. Morbi eros felis, aliquam in varius id, sodales quis nunc. Nulla sagittis consectetur arcu, sed auctor odio placerat quis. Praesent vitae lacus neque. Curabitur ultricies tristique sollicitudin. Suspendisse malesuada nunc at augue interdum at facilisis ipsum gravida.</div>
<div class="stretchy">Nunc congue sapien sed sem tincidunt ut adipiscing neque lacinia. Praesent facilisis quam sed tellus sodales id tristique massa ullamcorper. Donec sem turpis, cursus in elementum id, tincidunt a libero. Etiam feugiat, sem quis dictum imperdiet, nisl ante pharetra erat, ut ornare nulla justo ac sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vulputate mi egestas ligula feugiat volutpat. Morbi eros felis, aliquam in varius id, sodales quis nunc. Nulla sagittis consectetur arcu, sed auctor odio placerat quis. Praesent vitae lacus neque. Curabitur ultricies tristique sollicitudin. Suspendisse malesuada nunc at augue interdum at facilisis ipsum gravida. Nunc congue sapien sed sem tincidunt ut adipiscing neque lacinia. Praesent facilisis quam sed tellus sodales id tristique massa ullamcorper. Donec sem turpis, cursus in elementum id, tincidunt a libero. Etiam feugiat, sem quis dictum imperdiet, nisl ante pharetra erat, ut ornare nulla justo ac sapien.</div>

CSS:

.stretchy
{
    margin: 20px;
    padding: 5px;
    background-color: rgb(240, 240, 240);
    overflow: hidden;

    position: relative;

    padding-bottom: 20px;
}

.inner
{
    max-height: 120px;
    overflow: hidden;
}

.reveal
{
    position: absolute;
    bottom: 0px;
}

JavaScript:

$(document).ready(function()
{
  $('.stretchy').each(function()
  {
    if ($(this).height() > 130)
    {
      $(this).replaceWith('<div class="stretchy"><div class="inner">' + $(this).html() + '</div><a href="#" class="reveal">Show me more lipsum</a></div>');
    }
  });

  $('.reveal').toggle(function()
  {
    $(this).parent().find('.inner').animate({maxHeight: '1000px'});
  }, function() {
    $(this).parent().find('.inner').animate({maxHeight: '120px'});
  });
});

Basically, I iterate over all the <div> s with the class stretchy . If they are too big, I replace them with a <div> with a container and a link at the bottom which changes the max-height of the inner <div> to some ridiculous value.

Just try it. Seeing > having me explain it to you.