index.html ページがあります。ビューの詳細ハイパーリンクが 1 つあり、同じページ自体 (HTML、JS コード) にアコーディオン機能を実装したところ、正常に動作しました。
しかし、私の質問はビューの詳細リンクのONCLICKです。カスタムモーダルポップアップウィンドウを1つ起動しました。そのアコーディオン機能をモーダル ウィンドウ内に統合したいと考えています。
この方法で、アコーディオン機能を html に取得します
var buildHTML = $('#dealerdemopopup').html();
$("#multiSubModal").append(buildHTML);
アコーディオンの html コードは完全にモーダル ウィンドウに入りますが、 accordion/toggle
モーダル内で機能が動作しません。
HTMLを取得する方法が正しいことを知りたい..
誰かがこれにできるだけ早く対処するのを手伝ってください。事前の感謝
This is accordion/Toggle HTML code in index.html file
------------------------------------------------------
<!-- Dealer Demo HTML START-->
<div class="dealerdemopopup" id="dealerdemopopup" style="display:block;">
<div class="dealer_demo" id="dealer_demo">
<div class="dealer_accordion">
<div class="expand"><a href="javascript:void(0);" class="packageTitle"><Package 01></a></div>
<div class="collapse">
<div class="accCntnt">
<p class="packageContent">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
<div style="height:5px;"></div>
<div class="expand"><a href="javascript:void(0);" class="packageTitle"><Package 02></a></div>
<div class="collapse">
<div class="accCntnt">
<p class="packageContent">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
<div style="height:5px;"></div>
<div class="expand"><a href="javascript:void(0);" class="packageTitle"><Package 03></a></div>
<div class="collapse">
<div class="accCntnt">
<p class="packageContent">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Dealer Demo HTML END-->
This is accordion/Toggle JS code in index.html file
---------------------------------------------------
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$('.dealer_demo div.dealer_accordion:eq(0)').find('div.expand:eq(0)').addClass('openAd').end()
.find('div.collapse:gt(0)').hide().end()
.find('div.expand').click(function() {
$(this).toggleClass('openAd').siblings().removeClass('openAd').end()
.next('div.collapse').slideToggle().siblings('div.collapse:visible').slideUp();
return false;
});
});
</script>
The following JS code in other js file to create custom modal popup window
--------------------------------------------------------------------------
function dealerdemoPopup()
{
$("#modalHolder .modalContent #modalSpinner").remove();
$("#multiSubModal").show();
$("#multiSubModal").openModal();
$("#multiSubModal").width(450);
$("#multiSubModal .subTableDiv").hide();
Cvp.modal.elem.sizeModal();
var popTitle = '<h3>Package & Features</h3>';
var buildHTML = $('#dealerdemopopup').html();
var buildClosebtn = '<div class="buttons"><a class="button2" style="float:right;" id="btnMulClose" href="javascript:void(0)"><span>Close</span></a></div>';
$("#multiSubModal").append(popTitle, buildHTML, buildClosebtn);
$("#btnMulClose").bind("click",function(){
Cvp.modal.elem.closeModal();
$("#multiSubModal").hide();
});
}