1Cougar
asked on
JQUERY UI Accordion issue
Hello,
I am trying to use the JQuery Accordion and I can't seem to get it to work properly with the HTML which I *think* is correct. HTML is here. Instead of two accordion panels "Section 1" and "Section 2", I get 3 panels. I think all the "divs" are closed so I can't figure out why this isn't displaying properly.
Thanks for any help!
Cheers,
I am trying to use the JQuery Accordion and I can't seem to get it to work properly with the HTML which I *think* is correct. HTML is here. Instead of two accordion panels "Section 1" and "Section 2", I get 3 panels. I think all the "divs" are closed so I can't figure out why this isn't displaying properly.
Thanks for any help!
Cheers,
<h3> Section1</h3>
<div>
<div>
<div style='width:100%; overflow:hidden;'>
<div id='myPic-0-0' style='width:50px; height:50px; float:left; '></div>
<div style='margin-left:65px; margin-top:0px;width:500px; text-align:left; font-family:Verdana, Geneva, sans-serif; padding-left:5px; font-size:12px;'>This is a test message</div>
</div>
<div style='width:100%; overflow:hidden;'></div>
<div style='width:100%; overflow:hidden;'>
<div style='width:60px; height:10px; float:left;'></div>
<div style='margin-left:65px; margin-top:0px;width:500px; text-align:left; font-family:Verdana, Geneva, sans-serif; padding-left:5px; color:#666; font-style:italic; font-size:10px;padding-left:5px;'>23/04/2013</div>
</div>
<div style='width:100%; overflow:hidden;'>
<div style='width:60px; height:10px; float:left;'></div>
<div style='height:30px;'></div>
</div>
</div>
<div>
<div style='width:100%; overflow:hidden; margin-left:40px;'>
<div id='myPic-0-1' style='width:50px; height:50px; float:left; '></div>
<div style='margin-left:65px; margin-top:0px;width:500px; text-align:left; font-family:Verdana, Geneva, sans-serif; padding-left:5px; font-size:12px;'>OK, we got it</div>
</div>
<div style='width:100%; overflow:hidden;'></div>
<div style='width:100%; overflow:hidden;'>
<div style='width:60px; height:10px; float:left;'></div>
<div style='margin-left:65px; margin-top:0px;width:500px; text-align:left; font-family:Verdana, Geneva, sans-serif; padding-left:5px; color:#666; font-style:italic; font-size:10px; padding-left:45px;'>24/04/2013</div>
</div>
<div style='width:100%; overflow:hidden;'>
<div style='width:60px; height:10px; float:left;'></div>
<div style='height:30px;'></div>
</div>
</div>
</div>
<h3> Section 2</h3>
<div>
<div>
<div style='border-top:2px solid gray; width:100%; overflow:hidden; padding-top: 10px; margin: 2px 0px 0px 0px;'>
<div id='myPic-1-0' style='width:50px; height:50px; float:left; '></div>
<div style='margin-left:65px; margin-top:0px;width:500px; text-align:left; font-family:Verdana, Geneva, sans-serif; padding-left:5px; font-size:12px;'>This is test 2</div>
</div>
<div style='width:100%; overflow:hidden;'></div>
<div style='width:100%; overflow:hidden;'>
<div style='width:60px; height:10px; float:left;'></div>
<div style='margin-left:65px; margin-top:0px;width:500px; text-align:left; font-family:Verdana, Geneva, sans-serif; padding-left:5px; color:#666; font-style:italic; font-size:10px;padding-left:5px;'>24/04/2013</div>
</div>
<div style='width:100%; overflow:hidden;'>
<div style='width:60px; height:10px; float:left;'></div>
<div style='height:30px;'></div>
</div>
</div>
<div>
<div style='width:100%; overflow:hidden; margin-left:40px;'>
<div id='myPic-1-1' style='width:50px; height:50px; float:left; '></div>
<div style='margin-left:65px; margin-top:0px;width:500px; text-align:left; font-family:Verdana, Geneva, sans-serif; padding-left:5px; font-size:12px;'>My next reply</div>
</div>
<div style='width:100%; overflow:hidden;'></div>
<div style='width:100%; overflow:hidden;'>
<div style='width:60px; height:10px; float:left;'></div>
<div style='margin-left:65px; margin-top:0px;width:500px; text-align:left; font-family:Verdana, Geneva, sans-serif; padding-left:5px; color:#666; font-style:italic; font-size:10px; padding-left:45px;'>25/04/2013</div>
</div>
<div style='width:100%; overflow:hidden;'>
<div style='width:60px; height:10px; float:left;'></div>
<div style='height:30px;'></div>
</div>
</div>
</div>ASKER
I can't use double quotes because it is built and inserted appended to the "accordion" div via jquery append.
The HTML shows up as it should but instead of just 2 panels, there are 3. One panel stops after the date and before the div with "OK, we got it." and then the next panel stops AFTER the h3 "Section 2". The 3rd panel starts with the divider line and includes the two comments.
??
The HTML shows up as it should but instead of just 2 panels, there are 3. One panel stops after the date and before the div with "OK, we got it." and then the next panel stops AFTER the h3 "Section 2". The 3rd panel starts with the divider line and includes the two comments.
??
But how can we explain what is your script??
ASKER
The HTML I pasted is an echo of the HTML just before it is appended to the div with Jquery append and before the accordion is initialized with $("#accordion").accordion(
You have
$("#accordion").accordion(
But in your code you don't show the id="accordion" element.
Also can you show the JQuery that you are using to initialise.
Or a link to the problem.
Posting some of the code does not help us if that is not where the problem is.
$("#accordion").accordion(
But in your code you don't show the id="accordion" element.
Also can you show the JQuery that you are using to initialise.
Or a link to the problem.
Posting some of the code does not help us if that is not where the problem is.
ASKER
Here is a snippet of the code--would this be enough?
if(what==1){
myHTML = "<div id='accordion'></div>";
$("#fifth").append (myHTML);
myHTML = "";
myHTML1 = "";
$.getJSON(url, function(result){
for (var i = 0; i < result.data.length; i++) {
for (var j = 0; j < result.data[i].Messages.length; j++) {
var myAvatarLink = "http://www.mywebsite.com/UserAvatars/"+result.data[i].Messages[j].avatar;
var myComment = result.data[i].Messages[j].message;
var myDate = result.data[i].Messages[j].msgDate;
if (j==0) {
//myHTML="<h3> Section1</h3><div>";
if(i==0){
myHTML = "<h3> Section1</h3><div><div><div style='width:100%; overflow:hidden;'><div id='myPic-"+ i + '-' +j+"' style='width:50px; height:50px; float:left; '></div><div style='margin-left:65px; margin-top:0px;width:500px; text-align:left; font-family:Verdana, Geneva, sans-serif; padding-left:5px; font-size:12px;'>"+myComment+"</div></div><div style='width:100%; overflow:hidden;'></div><div style='width:100%; overflow:hidden;'><div style='width:60px; height:10px; float:left;'></div><div style='margin-left:65px; margin-top:0px;width:500px; text-align:left; font-family:Verdana, Geneva, sans-serif; padding-left:5px; color:#666; font-style:italic; font-size:10px;padding-left:5px;'>"+myDate+"</div></div><div style='width:100%; overflow:hidden;'><div style='width:60px; height:10px; float:left;'></div><div style='height:30px;'></div>";
} else {
myHTML = "</div></div><h3> Section 2</h3><div><div><div style='border-top:2px solid gray; width:100%; overflow:hidden; padding-top: 10px; margin: 2px 0px 0px 0px;'><div id='myPic-"+ i + '-' +j+"' style='width:50px; height:50px; float:left; '></div><div style='margin-left:65px; margin-top:0px;width:500px; text-align:left; font-family:Verdana, Geneva, sans-serif; padding-left:5px; font-size:12px;'>"+myComment+"</div></div><div style='width:100%; overflow:hidden;'></div><div style='width:100%; overflow:hidden;'><div style='width:60px; height:10px; float:left;'></div><div style='margin-left:65px; margin-top:0px;width:500px; text-align:left; font-family:Verdana, Geneva, sans-serif; padding-left:5px; color:#666; font-style:italic; font-size:10px;padding-left:5px;'>"+myDate+"</div></div><div style='width:100%; overflow:hidden;'><div style='width:60px; height:10px; float:left;'></div><div style='height:30px;'></div>";
}
} else {
myHTML = "</div></div><div><div style='width:100%; overflow:hidden; margin-left:40px;'><div id='myPic-"+ i + '-' +j+"' style='width:50px; height:50px; float:left; '></div><div style='margin-left:65px; margin-top:0px;width:500px; text-align:left; font-family:Verdana, Geneva, sans-serif; padding-left:5px; font-size:12px;'>"+myComment+"</div></div><div style='width:100%; overflow:hidden;'></div><div style='width:100%; overflow:hidden;'><div style='width:60px; height:10px; float:left;'></div><div style='margin-left:65px; margin-top:0px;width:500px; text-align:left; font-family:Verdana, Geneva, sans-serif; padding-left:5px; color:#666; font-style:italic; font-size:10px; padding-left:45px;'>"+myDate+"</div></div><div style='width:100%; overflow:hidden;'><div style='width:60px; height:10px; float:left;'></div><div style='height:30px;'></div></div>";
}
myHTML = myHTML+"</div>";
myHTML1 = myHTML1+myHTML;
$("#accordion").append (myHTML);
$("#myPic-" + i + '-' +j).append("<img src='"+myAvatarLink+"' height='50' width='50'/>");
myHTML="";
}
}
myHTML="</div></div>";
myHTML1=myHTML1 + myHTML;
alert(myHTML1);
$("#accordion").append (myHTML);
$("#accordion").accordion();
return false;});
}
$("#fifth").show();
}
Wrapping your original post in <div id="accordian"> and binding JQueryUI accordian to this seems to work - only shows two items
Do you have a link we can look at - a link?
Do you have a link we can look at - a link?
ASKER
can I send you a private link?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
The solution was to modify the existing code
Open in new window
Where is the exact problem it may be in your script?? You have separate sections in div only.