Udit Gupta Udit Gupta - 7 months ago 26
PHP Question

Add content to jQuery accordion section dynamically

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) ..

enter image description here

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 :-

enter image description here

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.

enter image description here

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

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 );
})
Comments