Take the 2-minute tour ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.

I have the following script: JSFIDDLE

As you can see, when you click open - a div slides out. If you click on the new div, an additional div slides out from under it. This is working great, but I need two things that I cant figure out!

  1. How do condense the jQuery so I don't have to add a class to it every time I want a new slider? Is it possible to do a .sibling kind of thing, or something like this JSFIDDLE?

  2. I've tried making a close button, but I cannot get it to work the way I want. When you click close, I want the bottom div to close first, then the slide out div to close. And this button would need to work even if only one div is open.

Thanks for any help guys, I'm stumped!

$(document).ready(function() {
   $('.cambridge').hide();  
   $("#test").click(function () {
      $(".cambridge").toggle("slide", { direction: "right" }, 1000);
   });
   $('.shopping').hide();  
   $("#test2").click(function () {
      $(".shopping").toggle("slide", { direction: "up" }, 1000);
   });
}); 
share|improve this question

migrated from stackoverflow.com Nov 27 '12 at 17:43

This question came from our site for professional and enthusiast programmers.

    
I figured out the second part! Now if you hit the close button, the bottom slider closes first, then the main slider closes second. jsfiddle.net/avXSd/78 I still think there is a way to condense this function so that I don't have to edit it every time I want to add a new div. Any thoughts? –  Anthony A Nov 27 '12 at 19:16

1 Answer 1

$(document).ready(function() {

    $.fn.registerToggle = function ( $el, direction ) {
        $el.hide();
        this.click(function () {
            $el.toggle('slide', { direction: direction }, 1000);
        });
    };

    $('#test').registerToggle( $('.cambridge'), 'right' );
    $('#test2').registerToggle( $('.shopping'), 'up' );
});
share|improve this answer
    
Fantastic! How would I add the close function into that though? I have it working here: jsfiddle.net/avXSd/78 Is there a way to add a "catch all" close type thing? –  Anthony A Nov 28 '12 at 14:51
    
And originally, my thought was to come up with a script that didnt require me to type in $('#test').registerToggle... every time I wanted to add a new slide. I was hoping I could just add something on the html side and this script would know what to do without modifications to it –  Anthony A Nov 28 '12 at 14:53

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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