Accordion Jquery руйнуються наClick - javascript, jquery, html

У мене є гармошка, при натисканні якої я хочу, щоб гармошка повинна розвалитися UP, тепер це руйнується вниз. Будь-яка допомога. Дивіться мій код нижче: -

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function () {
$("#accordion").accordion({
header: "h3",
collapsible: true,
active: false
});
});
</script>

Також дивіться HTML код для того ж: -

 <div id="accordion">
<h3>Section 4</h3>
<div>
<p>
Cras dictum. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
mauris vel est.
</p>
<p>
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos.
</p>
</div>
</div>
</div>

Відповіді:

міг просто обертати їх css

.accordion{transform:rotate(180deg);}
.accordion h3,.accordion div{transform:rotate(180deg);}

jsfiddle