Hi.
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.
Hi.
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.
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.
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!