CODEWITHSUNDEEP
jquery
Jones V Rajan
Jones V Rajan

Reputation: 77

While Slide down I need to change height of another div relative to the slide down height

I need to change the height of one Div dynamically, Based on the height of slide down of another element in another div without reloading,

ie when I click on the slide down element the element must slide down and on the same instance height of another div must be setted as the height slide down and slide up,

here is my code 

$(window).load(function() {
var mainheight = $('.main-content-area').height();
var sideheight = $('.side-bar').height();
if(mainheight > sideheight) {   
$('.side-bar').css('height',  mainheight + 10);
}
else $('.sidebar').css('height', 'auto');
    //Slide toggle for the a page
$('.toggle-row h3').click(function() {
    $(this).next('.row-content').slideToggle(300);
    $(this).children('.right-arrow').toggleClass('down-arrow');
    if (mainheight > sideheight){
        $('.side-bar').css('height', mainheight +10);
    }
    else {
        $('.side-bar').css('height', sideheight);   
    }
});


});

Upvotes: 1

Views: 843

Answers (1)

Berker Yüceer
Berker Yüceer

Reputation: 7335

You can achive this with jQuery UI:

resources:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

html:

<div class="mydiv" style="background-color:red;"></div>
<div class="mydiv" style="background-color:green;"></div>
<div class="mydiv" style="background-color:blue;"></div>

css:

div.mydiv { height:100px; width:100px; float:left; }

jQuery:

$('.mydiv').each(function() {
    var mydiv = $(this);
    var slider = $( "<div id='slider'></div>" ).insertAfter(mydiv).slider({
        animate: true,
        orientation: "vertical",
        range: "min",
        min: 0,       
        max: 400,
        value: mydiv.width() + 1,
        slide: function( event, ui ) {
            mydiv.width(ui.value - 1);
        }
    });
});

fiddle: http://jsfiddle.net/BerkerYuceer/bTtJ5/

Upvotes: 1

Related Questions