カラーボックス内に JQuery アコーディオンがあります。簡単なリンクからアコーディオン/カラーボックスを起動できます (「href」として指定されたアコーディオン要素の ID を持つ HTML アンカー タグを使用)。
ただし、これを遅らせて、最初に JQuery/AJAX を使用してサーバー側ハンドラーを呼び出す必要があります (ボタンのクリックから)。次に、JQuery Accordion/Colorbox を起動する必要があります。
JQuery関数からアコーディオン/カラーボックスを起動する方法がいくつかあるはずです。アンカータグからこれを起動するために私が使用している手法は次のとおりです: http://jsfiddle.net/GLWB6/
<script type="text/javascript">
$(function (){
$(function () {
$("#accordion").accordion({
heightStyle: 'content',
collapsible: true,
active: 0,
activate: function (event, ui) {
$.colorbox.resize();
}
});
});
$(".inline").colorbox({
inline: true,
innerWidth: '400px',
innerHeight: '400px',
scrolling: false,
});
});
<p><a class='inline' href="#accordion">Launch Accordion/Colorbox</a></p>
<div style="display:none">
<div id="accordion">
<h3>Step 2: Enter your information</h3>
<div>
<p>The input fields will go here</p>
</div>
<h3>Step 3: Thank you!</h3>
<div>
<p>The confirmation message, with the localize business information will go here</p>
<ul>
<li>Title</li>
<li>Address/Phone</li>
<li>Link to Web Site</li>
</ul>
</div>
</div>
目標は、サーバー側ハンドラーが JQuery/AJAX 呼び出しを介して呼び出された後に、カラーボックス/アコーディオンを起動することです。
$.ajax({
type: "Post",
url: "/handlers/getCustomData.ashx",
data: {
custID: custID.value
},
dataType: "json",
success: function (response) {
//Launch colorbox/accordion, here }
})