CODEWITHSUNDEEP
jqueryhtmlcssjquery-animateslidetoggle
Riskbreaker
Riskbreaker

Reputation: 4791

Jquery SlideToggle divs to slide (animate) up

I want to know how can you make this perfect example slide up instead of pushing the 'navs' down

http://jsfiddle.net/NPRfM/3/

...right now, it reveals from top to bottom (pushes the menu down)...I want the reverse..meaning boxes slide up to reveal and pushes navs up - clicking on one pushes the menu up to reveal the boxes.

That fiddle is on the mark on what I want to do only I want it slide up to reveal

I tried something like this but no go

.animate({scrollTop: $('.dropdown').offset().top}, 250);

do I have to also use some css positioning to have it offset? ...still learning the ropes on jquery

UPDATE**

HERE is what i want it to do:

http://jsfiddle.net/WFxLJ/1169/

....The only issue is, I cant figure a way to do it like the first jfiddle...where it kind of has 2 functions.

-==click div 1===slides up -reveals content of div 1 (in same section 2)

====click div 2 after ======shows content of div 2 (in same section of 1)

=====click div 2 again=======slides down the box to hide section

and vice -versa

Hope I make sense.

Update 2**

I almost got it! Check the jfiddle:

http://jsfiddle.net/b7C2d/315/

So the only thing left is the menu (black) needs to push up so it looks like it reveals...I assume this is just CSS is it the fixed positioning..(changing it to relative just messes it)?

I have found a site that does this:

Dean

But their code is more complicated then it should be.... plus it looks like from 2001 (no way I am going to try to mess with this code)..but anyways thats what i want to do.

Update 3**

This is the closest I can get it but it is acting like its missing a few screws :(

http://jsfiddle.net/b7C2d/347/

Upvotes: 1

Views: 7661

Answers (3)

Shivam
Shivam

Reputation: 2248

Like So?

UPDATED: jsFiddle

/* CREATED BY SHIVAM BHALLA */

(function($) {
    $('body').addClass('js');

    var $toggler = $('#toggler'),
        $wrapper = $toggler.find('.wrapper'),
        $pager = $toggler.find('.pager'),
        $content = $toggler.find('.content');

    $toggler.css('height', $content.height() + $pager.height());
    $wrapper.css('top', $content.height());
    $content.hide();

    $pager.find('a').on('click', function(e) {
        var $this = $(this),
            $target =  $( $(this).attr('href') ),
            $count = 0;

        if ($count === 0) {
            $wrapper.animate({'top' : 0});
            $count = 1;
            $this.addClass('selected');
        } 
        if ($target.hasClass('active')) {
            $('.selected').removeClass('selected');
            $wrapper.animate({'top' : $content.height()}, function() {
                $target.hide().removeClass('active');
            });
        } else {
            $wrapper.find('.active').slideUp().removeClass('active');
            $target.addClass('active').slideDown();
            $('.selected').removeClass('selected');
            $this.addClass('selected');
        }       

        e.preventDefault();            
    });



})(jQuery);

P.S: New js, html & css. Also looks good with Javascript disabled.

Upvotes: 3

apaul
apaul

Reputation: 16170

You may want to try using jQuery UI tabs with some options tacked on.

Working Example

 $(function () {
     $("#tabs").tabs({
         collapsible: true,
         active: false,
         fx: {
             height: 'toggle',
             duration: 'slow'
         }
     });

     // fix the classes
     $(".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *")
         .removeClass("ui-corner-all ui-corner-top")
         .addClass("ui-corner-bottom");
     // move the nav to the bottom
     $(".tabs-bottom .ui-tabs-nav").appendTo(".tabs-bottom");

 });

Upvotes: 1

Brewal
Brewal

Reputation: 8189

Add this to your CSS : 

#panels {
    height: 90px; 
    overflow: hidden;
}

And change .info-panel to this : 

.info-panel { 
    display: none; 
    width: 300px; 
    padding: 50px 20px 20px 20px; 
    position: absolute; 
}

The Fiddle

Upvotes: 2

Related Questions