Добавить содержимое в секцию аккордеона jQuery динамически

Название может предлагать намек на дубликат, но проблема, конечно же, не такова.Добавить содержимое в секцию аккордеона jQuery динамически

Если это дубликат, пожалуйста, закройте его, разместив соответствующую ссылку на проблему.

Теперь вот описание моей проблемы ->

Я создал некоторый HTML, которые выглядят, как это (Это лишь малая часть очень большого кода) ..

enter image description here

содержание Html заключаются в следующем: -

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

Теперь я также создал аккордеон, который будет отображаться при нажатии на кнопку Дополнительно радио: -

enter image description here

аккордеона Jquery код показан ниже:

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

HTML для содержания аккордеона:

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

, что мне нужно, что я хочу, чтобы отобразить тот же HTML класс Div = "s", который первоначально показывался вместо этого php требует 'common_ilayer .html ', чтобы отображаться при нажатии на слой Интернета.

Что мне нужно для достижения, это примерно так (изображение, показанное ниже) .. но без создания дублирующего узла. На первом месте php require/include похоже на работу, но это действительно создаст повторяющийся код, и сервер может запутаться при публикации, так как будет два элемента с одинаковым идентификатором.

enter image description here

Я также попробовал этот JQuery код, но это не помогло

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

Примечание: Пожалуйста, не предложить мне, чтобы добавить различные идентификаторы элементов и включить их РНР. Я хочу, чтобы одно и то же содержимое отображалось со всеми полями, аналогичными в секции интернет-слоя аккордеона, которые отображались в основном разделе инструмента.

Любая помощь приветствуется ...

Благодаря

источник

2013-04-09 Udit Gupta

может у добавить это в jsfiddle? – rab

Оставьте свой #ilayer пустым при загрузке страницы.

Перемещение div.s узел при нажатии галочки на:

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

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

источник

2013-04-09 07:17:31 LeGEC

Совершенно то, что мне нужно. Я не знал, что можно перемещать узлы ...скорее, я пытался использовать функцию 'html()', которая создавала дублирующий узел. Большое спасибо ... –

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

Может быть, я не понимаю ваш вопрос правильно, но вы хотите содержание .s в .ilayer содержания права?

источник

2013-04-09 07:11:43

Добавить содержимое в секцию аккордеона jQuery динамически

ответ

Смежные вопросы