Question

I would like to add dynamic content to a JQuery Accordion container. My code almost works, but there is a problem.

I cannot figure out how to get the first container to recognize the new images. It acts like there is nothing in the container. I suspect this has to do with loading the images with Javascript, but I am no expert! My guess is something’s out of order. All of the buttons still function, and the accordion acts as it should in all the other areas. I have tried setting the different parameters, such as autoheight, clearStyle, etc.. Nothing works for me. Here’s the trimmed goods:

HTML

.........

<section id="rightMenu">
    <div id="addHolder">
        <h3 class="topHeader"><a href="#">Quick Pick</a></h3>
            <ul id="quickPick"></ul>

        <h3><a href="#">Notes</a></h3>
        <div>
            <p>
             ......
            </p>
        </div>
        <h3><a href="#">Quiz</a></h3>

        <div>
            <p>
             .....
            </p>
        </div>
        <h3><a href="#">Image Options</a></h3>

        <div></div>
.........

<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery-ui-1.8.21.custom.min.js"></script>
<script src="js/modernizr.js"></script>
<script src="js/modUI.js"></script>
<script src="js/imageProvider.js"></script>
<script>
window.onload = imageProvider.initLinks;
$(document).ready(modUI.modAccord);
</script>

JS – modUI.js

var modUI = {
init: function(){
},
modAccord: function(){
    $( "#addHolder" ).accordion({
        autoHeight: true,
        navigation: true,
        clearStyle: true
    });
}
};

JS – imageProvider.js

var imageProvider = {

thisPic:0,

initLinks:function () {
    imageProvider.imageList(14, 2);
    document.getElementById("nextPic").onclick = imageProvider.processNext;
    document.getElementById("prevPic").onclick = imageProvider.processPrev;

},

   ....

multiDimensionArray:function (rows, columns) {
    var myArray = new Array(rows);
    for (var i = 0; i < rows; i++) {
        myArray[i] = new Array(columns);
        for (var j = 0; j < columns; j++) {
            myArray[i][j] = "";
        }
    }
    return (myArray);
},

  .....

imageList:function (qty, data) {
    var imageData = imageProvider.multiDimensionArray(qty, data);
    var filePath = './images/mods/angiograph/head/';
    var imgPrefix = 'Ag';
    var imageType = '.jpg';


    for (var i = 0; i < qty; i++) {
        imageData[i][1] = filePath + imgPrefix + (i + 1) + imageType;
    }

   for (var j = 0; j<imageData.length; j++){
            $("<li>", { html:'<img src="' + imageData[j][1] + '" width="75" height="75"/>'}).appendTo("#quickPick");
    }

}
 };

CSS

#mainSection #rightMenu {
position: absolute;
width: 15%;
height: 90%;
left:65%;
top: 5%;
background-color: #d3cbbd;

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

-webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, .75);
-moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, .75);
box-shadow: 0px 0px 15px rgba(0, 0, 0, .75);
}

#mainSection #imageHolder img{
position: absolute;
width: 63%;
height: 70%;
left: 15%;
top: 15%;
}

#mainSection #rightMenu #addHolder{
position: absolute;
width: 100%;
height: 100%;
left:0;
top: 0;
}

#mainSection #rightMenu #addHolder h3.topHeader {

position: relative;
top: -1px;
-webkit-border-radius: 10px;

-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;

border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

#mainSection #rightMenu #addHolder p{
font-size: 1.1em;
font-family: verdana, sans-serif;
}

#mainSection #rightMenu #addHolder #quickPick{
position: absolute;
list-style: none;
top: 6em;
left: .1em;
height: 30%;
}

#mainSection #rightMenu #addHolder li{
display: inline;
float: left;
margin-left: .2em;
}

.ui-accordion { width: 100%; }
.ui-accordion .ui-accordion-header {
cursor: pointer;
position: relative;
margin-top: 1px;
background-color: #456f74;

}
.ui-accordion .ui-accordion-li-fix { display: inline; }
.ui-accordion .ui-accordion-header-active {
border-bottom: 0 !important;
background-color: #eb5937;
}
.ui-accordion .ui-accordion-header a {
display: block;
font-family: verdana, sans-serif;
font-size: 1em;
padding: .65em .65em .65em 1em;
text-decoration: none;
color: #f5f5f5;

}
.ui-accordion-icons .ui-accordion-header a {
padding-left: .5em;
}
.ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; }
.ui-accordion .ui-accordion-content {
padding: 1em 1em;
border-top: 0;
margin-top: -25px;
position: relative;
top: 0;
overflow: auto;
display: inline-block;

}

Answer 1

Shouldn’t <ul id="quickPick"></ul> really be <div><ul id="quickPick"></ul></div>?