Question

I want to be able to click a particular link, which will then hide my sidebar <section> and resize the content <section>. Currently I have the hiding mechanism working, however I’m struggling with the resizing part.

My code is currently as follows:

$(document).ready(function() {
        $('#sidebar-toggle-link').click(function() {
                $('#container-sidebar').toggle('slide');
        });
});

I’ve tried adding this within the second function:

var toggle_width = $('#container-content').width() == 100 ? '74%' : '100%';
$('#container-content').animate({ width: toggle_width });

This however scales the content <section> to 100%, but not back again when the link is clicked a second time – the sidebar reappears, but the content <section> gets shifted to below the sidebar, still at 100% size.

How do I do this in JQuery?

Answer 1

Try this instead:

var toggle_width = $('#container-content').width() == $(window).width() ? '74%' : '100%';

window or any parent wich 100% width is targeting.

You could try this too, depending style applied to your element (e.g padding, margin)

$('#container-content').outerWidth() == ...