Panel closes immediately after opening

Panel closes immediately after opening

To whom it may concern,

I'm currently trying to create a listview that sets a value in a panel dynamically and opening the panel on click.

I want to make it so that on an item click, it first closes the opened panel, sets the value and re-open it again for a visual affect.

The problem is the first time the panel opens, everything is fine but on the next list item click (any), the panel opens but then immediately closes. Does anyone know what is happening? This is what I have so far:

HTML:

  1. <ul data-role="listview">
  2.     <li><a onclick="openPanel('Acura');">Acura</a></li>
  3.     <li><a onclick="openPanel('Audi');">Audi</a></li>
  4.     <li><a onclick="openPanel('BMW');">BMW</a></li>
  5.     <li><a onclick="openPanel('Cadillac');">Cadillac</a></li>
  6.     <li><a onclick="openPanel('Ferrari');">Ferrari</a></li>
  7. </ul><!-- listview -->

  9. <div data-role="panel" class="mypanel" data-display="overlay" data-position="right" data-theme="d" data-dismissible="false">
  10.     <div class="dynamicContent">
  11.         <!-- dynamic content -->
  12.     </div>
  13. </div><!-- /panel -->

JavaScript:

  1. function openPanel(str){
  2.     if(panelIsOpen()){
  3.         console.log("CLOSING PANEL");
  4.         $(".mypanel").panel("close");        
  5.     }
  6.     
  7.     setTimeout(function(){
  8.         $(".dynamicContent").html(str);
  9.         $(".mypanel").trigger("create").panel("open");
  10.         console.log("OPENING PANEL");
  11.     }, 100);
  12. }

  14. function panelIsOpen(){
  15. if( $(".mypanel").hasClass("ui-panel-open") == true ){
  16. return true;
  17. }else{
  18. return false;
  19. }
  20. }

This is an example on JSFiddle :  example

Can somebody please help me, Thanks in advance.