JQuery Accordion: how to embedded it into a dialog

Question

I want to design a dialog box that contains an accordion with 3 sections, does anyone knows how to achieve this?. I'm trying with JQuery accordion example but still not success on it. I appreciated your ideas around this.

Answer 1

check out this link, about half way down the page is a good example

Answer 2

The easy way

$('#someDiv').accordion().dialog();

So for a three item section

<div id="someDiv">
  <h3><a href="#">Section 1</a></h3>
  <div>Section 1 content</div>
  <h3><a href="#">Section 2</a></h3>
  <div>Section 2 content</div>
  <h3><a href="#">Section 3</a></h3>
  <div>Section 3 content</div>
</div>

You'll probably want to customize.

$('#someDiv')
  .accordion({
    active: 2,
    collapsible: true
  })
  .dialog({
    width: 500,
    height: 350,
    title: 'Some title'
  });

Good luck!

Answer 3

If you're trying to embed it in a popup alert() box, you cannot do so. Your best bet is to create your own modal popup.

Using jQuery UI's dialog http://jqueryui.com/demos/dialog/ is a good base, with lots of online documentation and use, but you may just want to create an overlay on your own. This just means to create a DIV you place absolutely, with jQuery, over everything else.

$("body").append("<div id='modal'>All of your markup</div>");

with CSS for the modal window in your stylesheet something like

#modal {
  position:absolute; /* could be 'fixed', but then you have to deal with browsers */
  top:10%;
  left:25%;
  width:50%;
  height:500px;
  overflow:auto;
}

and so on.