2

I have two divs next to each other and would like to use the toggle function to collapse one div (Sidebar) horizontally while expanding the other (Map) to take full width of the former. I would then need the toggle to bring back both divs to their original widths/positions. I can get it to do the first operation but I have no clue on how to do the reverse. See Fiddle:

    $(document).ready(function(){
        $("#toggle").click(function(){
            $("#sidebar").animate({width: 'toggle'});
            $("#map").animate({width: '100%'});     
        });
    });

4 Answers 4

5

Try this

HTML

<input type="button" data-name="show" value="Toggle" id="toggle">

Script

$(document).ready(function () {
            $("#toggle").click(function () {
                if ($(this).data('name') == 'show') {
                    $("#sidebar").animate({
                        width: '0%'
                    }).hide()
                    $("#map").animate({
                        width: '100%'
                    });
                    $(this).data('name', 'hide')
                } else {
                    $("#sidebar").animate({
                        width: '19%'
                    }).show()
                    $("#map").animate({
                        width: '80%'
                    });
                    $(this).data('name', 'show')
                }
            });
        });

DEMO

3
  • Your code works great and has the best slide effect. It's exactly what I was looking for. Thanks! Jun 13, 2014 at 7:53
  • @user3716388 Thanks :-)
    – Sridhar R
    Jun 13, 2014 at 7:54
  • 2
    I just want to point out this doesn't work correctly. You can see that the sidebar is visible under the map when the animations begin (when it is coming back in).
    – Ruddy
    Jun 13, 2014 at 8:01
1

You just need to check whether the div is 100% or 80%.

$(document).ready(function () {
    $("#toggle").click(function () {
        $("#sidebar").animate({
            width: 'toggle'
        });
        var value = $("#map")[0].style.width !== "100%" ? '100%' : '80%';
        $("#map").animate({
            width: value
        });
    });
});

Working Fiddle

5
  • Also on this one, the sidebar gets pushed under the map. Not the best solution.
    – Ruddy
    Jun 13, 2014 at 8:04
  • @Ruddy where and when the sidebar is getting pushed under the map? which browser you are testing on?
    – Mr_Green
    Jun 13, 2014 at 8:08
  • Using Chrome (up to date), you can see this by just watching the scrollbar when clicking the toggle. You will see it will get bigger and then go back to normal. Same with IE, tho you was using jQuery 1.10.1 and IE didn't seem to like that and didn't work at all.
    – Ruddy
    Jun 13, 2014 at 8:20
  • This code actually works well with what I'm working on. Jun 13, 2014 at 19:34
  • @user3716388 yeah I still didn't get what Ruddy is talking about.
    – Mr_Green
    Jun 14, 2014 at 5:02
1

I usually use a second css class that tells the current status of the div. Something like collapsed that is changed or removed when the div expands, so you can check for this second class to determine what action the user is requesting.

Fiddle edited: http://jsfiddle.net/8wKxY/6/

Something like this:

$(document).ready(function(){
    $("#toggle").click(function(){
        if($(this).hasClass('expanded')){
            $("#sidebar").stop().animate({width: '19%'});
            $("#map").stop().animate({width: '80%'});
            $(this).removeClass('expanded');
        }
        else {
            $("#sidebar").stop().animate({width: '100%'});
            $("#map").stop().animate({width: '100%'});      
            $(this).addClass('expanded');
        }
    });
});

In the example I have attached the control class directly to the button, but it would be more appropriate to attach it to a common container of the two expandable divs.

Also note that you probably need to have an owerflow: hidden property on the sidebar so that it doesn't goes under the map on collapsing. In my example I completely hide the sidebar after the animation finishes.

5
  • The sidebar just gets pushed under the map... this does not work.
    – Ruddy
    Jun 13, 2014 at 8:03
  • @Ruddy Probably you just need to adjust widths
    – Mir
    Jun 13, 2014 at 8:23
  • @Mir Its your answer, you should fix it.
    – Ruddy
    Jun 13, 2014 at 8:25
  • @Ruddy I think that we should primarily point directions and help other users understanding concepts than to have them copy-paste something they won't understand. I believe that the theory behind my answer is correct even if the fiddle result is not 100% perfect. I sure will fix it, but i don't think it is so important at this point.
    – Mir
    Jun 13, 2014 at 8:37
  • @Mir Changing the widths will not fix this problem. Therefor your answer isn't really correct. The idea is to fix the OP's problem (given they have provided the information to do so) and explain how you fixed there problem, not only for the OP's sake but anyone that may have a similar problem in the future. As I feel it is incorrect I will down-vote the answer, but I did give you the chance to fix the answer.
    – Ruddy
    Jun 13, 2014 at 8:39
0

Use jQuery toggleClass()

Working Demo

$(document).ready(function(){
  $("#toggle").click(function(){
            $("#sidebar").animate({width: 'toggle'});
            $("#map").toggleClass('fullWidth');     
  });
});

.fullWidth{
    width : 100% !important;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.