Question

I have some problem with JQuery accordion.
I want to create “dynamic” accordion (to add new item by “addBtn”‘s click),
a new item is created, but toggle does not apply (apply first item only)

HTML

<div id="accordion">

        <div id="aE">
                <div id="aT" class="aT_val"> 
                        <h3></h3>
                </div>
                <div id="aC" class="aC_val">
                        <p></p>
                </div>
        </div>

</div>

JS

var conTit = 'title';
var conCont = 'content';

var count = 0;

$('.aC_val').hide();

$('.aT_val').toggle(
    function() {
        $(this).next('.aC_val').show();
    },
    function() {
        $(this).next('.aC_val').hide();
    }
);

$('#addBtn').click(function() {
        count++;

        $('#accordion').append('<div id="aE' + count + '"><div id="aT' + count + '" class="aT_val"><h3>' + conTit + '</h3></div><div id="aC' + count + '" class="aC_val"><p>' + conCont + '</p></div></div>');

Where is bug, colleagues?

Answer 1

For dynamically generated elements, events should be delegated, you can use the on method:

$(document).on('click', '.aT_val', function(){
     $(this).next().toggle();
})

Note that toggle event is deprecated.