Was in need for such a code but only found scripts and pages from Google with static usage. I am sure there must be source samples for adding tabs dynamically when required, but just didn’t find any at this point of time.. So here is my source sample for that..
So i m using existing tab logic from Tab Content Script v2.0. and with the help of this tutorial to add/remove html elements dynamically. The code is as follows
<head>
<link rel=”stylesheet” type=”text/css” href=”tabcontent.css” />
<script type=”text/javascript” src=”tabcontent.js”>
/***********************************************
* Tab Content script v2.0- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
</head>
<input type=”hidden” name=”noTabs” id=”noTabs” value=”4″>
<h3>Demo #1- Basic implementation</h3>
<ul id=”countrytabs” class=”shadetabs”>
<li><a href=”#” rel=”country1″ class=”selected”>Tab 1</a></li>
<li><a href=”#” rel=”country2″>Tab 2</a></li>
<li><a href=”#” rel=”country3″>Tab 3</a></li>
<li><a href=”#” rel=”country4″>Tab 4</a></li>
</ul>
<div id=”parent” name=”parent” style=”border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px”>
<input type=”hidden” name=”noTabs” id=”noTabs” value=”4″>
<div id=”country1″ class=”tabcontent”>
Tab content 1 here<br />Tab content 1 here<br /></div>
<div id=”country2″ class=”tabcontent”>
Tab content 2 here<br />Tab content 2 here<br /></div>
<div id=”country3″ class=”tabcontent”>
Tab content 3 here<br />Tab content 3 here<br /></div>
<div id=”country4″ class=”tabcontent”>
Tab content 4 here<br />Tab content 4 here<br /></div></div>
<script type=”text/javascript”>
var countries=new ddtabcontent(“countrytabs”)
countries.setpersist(true)
countries.setselectedClassTarget(“link”) //”link” or “linkparent”
countries.init()function addTab() {
var numi = document.getElementById(‘noTabs’);
var num = (document.getElementById(‘noTabs’).value -1)+ 2;
numi.value = num;
// first add to list
var ti = document.getElementById(‘countrytabs’);
var newLi = document.createElement(‘li’);
newLi.innerHTML = ‘<a href=”#” rel=”country’+num+'”>Tab ‘+num+'</a>’
ti.appendChild(newLi);
// then add the content.
var ni = document.getElementById(‘parent’);
var newdiv = document.createElement(‘div’);
var divIdName = ‘country’+num;
newdiv.setAttribute(‘id’,divIdName);
newdiv.setAttribute(‘class’,’tabcontent’);
newdiv.innerHTML = ‘dynamically added’;
ni.appendChild(newdiv);
countries.init();
}</script>
<p><b><a href=”javascript: countries.expandit(3)”>Click here to select last tab</a></b></p>
<hr /><a href=”javascript:addTab()”>Add More Tabs</a>
———————
Hope this helps ppl who r in need of this feature..
Update: will upload an example as requested !
———————
An example/demo would be nice here. I could not understand the problem.