动态地向jQuery accordion部分添加内容

Question

Title may suggest hint of a duplicate but problem is certainly not.

If it is a duplicate then please close it by posting relevant link to problem.

Now here is a description of my problem ->

I have created some html that look like this (This is just a small part of very big code) ..

Html contents are as follows : -

<div class="s">
    <div class="bmargin">
        <label for="sip" > Source IPv6 Address </label>
        <input type="text" name="sip" id="sip" required  placeholder="hello" autofocus/>
    </div>

    <div class="bmargin marginl">
        [Default : Link-layer]
    </div>

    <div class="bmargin">
        <label for="dip"> Destination IPv6 Address </label>
        <input type="text" name="dip" id="dip" placeholder="FF02::1"/>
    </div>

    <div class="bmargin marginl">
        [Default : All Node Multicat Address]
    </div>
  </div>

Now I have also created an accordion which would show up when clicking on advanced radio button :-

Accordion Jquery code is shown below :

 $(document).ready(function() {
    $("#stack").accordion({ heightStyle:"content", fillspace: true,
                                    icons: {'header': 'ui-icon-plus', 'headerSelected':    
     'ui-icon-minus'},collapsible: true, active:false});

HTML for the accordion contents :

<div class="advanced" id="stack">

<h3> <a href="#"> Network Interface Layer </a> </h3>
<div class="nlayer">
    This section is reserved for future
</div>

<h3> <a href="#" id="ilayer"> Internet Layer </a></h3>
<div class="ilayer">
<!--    <?php // require 'common_ilayer.html' ?> 
-->
</div>

<h3> <a href="#"> Transport Layer </a></h3>
<div>reserved for future</div>

<h3> <a href="#"> Application Layer </a></h3>
<div>reserved for future</div>

</div>

what I need is that I want to display same html div class="s" which was showing up initially in place of that php require 'common_ilayer.html' to appear when click on Internet layer.

What I need to achieve is something like this (Image shown below).. but without creating any duplicate node. At first place php require/include seems like working but that would indeed create duplicate code and server may become confuse on posting as there will be two elements with same ID.

I also tried this jQuery code but that did not help

 $('#ilayer').live("click",function(){
            $(".s").show();
    });

Note : Please do not suggest me to add different IDs to elements and include them by php. I want same contents to appear with all fields same in accordion Internet layer section which were appearing in basic section of tool.

Any help appreciated ...

Thanks

Answer 1

Leave your #ilayer empty on page load.

Move the div.s node when clicking on the checkboxes :

$('#basic').click(function(){
    var $div = $('div.s');
    $('#basicDialog').append( $div );
});

$('#advanced').click(function(){
    var $div = $('div.s');
    $('#ilayer').append( $div );
})