How to add content to dynamically created tab with jquery

Question

How can I attach content to dynamically created tab? if I leave a div with that id there is a mess.

the third tab content apper in the first tab
after I click the checkbox it looks good but in the third click (hide and show again) the third tab content dissaper.

How can I press the checkbox to show and hide the tab and and his content dynamically?

html:

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">tab 1</a>
        </li>
        <li><a href="#tabs-2">tab 2</a>
        </li>
    </ul>
    <div id="tabs-1">
        <table class="form-table">
            <tr>
                <th scope="row">
                    <label for="dp_add_license">Add tab</label>
                </th>
                <td>
                    <input type="checkbox" id="dp_add_license" name="dp_add_license" value="1"
                    />
                </td>
            </tr>
        </table>
    </div>
    <div id="tabs-2">
        <p>tab  2 content.</p>
    </div>
    <div id="tabs-3">
        <p>tab 3 content.</p>
    </div>
</div>

jquery:

 $(document).ready(function() {
    $("#tabs").tabs();
      $('#dp_add_license').click(function() {
          if ($(this).is(':checked')) {
              $("#tabs").tabs("add", '#tabs-3', "tab 3");
          } else {
              $("#tabs").tabs("remove", '#tabs-3');
          }
      });
});

You can use jquery .append function to dynamically add tab.

Devang Rathod
– Devang Rathod

2013-02-12 10:21:27 +00:00
Commented Feb 12, 2013 at 10:21 — Devang Rathod
– Devang Rathod, Commented Feb 12, 2013 at 10:21

Jai · Accepted Answer · 2013-02-12 10:20:39Z

2

Style the id="tabs-3" to display:none;: http://jsfiddle.net/dSxby/1/

<div id="tabs-3" style='display:none;'>
    <p>tab 3 content.</p>
</div>

answered Feb 12, 2013 at 10:20

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dipesh Parmar Over a year ago

faster answer...just writing it.

Yehuda Hassine Over a year ago

thanks but it doesn;t work with a few more clicks on the checkbox as i sad before tab 3 content dissaper

Collectives™ on Stack Overflow

How to add content to dynamically created tab with jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related