Home/ Questions/Q 8563743
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T17:01:56+00:00

i’m trying to collapse programatically a collapsible with a simple JavaScript: $( ".nuovoPaziente" ).trigger(

  • 0

i’m trying to collapse programatically a collapsible with a simple

JavaScript:

$( ".nuovoPaziente" ).trigger( "collapse" );

HTML:

<div data-role="collapsible" data-collapsed="false" data-theme="b" id="nuovoPaziente">
</div>

but it doesn’t work.
I have the lastest jquery mobile library 1.1.1. I’m sure the execution arrives to the trigger code for i have an alert before checking that it arrive to execute the code.
Any idea? ^^

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You used an ID in your definition of your collapsible:

    <div data-role="collapsible" data-collapsed="false" data-theme="b" id="nuovoPaziente">

    So, it should be #nuovoPaziente instead:

    $( "#nuovoPaziente" ).trigger( "collapse" );

    .nuovoPaziente is related to a class; so if you want to keep this convention, you will have to modify your collapsible to something like this:

    $( ".nuovoPaziente" ).trigger( "collapse" );

<div data-role="collapsible" data-collapsed="false" data-theme="b" class="nuovoPaziente">

    The folowing example worked for me:

    JS / jQuery:

    $(function() {
    $("#collapse").click(function() {
        console.log("ok");
        $( "#nuovoPaziente" ).trigger( "collapse" );
    });
});

    HTML:

    <body>
    <div data-role="page">
        <div data-role="content">

            <div data-role="collapsible" data-collapsed="false" data-theme="b" id="nuovoPaziente">
                <h3>I'm a header</h3>
                <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
            </div>

            <button id="collapse">collapse!</button>
        </div>
    </div>  
</body>

    I called the libraries as follows:

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile.structure-1.1.0.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>   
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

    You may have a try at the example above.

    Hope this helps. Let me know about your results.

    • 0