[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 406
  • Last Modified:

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,

<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>

Open in new window

0
1Cougar
Asked:
1Cougar
  • 6
  • 2
  • 2
1 Solution
 
Jagadishwor DulalBraces MediaCommented:
It's seem ok, again What's about using double quotes like:
<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>

Open in new window


Where is the exact problem it may be in your script?? You have separate sections in div only.
0
 
1CougarAuthor Commented:
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.

??
0
 
Jagadishwor DulalBraces MediaCommented:
But how can we explain what is your script??
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
1CougarAuthor Commented:
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();
0
 
Julian HansenCommented:
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.
0
 
1CougarAuthor Commented:
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();
	
}

Open in new window

0
 
Julian HansenCommented:
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?
0
 
1CougarAuthor Commented:
can I send you a private link?
0
 
1CougarAuthor Commented:
Hello,

I solved the issue.  It had to do with appending the images in the HTML.  I don't know exactly why this caused problems but once I changed the way this was done, it works.

Thanks so much!

Cheers!
0
 
1CougarAuthor Commented:
The solution was to modify the existing code
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

  • 6
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now