ansaurus

Question

Answer 1

+2 A:

You need a few changes here:

When calling .append() you want to append complete elements, you're appending DOM elements not pieces...so you want to append one complete chunk of HTML like this:

  .append("<ul> \
           <li><a href='#tabs-1'>First</a></li> \
           <li><a href='#tabs-2'>Second</a></li> \
           <li><a href='#tabs-3'>Third</a></li> \
           </ul> \
           <div id='tabs-1'><h2>First</h2><p>TEST</p></div> \
           <div id='tabs-2'><h2>Second</h2><p>TEST</p></div> \
           <div id='tabs-3'><h2>Third</h2><p>TEST</p></div>")

If you're appending you want to call .empty() first, or don't use .append() and use .html() instead, like this:
```
  .html("<ul> \
         ....
         <div id='tabs-3'><h2>Third</h2><p>TEST</p></div>")
```
You need to create the tabs widget after the elements are created by calling .tabs() on $("#tabs") after the setting the content with .html() call above.

You may want to play with dimensions and such, but here's a demo of your current code/markup with the above changes, working, and you can see/edit the code here.

Nick Craver 2010-09-25 15:05:43

in that demo,the first time it works, then if i click the second point, it doesnt work, will .empty() do the trick?

user1111111 2010-09-29 01:20:18

@sam - Oops good catch, you need to destroy the previous widget, I updated both demos so you can see how to do this.

Nick Craver 2010-09-29 01:25:38

ansaurus

tags:

views:

answers:

tabbed jquery div in google maps?

related questions