I am using a Spry tabbed panel for an HTML base site.
I want to open fancybox, by clicking on a tab (four tabs in total). Once the user fills the fancybox form, only that particular tab panel content should be open.
Is this possible? Below is my code.
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Content 1</div>
<div class="TabbedPanelsContent">Content 2</div>
<div class="TabbedPanelsContent">Content 3</div>
<div class="TabbedPanelsContent">Content 4</div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
I want to a form to be filled on tab #2 in fancy box. Once user fill that form and submit successfully after that only tab panel content should be opened.
As you have not posted any code ..I can tell only logic .. U can get the selectedtab index by
var index= ($tabs.tabs('option', 'selected'));
and then you compare your index with the fetched index and if it matches then open your fancybox by
$(".fancy").fancybox().trigger('click');
and you can write your own function on sumbit/close of fancybox
$("<YOUR-SELECTOR>").fancybox({
onClosed: function() {
// your own functions
});
});