How to slide in element with jquery ui

Question

I am using the swipe event (and http://api.jqueryui.com/slide-effect/) to slide out content. This works fine. However, I need to slide in the next('div') as the previous sibling slides out. I have tried next(), nextAll(), closest() but none seem to do what I require.

Here is the function

function swipeleftHandler(event){  
    $(this).toggle( "slide" );// div slides out to left

    // need to slide in next one here

}

The HTML looks like this

<div id="content2" class="content tabcontent active" data-content="1">
<div id="orders_today" class="datagroup datagroup0"></div>
<div id="orders_last_30_days" class="datagroup datagroup1 hide">
</div>

The swipe event is called like this

$(document.body).on('swipeleft', '.datagroup' ,swipeleftHandler);

The swipe event is being captured correctly, and the first div is sliding off to the left as required. I need the next div to side in. There may be multiple elements in the container with the same class (and unknown ID's), so that's why I tried using next()

Could you please show your HTML markup.

Oleksii Aza
– Oleksii Aza

2013-07-09 11:55:07 +00:00
Commented Jul 9, 2013 at 11:55 — Oleksii Aza
– Oleksii Aza, Commented Jul 9, 2013 at 11:55
post you related HTML codes too

bipen
– bipen

2013-07-09 11:55:10 +00:00
Commented Jul 9, 2013 at 11:55 — bipen
– bipen, Commented Jul 9, 2013 at 11:55
I have added more detail to the question

Jez D
– Jez D

2013-07-09 12:36:53 +00:00
Commented Jul 9, 2013 at 12:36 — Jez D
– Jez D, Commented Jul 9, 2013 at 12:36
can you provide fiddle if possible?

Chirag Vidani
– Chirag Vidani

2013-07-09 12:40:27 +00:00
Commented Jul 9, 2013 at 12:40 — Chirag Vidani
– Chirag Vidani, Commented Jul 9, 2013 at 12:40

Balint Bako · Accepted Answer · 2013-07-09 13:15:43Z

1

Cache the next before hiding this:

$("body").on("click", "div", function(){
   $next = $(this).next();
   $(this).toggle("slide");
   $next.toggle("slide");
});

jsFiddle

edited Jul 9, 2013 at 13:15

answered Jul 9, 2013 at 12:54

Balint Bako

2,5701 gold badge16 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Jez D Over a year ago

Thanks for your input. My HTML was fine, just not typed into stackoverflow properly. Thanks for the fiddle, it works. there, but still not working on my app.

Jez D Over a year ago

Have checked your updated fiddle. Thanks for that. Unfortunately I cannot use the ID as a selector in CSS as the selector will not be available (will be unknown) at page load and will be added dynamically using jQuery

Balint Bako Over a year ago

The CSS doesn't matter, I can update it if it confusing :) The key is to store the next element before hiding the current one (you can copy the content of my handler to your handler and it will work, no other change is required in your code)

Balint Bako Over a year ago

I've updated the fiddle and removed all IDs and change hide/show to toggle

Jez D Over a year ago

Thanks for your solution, which incidently is similar to the one I have come up with myself.

Jez D · Accepted Answer · 2013-07-09 13:22:29Z

0

The solution I found to this is to

Remove the hide class
set the height container (#content2) dynamically as a proportion on the viewport height.
#content2{overflow:hidden}

then in my swiftlefthandler function, I used the following

$(this).toggle( "slide" );
$(this).next().toggle( "slide" );

answered Jul 9, 2013 at 13:22

Jez D

1,4972 gold badges25 silver badges54 bronze badges

Collectives™ on Stack Overflow

How to slide in element with jquery ui

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related