1. Paste this code to the head of your page.
<link href="jquery-ui-js/jquery-ui.css" rel="stylesheet">
2. Paste this code to the footer of your page.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery-ui-js/jquery-ui.js"></script>
<script>
var jQ = $.noConflict(true);
jQ(document).ready(function(){
var icons = {
header: "ui-icon-circle-arrow-e",
activeHeader: "ui-icon-circle-arrow-s"
};
var jQaccordions = jQ(".accordion").accordion({
collapsible: true,
active: false,
icons: icons,
animate: 2000,
}).on('click', function() {
jQaccordions.not(this).accordion("option", "active", false);
});
});
</script>
3. Add <h></h> element to your column
4. Add a Container element below your <h></h>
5. Now add any other content you want in this accordion to the Container.
6. Go to the column that you placed everything in and give it the class of accordion.
7. Go and grab the jquery ui files and add them to a resourses folder called jquery-ui-js