JSFiddle - React, Tailwind, and code Playground

by friek2k

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.0.min.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/themes/smoothness/jquery-ui.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/jquery-ui.min.js"></script>
<button id="refresh">Refresh</button>
<div id="accordion">
     <h3 id='first'>First header</h3>

    <div id="content_first">First content panel</div>
     <h3 id="second">Second header</h3>

    <div id="content_second">Second content panel</div>
     <h3>ycyxcyxcxyc</h3>

    <div>yxcxyc</div>
</div>

JavaScript

var navMenu = $('#accordion');

$('#refresh').button();
$('#refresh').on('click', function (event) {
    event.preventDefault();

    navMenu.append('<h3>xx</h3><div>xxx</div>');

    navMenu.accordion('refresh');
    navMenu.find('h3[id="first"]').remove();
    navMenu.find('div[id="content_first"]').remove();

    navMenu.find('div[id="content_second"]').html('<div>dfdsfsdfsdf</div>');

    navMenu.accordion('refresh');

});

navMenu.accordion({
    icons: false,
    heightStyle: 'fill'
});