Dkouk Dkouk - 6 months ago 8
Javascript Question

Add tag to Heading and converter to tag inside List item with plugin responsiveTab

i'm using ( http://www.petelove.com/responsiveTabs/ )

and i'm try to add a HTML to list when it's load, but it's working Could someone tell me how can do that.

now when add heading, it's converter to tabs,

but i want to add tag inside heading and converter to tag inside list item but not work.



<pre>
this plugin use HTML like that :
<div class="responsive-tabs">
<h2>[...]</h2>
<div>[...]</div>
<h2>[...]</h2>
<div>[...]</div>
</div>
** then it's will converter to : **
<div class="responsive-tabs">
<ul>
<li>[content of heading]</li>
<li>[content of heading]</li>
</ul>
<div>[...]</div>
<div>[...]</div>
</div>
and i don't want to be like that, i want to be link this example :
<div class="responsive-tabs">
<ul>
<li><span>[content of heading]</span></li>
<li><span>[content of heading]</span></li>
</ul>
<div>[...]</div>
<div>[...]</div>
</div>
</pre>





Need some help.

cheers.

Answer

I've found the solution by editing the plugin Code

var $tabListItem = $('<li/>', { 
    'class': 'responsive-tabs__list__item',
	id: 'tablist' + tablistcount + '-tab' + tabcount,
	'aria-controls': 'tablist' + tablistcount +'-panel' + tabcount,
	'role': 'tab',
    tabindex: 0,
	text: $tabHeading.text() ,
    keydown: function (objEvent) {
		if (objEvent.keyCode === 13) { // if user presses 'enter'
		$tabListItem.click();
	}
},...

And i changed to be line this :

var $tabListItem = $('<li/>', { 
    'class': 'responsive-tabs__list__item',
	id: 'tablist' + tablistcount + '-tab' + tabcount,
	'aria-controls': 'tablist' + tablistcount +'-panel' + tabcount,
	'role': 'tab',
    tabindex: 0,
	html: $tabHeading.html() ,
    keydown: function (objEvent) {
		if (objEvent.keyCode === 13) { // if user presses 'enter'
		$tabListItem.click();
	}
},...

then it's give tag Span i was use inside heading at HTML LIST code.

Thanks for communication.

Comments