[jQuery] Dynamic Accordion???
Hello,
I'm a kinda a n00b when it comes to javascript and jquery, (im a php
guy). This is what im trying to do:
I am loading points on a google map, from a mysql database.
For each point, i want to have a header on an Accordion header.
When you click a header, it will drop down the accordion, and select
the point in the gmap..
I have the gmap stuff done. And the clicking a link to open the gmap
point.
I need to get the accordion stuff done now.
-------- What im doing ------------
Upon every point found in the database I call a function createMarker
(point, name, html, color, type, iconImage, iconShadow, cid)
With this, i assign a variable side_bar_html:
side_bar_html += '<div>
<h3><a href="javascript:myclick(' + i
+ ', ' + cid + ')">' + name + '</a></h3>
<div> Info on point ' + name + '
</div>';
Later, i put it on the page with this:
var side_bar_html_top, side_bar_html_bottom, side_bar_full;
side_bar_html_top = '<div id="accordion">';
side_bar_html_bottom = '<div>';
side_bar_full += side_bar_html_top;
side_bar_full += side_bar_html;
side_bar_full += side_bar_html_bottom;
document.getElementById("side_bar").innerHTML = side_bar_full;
Then on my page i have:
<p id="side_bar">
----------------------------------------- Hoping to get something
like this, inside the P tag ------------------------------
<div id="accordion">
<div>
<h3><a href="javascript:myclick(1,200)">Point A</a></h3>
<div>Info on point A</div>
</div>
<div>
<h3><a href="javascript:myclick(1,201)">Point B</a></h3>
<div>Info on point B</div>
</div>
<div>
<h3><a href="javascript:myclick(1,202)">Point C</a></h3>
<div>Info on point C</div>
</div>
</div>
All I'm getting is the text. No Accordion styling is loading. I have
another accordion on the page, to make sure the accordion code is
working, and it is. But just not for my code. Any ideas??