views:

39

answers:

2

Not sure how to use javascript or jquery to make my divs populate with accordian style headings and content.

<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    $("#accordion").accordion(
        autoheight: false);
    });

/**       Variable

   *       variableID:String - unique string identifier for the variable
   *       name:String - plain text name
   *       description:String - description of the variable and its meaning
   *       value:Integer - current number-based value of the variable
   *       locked:Boolean - whether the variable is locked against further modification
*/       
    function loadVariables(variables) {
        if (typeof variables != "object") { alert(variables); return;}
    for (var i = 0; i < variables.length - 1; i++) {
/*  make name= <h3><a href="#">name</a></h3>
    make variableID, description, value=
    <div>
    <p>"Variable ID : " + variableID</br>
    "Description : " +description</br>
    "Initial Value : " +value</br>
    </p>
    <p>"History"</br>
    A container for updateVariable function.
    </p>*/
    }
    };

    function updateVariable(variable) {
    // make update Variable in the History box as variable values change
    // change background color and change locked icon status
    };
    </script>


</head>
<body>
<div id="accordion">
<!--- Divs Created Dynamically here ---->
</div>

</body>
</html>
A: 

Check out templates

Onkelborg
+1  A: 
// Inside the for loop, do this:
// This is the <h3> jQuery object you'll be inserting. I'm chaining the creation.
var h3 = $('<h3>').append($('<a>').attr('href', '#').text('name'))
$('#accordion').append(h3)
// This is the <div> object to be inserted into the accordion.
var div = $('<div>').append($('p').html('html inside first <p>'));
div = div.append($('p').html('html for history'))
$('#accordion').append(div)

The key here is that you can add things to the DOM with $(parent).append($('<tag-name>')). $('<tag-name>') will create a new jQuery object of that tag that is just floating. The .append(obj) method will attach the obj at the end of the parent that is calling it. So $('#accordion').append($('<h3>')) will append an open and close h3 tag at the end of #accordion.

shoebox639
This is working to build the divs but they are not accordianized.Also how would I implement a second variable in the <p> tag. I have var div = $('<div>').append($('<p>').html(variables[i].variableID)); then I would do $(parent).append($('<p>').html(variables[i].description));?
lazfish
Yup, append just puts it puts at the end of the parent. In fact I built your whole accordion on this page with the javascript console. haha. Also I'm sure why it's not making this into an accordion. I want to say that it doesn't automatically update the structure of the accordion after you call the .accordion method. You might have to populate the page and then make it into an accordion. For more info: http://docs.jquery.com/UI/Accordion
shoebox639