CODEWITHSUNDEEP
jquery
saggiatore
saggiatore

Reputation: 31

Set Height of Div Based on Content

I have div with a list of events that are generated dynamically by a php loop. I want the div to have an initial height, displaying say just three events. Then when you click a link, it expands to the full width to show all the events. Say:

<div id = "container">
  <div class="events-wrap">
  <!-- php loop that generates the events -->
  </div>
  <a href="#" class="showall">Show All</a>
</div>

So I want the height to animate down on click of .showall to the full height of the div so all the events are displayed. My initial failed attempt to just get the div to animate was.

$(document).ready(function() { 
    $('.events-wrap').css('height','30%');
    $('.showall').click(function(e) {
         e.preventDefault();
          $('.events-wrap').animate({
                height: '100%'
              }, 500, function() {
                // Animation complete.
           });
     )};
});

I would also like to have it animate back up to its initial height when the link is clicked again. Anybody??? Thanks!!

Upvotes: 1

Views: 2029

Answers (3)

drizzie
drizzie

Reputation: 3361

I extended @hayk's answer a little to provide the sliding animation. jQuery has issues with animating the percent height:

$(document).ready(function() { 
    $('.events-wrap').data('fullHeight', $('.events-wrap').height());
    $('.events-wrap').css('height','100px').css('overflow','hidden');
    $('.events-wrap').data('minimizedHeight', $('.events-wrap').height());
    $('.showall').click(function(e) {
        e.preventDefault();
        clickShowAll();
    });
});

function clickShowAll() {
    var eventWrap = $('.events-wrap');
    var h;
    if(eventWrap.height() != eventWrap.data('fullHeight')) {
        h = eventWrap.data('fullHeight');
    }
    else
    {
        h = eventWrap.data('minimizedHeight');
    }

    eventWrap.animate({
        height: h
            }, 500, 'swing', function() {
                //Animation complete...
            }
       );
}

When the document is loaded, before setting the height of .events-wrap, store its full height using jQuery data to later retrieve it. Then set it to its minimized height. Then store that using .data.

Create the click event for .showall and have it call a function that checks the height of the .events-wrap and determines what height to animiate.

Upvotes: 1

Hayk Martiros
Hayk Martiros

Reputation: 2186

Try this:

http://jsfiddle.net/hmartiro/yd7Kq/30/

Upvotes: 2

Dariush Jafari
Dariush Jafari

Reputation: 5443

try this :

$(document).ready(function() {
$('.events-wrap').css('height','100px').css('overflow','hidden');
$('.showall').click(function(e) {
     e.preventDefault();
   r = $('.events-wrap');
   h = r.children('ul').outerHeight();
    t=$(this);
   if(r.data('state')!='all')       
      r.animate({
            height: h
          }, 500, function() {
              t.text('show less');
              r.data('state','all');
       });
    else
        r.animate({
            height: '100px'
          }, 500, function() {
                t.text('show all');
              r.data('state','less');
       });

});
});

on jsfiddle

Upvotes: 0

Related Questions