Hi there,
I would like dynamically to add one accordion
Here is a simple example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery UI Accordion - Customize icons</title>
<script type="text/javascript" src="#IMAGE_PREFIX#libraries/jquery-ui/1.8/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="#IMAGE_PREFIX#libraries/jquery-ui/1.8/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="#IMAGE_PREFIX#libraries/jquery-ui/1.8/ui/jquery.ui.accordion.js"></script>
<script type="text/javascript" src="#IMAGE_PREFIX#libraries/jquery-ui/1.8/ui/jquery.ui.button.js"></script>
<script type="text/javascript">
$(function() {
var icons = {
header: "ui-icon-circle-arrow-e",
headerSelected: "ui-icon-circle-arrow-s"
};
$("#accordion").accordion({
icons: icons
});
$("#toggle").button().toggle(function() {
$("#accordion").accordion("option", "icons", false);
}, function() {
$("#accordion").accordion("option", "icons", icons);
});
});
</script>
</head>
<body>
<div class="demo">
<div id="accordion">
<h3<a href="#" >Section 1</a></h3>
<div>
<p> Section 1</p>
</div>
<h3<a href="#" >Section 2</a></h3>
<div>
<p> Section 2</p>
</div>
<h3<a href="#" >Section 3</a></h3>
<div>
<p> Section 3</p>
</div>
<h3<a href="#" >Section 4</a></h3>
<div>
<p> Section 4</p>
</div>
<h3<a href="#" >Section 5</a></h3>
<div>
<p> Section 5</p>
</div>
<h3<a href="#" >Section 6</a></h3>
<div>
<p> Section 6</p>
</div>
</div>
<button id="toggle">Toggle icons</button>
</div><!-- End demo -->
<div class="demo-description">
<p>Customize the header icons with the <code>icons</code> option, which accepts classes for the header's default and selected (open) state. Use any class from the UI CSS framework, or create custom classes with background images.</p>
</div><!-- End demo-description -->
</body>
</html>
When I press a buton, I would like to add one calling a function like this:
function AddOneAccordion(Label)
{
var Acord = document.getElementById("accordion");
var MyH = document.createElement('h3');
var MyLk = document.createElement('a');
MyLk.href = '#';
MyLk.innerHTML = Label;
MyH.appendChild (MyLk);
Acord.appendChild (MyH);
}
Unfortunatly, it's not working. I don't know why.
Could anyone help?
Many thanks
jko
Edited by: user617942 on Aug 18, 2010 7:31 AM