Loading...

Search jQuery

Search

jQuery Forum

Collapsible content on-click events

in jQuery Mobile • 12 years ago

Hey guys, loving the new framework! I've started playing around with it and I've hit upon a hurdle that I can't figure out.

I need to trigger an event (Get content via ajax) once a Collapsible content block has been 'clicked'. I haven't a clue where to begin to look and have had a quick search but it's hard to find something your not quite sure of.

My closes guess would be some kind of callback function but since I'm invoking the functionality of this 'Collapsible content block' via the html markup data-role="collapsible" data-state="collapsed" etc etc I'm not sure.

Any help would be greatly appreciated.

5

Replies(5)

scottjehl

Re: Collapsible content on-click events

12 years ago

Please check out the new events documentation here: http://jquerymobile.com/test/docs/events.html (that's the live git preview url - we'll move them to the alpha url shortly).

I'm guessing you'll just want to bind a live selector to the pagecreate event and apply your logic in there.

Something like...

$('div').live('pagecreate', function(){
//$(this) refers to a newly initialized page

nuwansh

Re: Collapsible content on-click events

12 years ago

You can use two events for Collapsible content block. then events are "expand" and "collapse", and check the following code sample...

$('div').live('expand', function(){
console.log('expand');
}).live('collapse', function(){
console.log('collapse');
});

Re: Re: Collapsible content on-click events

12 years ago

Hey thanks for this, works great!

Kontaktschmied

Re: Collapsible content on-click events

12 years ago

Your link to the doc dont work ;-((

I want after expand of collapsable scroll to top of the collapsible content.

<div class="newscategory" data-theme="a" data-role="collapsible"></div>

$('.newscategory').live('expand',function(){$(this).scrollview("scrollTo",(this).position(),100);});

It doesnt work. Any ideas?

Re: Re: Collapsible content on-click events

12 years ago

I was looking to do the same thing. I solved it as following:

$(function() {
$("div[data-role='collapsible']").live('expand', function(){
var top = $(this).position().top;
$.mobile.silentScroll(top);
});
});