Home/ Questions/Q 8523441
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T07:24:38+00:00

I can dynamically add new accordion panes, but they don’t work. Any ideas? I

  • 0

I can dynamically add new accordion panes, but they don’t work. Any ideas? I am assuming they aren’t being initialized since they are being added dynamically. They show up when I add them, they just don’t become animated.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>MLE Editor</title>
    <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>

    <link href="Styles/site.css" rel="stylesheet" type="text/css" />    

<script type="text/javascript">
    $(document).ready(function()
    {
        //Add Inactive Class To All Accordion Headers
        $('.eventHeader').toggleClass('inactive-header');

        //Set The Accordion Content Width
        var contentwidth = $('.eventHeader').width();
        $('.eventContent').css({ 'width': contentwidth });

        //Open The First Accordion Section When Page Loads
        //$('.eventHeader').first().toggleClass('active-header').toggleClass('inactive-header');
        //$('.eventContent').first().slideDown().toggleClass('open-content');

        // The Accordion Effect
        $('.eventHeader').click(function () {
            if($(this).is('.inactive-header')) {
                $('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content');
                $(this).toggleClass('active-header').toggleClass('inactive-header');
                $(this).next().slideToggle().toggleClass('open-content');
            }

            else {
                $(this).toggleClass('active-header').toggleClass('inactive-header');
                $(this).next().slideToggle().toggleClass('open-content');
            }
        });

        return false;
    });

    function addEvent() {
        var eventsContainer = document.getElementById('eventsContainer');
        var events = eventsContainer.innerHTML;
        events = events + '<h2 class="eventHeader">New event</h2><div class="eventContent"><p>Event options</p></div>';
        eventsContainer.innerHTML = events;
    }
</script>
</head>
<body>
    <form id="form1" runat="server">        
        <div id="eventOptions">
            <a href="javascript:addEvent();">Add Event</a>
            <br />
            <div id="eventsContainer"> 
            <h2 class="eventHeader">Old event</h2><div class="eventContent"><p>Event options</p></div>
            </div>
        </div>
    </form>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    to get the accordian working on the new items, simply change the click handler to:

    $(document).on('click','.eventHeader',function () {
  if($(this).is('.inactive-header')) {
    $('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content');
    $(this).toggleClass('active-header').toggleClass('inactive-header');
    $(this).next().slideToggle().toggleClass('open-content');
  }

  else {
    $(this).toggleClass('active-header').toggleClass('inactive-header');
    $(this).next().slideToggle().toggleClass('open-content');
  }
});
    • 0