Reputation: 8990

dealing with sliding in jquery?

i have this script that with li list, if you click on one of the list items, a box slides to the right, and if you click again, its slides back to its orginal place(toggle)

the demo is here:

http://www.kornar.co.uk/home2.php

the problem that i have is on slideout, i want the width of the panel to be 700px

$(".panel").css("width","700px");

on slide back in, i want the width to be 350px, so it hides behind the list again.

$(".panel").css("width","350px");

but the problem im having is on when it slides back, it deosnt hide behind the list, it still shows the panel on the right? thanks

Upvotes: 2

Answers (4)

ClarkeyBoy

Reputation: 5010

For getaways reference: this is what I would have posted had masondesu not got there first. As you can see it is very similar, but has if statements where none are actually required (as in masondesu's solution.

    $(document).ready(function () {
        $('.block').click(function () {
            var id = $(this).attr('id');
            var data_id = $(".data").html();
            var panel = $('.panel');
            var panel_width = $('.panel').css('left');
            var currLeft = panel.css('left');
            var blockWidth = $(".left").outerWidth();
            if (data_id == id) {
                if (currLeft == "0px") {
                    panel.animate({ left: blockWidth, width: "700px" });
                } else {
                    panel.animate({ left: "0px", width: "350px" });
                }
            }
            else {
                if (currLeft == "0px") {
                    panel.animate({ left: blockWidth, width: "700px" });
                } else {
                    panel.animate({ left: "0px", width: "350px" });
                }
            }
            $('.data').html(id);
            return false;
        });
        $('.close').click(function () {
            var panel = $('.panel');
            var currLeft = panel.css('left');
            if (currLeft == "0px") {
                panel.animate({ left: blockWidth, width: "700px" });
            } else {
                panel.animate({ left: "0px", width: "350px" });
            }
            return false;
        });
    });

Regards,

Richard

Upvotes: 1

Mason Stewart

Reputation: 868

Hey dude, I made a couple of assumptions about what you were trying achieve on the whole, but maybe this is what you were trying to do... The following is all I changed:

    <script type="text/javascript">
    $(document).ready(function() {

      $('.block').click(function(){
        var id= $(this).attr('id');
        var data_id= $(".data").html();
        var panelPositionLeft=$('.panel').css('left');

        if(panelPositionLeft=='0px') {
          //the .panel is hidden, so slide it out and populate .data with the new id
          $('.panel').animate({left: 350, width:700});
          $('.data').html(id);
        } else if (data_id!=id){
          //something other than the previous .block was clicked and the .panel is obviously open, so don't collapse, just add the new id into .data
          $('.data').html(id);
        } else {
          //neither of the previous situations are true, so it must be that the previously clicked block is being clicked again. Just slide it closed and don't change the value of .data
          $('.panel').animate({left: 0, width: 350});       
        }
      });


      $('.close').click(function(){
        // just slide it closed.
        $('.panel').animate({left: 0, width: 350});
      });

    });

    </script>

There are still a few things you could clean up, but I thought this would be a little easier to read and understand. Try this out, let me know if I misunderstood the problem.

Thanks!

Upvotes: 3

Headshota

Reputation: 21449

You don't resize the panel on "li"-click, it resizes only on ".close"-click. so it won't resize ;)

Upvotes: 0