0

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?

Daniel
  • 1,364
  • 1
  • 11
  • 18
  • if we do .off("click tap mousedown vmousedown") on h3 element JQM keeps quiet and link works, but if you have better answers - your ideas are welcome! – Daniel Mar 03 '15 at 11:54

1 Answers1

1

  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"))
Romain Derie
  • 516
  • 7
  • 17
  • I'd like that by click on google.com here http://jsfiddle.net/e09bm92a/3/ browser opens some link – Daniel Mar 04 '15 at 07:52
  • [JsFiddle](http://jsfiddle.net/e09bm92a/5/) Explanation : You could store the url in an attribute of the

    like this :

    google.com

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

    google.com

    Then you retrieve the url with $(this).data("url") and you open the link with window.open($(this).data("url"));     – Romain Derie Mar 04 '15 at 13:22