Question

I am using bootstrap tabs on a custom modal (my own version). The tabs open when clicked the first time the modal is opened, but no longer work the second time the modal is opened.

This is the HTML code for the tabs :

<div class="tabbable"> <!-- Only required for left/right tabs -->    
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <p>I'm in Section 1.</p>
    </div>
    <div class="tab-pane" id="tab2">
      <p>Howdy, I'm in Section 2.</p>
    </div>
  </div>
</div>

What I am doing is :

I have a button in my page, when clicked on it, a modal (like Lightbox) will open with the tabs in it.

The first time it is opened, the tabs are working fine; when tabs are clicked, respective content is displayed. But when it is closed and opened again, the tabs are not working; when the tabs are clicked, the respective data is not being displayed.

Answer 1

Here, I am dynamically adding elements to DOM, when button clicked,but I am not removing elements when CLOSE clicked, So,deleting the element after close is clicked is the solution .