CODEWITHSUNDEEP
jquery-mobilejquery-mobile-collapsible
Daniel
Daniel

Reputation: 1402

jQuery Mobile - Including not collapsible elements in collapsible set

In my list some elements have sub-items and some not. These, that don't have have sub-items should work as buttons/links.

Unfortunately including an item like in my collapsibleset

<div data-role="collapsible" data-iconpos="none">
    <h3 >Title</h3>
</div>

and setting in JS a's href to needed link looks great, but JQM triggers open/closing event by clicking on it. That changes it's look and my link inside the element doesn't work.

Does someone have ideas?

Upvotes: 0

Views: 195

Answers (1)

Romain Derie
Romain Derie

Reputation: 516

  1. Is that what you want ?

    JsFiddle

    $("h3").on("click", function(e){
   $(this).parent().collapsible({collapsed: true});
});

    It prevents the collapsible to open

  2. If you need the collapsible to stay in the state it is when the page is loaded, you can check the state of the collapsible with 

    $(".ui-collapsible").hasClass('ui-collapsible-collapsed')

    and let it open if it is already open, or close if it is already close.

    JsFiddle

  3. You could use that if you have a button inside your collapsible header, and do not want the collapsible to react when you click on the button but still on the header (outside the button) Final working exemple : JsFiddle

Edit : As you requested in the comments, here is a JsFiddle with a collapsible header opening a website on click instead of collapsing/expanding the collapsible.

Explanation :

1) You could store the url in an attribute of the "h2" like this : 

<h2 data-url="google.com"; >google.com</h2>

2) Then you add a class when you don't want the heading to collapse/expand the collapsible : class="doNotTriggerCollapsible"

So you have : 

<h2 class="doNotTriggerCollapsible" data-url="google.com"; >google.com</h2>

3) Then you retrieve the url with $(this).data("url") and you open the link with 

window.open($(this).data("url"))

Upvotes: 1

Related Questions