Потеря стиля на разборном элементе динамической мобильной панели jquery

Question

Я открываю новую страницу, нажимая на элемент списка, который добавляет данные к разборному элементу div на внешней панели. Сначала я открываю его, стиль остается на сворачиваемом элементе div, но если я возвращаюсь и пытаюсь открыть другой элемент, стиль исчезает, но данные там. Я чувствую, что перепробовал все, добавив такие методы, как создание, обновление, улучшение и мне не повезло. Есть идеи??

Java Script:

$(document).on('click', '#results li ', function(){  
$("#barHours").empty();
$("#barHours").append('<h3>Hours: </h3>');
$("#barHours").append('Monday: ' + ($(this).data('monday-hours')) + '<br>');
$("#barHours").append('Tuesday: ' + ($(this).data('tuesday-hours')) + '<br>');
$("#barHours").append('Wednesday: ' + ($(this).data('wednesday-hours')) + '<br>');
$("#barHours").append('Thursday: ' + ($(this).data('thursday-hours')) + '<br>');
$("#barHours").append('Friday: ' + ($(this).data('friday-hours')) + '<br>');
$("#barHours").append('Saturday: ' + ($(this).data('saturday-hours')) + '<br>');
});

HTML

<div data-role="panel" id="panel" data-position="right" data-display="overlay" data-theme="b">
        <div data-role="content">
            <div data-role="collapsible" data-inset="true" id="barHours">
            </div>
        </div>
    </div>

Answer 1

Простой способ сделать это - вызвать метод destroy перед обновлением свертываемого объекта, а затем повторно инициализировать его в конце:

    $("#barHours").collapsible( "destroy" ); //destroy the widget
    $("#barHours").empty();
    $("#barHours").append('<h3>Hours: </h3>');
    $("#barHours").append('Monday: 8-5<br>');
    $("#barHours").append('Tuesday: 8-5<br>');
    $("#barHours").append('Wednesday: 8-5<br>');
    $("#barHours").append('Thursday:8-5 <br>');
    $("#barHours").append('Friday: 8-5<br>');
    $("#barHours").append('Saturday: 10-10<br>');

    $("#barHours").collapsible(); //reinitialize the widget