CODEWITHSUNDEEP
javascripthtmlcss
Volkan
Volkan

Reputation: 546

Automatically expand height of DIV according to the div displayed

I am using a div sliding thing, as you can see in this fiddle example

    $(document).ready(function() {
   $("#moving").click(function(){
      $("#moving").toggleClass("left");
       $("#right").toggleClass("right");
   });
});

Here is the complexity that I am using:

I have 12 Right Side DIVS, they are all set display: none, except one. On the moving DIV I have a list of links to other hidden DIVs. They are shown or hidden with show or hide jQuery function....

It all works with height set to 700px (so I can accomodate a lot of content)

How can I make the height automatic according to the content? If, let's say Div number 5 has more content and scroll is required... how can I expand it and show it?

I hope you guys can help me. Thank you very much in advance.

Upvotes: 0

Views: 32

Answers (1)

Dean Taylor
Dean Taylor

Reputation: 41981

Using jQuery something like this will use the largest of the children's heights for all the children div's of #wrapper.

$(window).on('load', function () {
        var maxHeight = 0;
        jQuery("#wrapper > div").each(function () {
            var thisHeight = jQuery(this).height();
            maxHeight = thisHeight > maxHeight ? thisHeight : maxHeight;
        }).height(maxHeight);

});

Added a sample here: https://jsfiddle.net/mq2c2129/15/

Upvotes: 1

Related Questions