I need to use multiple tabSlideOUt
source one one of the pages in a similar fashion as shown in Fiddle Example
I need to toggle between tabs and only one should be open at a time
$(function () {
$('.slide-out-div').tabSlideOut({
tabHandle: '.handle', //class of the element that will be your tab
pathToTabImage: 'http://www.gac.com/upload/GAC2012/images/facebook_icon_50x50.png', //path to the image for the tab (optionaly can be set using css)
imageHeight: '50px', //height of tab image
imageWidth: '50px', //width of tab image
tabLocation: 'right', //side of screen where tab lives, top, right, bottom, or left
speed: 300, //speed of animation
action: 'click', //options: 'click' or 'hover', action to trigger animation
topPos: '50px', //position from the top
fixedPosition: false //options: true makes it stick(fixed position) on scroll
});
});
I resolved this issue by making some changes to HTML and and using updated js for slid-out. used js one that is on fiddle otherwise it might break.
http://fiddle.jshell.net/zy62umw5/1/
<div class="slide-out-div tab"> <a class="handle" href="http://link-for-non-js-users">Content</a>
<h3>Contact me</h3>
<a href="mailto:[email protected]">[email protected]</a>
<br />
<br />
<p>Thanks for checking out my jQuery plugin, I hope you find this useful.</p>
<p>This can be a form to submit feedback, or contact info</p>
</div>
<div class="slide-out-div tab2"> <a class="handle" href="http://link-for-non-js-users">Content</a>
<h3>Contact me</h3>
<a href="mailto:[email protected]">[email protected]</a>
<br />
<br />
<p>Thanks for checking out my jQuery plugin, I hope you find this useful.</p>
<p>This can be a form to submit feedback, or contact info</p>
</div>
<div class="slide-out-div tab3"> <a class="handle" href="http://link-for-non-js-users">Content</a>
<h3>Contact me</h3>
<a href="mailto:[email protected]">[email protected]</a>
<br />
<br />
<p>Thanks for checking out my jQuery plugin, I hope you find this useful.</p>
<p>This can be a form to submit feedback, or contact info</p>
</div>