I have used SpryTabbedPanel plugin... Its working with no error..In one of tab again I want to use another verticalslider tab plugin..First I worked on verticalslider plugin separately... It worked... But when I inserted it in my first plugin its not working..The description on right side is not displaying me...Please can you tell me how to overcome this problem..Following are screenshots: my 1st working plugin, then my 2nd plugin which i want to insert in first plugin and third is when i inserted 2nd plugin in 1st...
Following is my html file:\[code\]<div id="TabbedPanels1" class="TabbedPanels"> <ul class="TabbedPanelsTabGroup"> <li id="tab1" class="TabbedPanelsTab" tabindex="0" style="font-size:20px; padding-top:12px">Features </li> <li id="tab2" class="TabbedPanelsTab" tabindex="0" style="z-index:999; font-size:20px; padding-top:12px">How to Use?</li> <li id="tab3" class="TabbedPanelsTab" tabindex="0" style="font-size:20px; padding-top:12px">TA</li> </ul> <div class="TabbedPanelsContentGroup"> <div class="TabbedPanelsContent"> <p>Text goes here</p> </div> <div class="TabbedPanelsContent"> <div id="wrapper"> <!-- Text Example --> <div name class="verticalslider" id="textExample"> <ul class="verticalslider_tabs"> <li><a href="http://stackoverflow.com/questions/15783407/#" id="a1">New Alerts</a></li> <li><a href="http://stackoverflow.com/questions/15783407/#" id="a2">My Alerts</a></li> <li><a href="http://stackoverflow.com/questions/15783407/#" id="a3">My Schedule</a></li> <li><a href="http://stackoverflow.com/questions/15783407/#" id="a4">Near Me</a></li> </ul> <ul class="verticalslider_contents"> <li> <h2>Lorem Ipsum</h2> <p>Praesent pulvinar, lorem nec ullamcorper semper, ipsum erat vestibulum lacus, in sodales lorem mi in leo. Vestibulum et rhoncus tellus. Curabitur mauris enim, vehicula sit amet euismod a, eleifend at dui. Vivamus sollicitudin, nunc pharetra porttitor lobortis, felis odio hendrerit mi, id ultricies urna enim quis lectus. Suspendisse convallis ipsum egestas velit fermentum ac volutpat dui dictum. Pellentesque sed ultrices justo. Ut lacus odio, porttitor quis tincidunt at, imperdiet vel eros. Duis ac velit neque. Integer semper egestas odio id suscipit. Maecenas eu diam in urna fringilla viverra eget sit amet ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </li> <li> <h2>Praesent Pulvinar</h2> <p>From the Spry tab on the Insert panel, choose the first item in the third group (the ... You can choose to create a horizontal or vertical menu. ... The first column is the main menu, the second column a submenu of the main menu, and so forth.From the Spry tab on the Insert panel, choose the first item in the third group (the ... You can choose to create a horizontal or vertical menu. ... The first column is the main menu, the second column a submenu of the main menu, and so forth.</p> </li> <li> <h2>Nunc Adipiscing</h2> <p>The Tabs dialog box snaps to the top of the column that includes the selection or the insertion point. To the top ... Add tabs in the paragraphs where you want to add horizontal space. (You can ... In the Tabs panel, select a tab stop on the ruler.More results for how to add third column in vertical tabbed panel In the Tabs panel, select a tab stop on the ruler.More results for how to add third column in vertical tabbed panel In the Tabs panel, select a tab stop on the ruler.More results for how to add third column in vertical tabbed panel</p> </li> <li> <h2>Praesent Dapibus</h2> <p>Adding a Tabbed Panel widget to display multiple containers on a single page ... Tabbed Panel, the second click selects the Tab Container, and the third click selects ... the Tabbed Panel widget on the page, near the top and centered vertically. .... Duplicate the existing text frame, to create a second column on the right side.Adding a Tabbed Panel widget to display multiple containers on a single page ... Tabbed Panel, the second click selects the Tab Container, and the third click selects ... the Tabbed Panel widget on the page, near the top and centered vertically. .... Duplicate the existing text frame, to create a second column on the right side.</p> </li> </ul> </div> </div> </div> <div class="TabbedPanelsContentA"> <p>Text goes here</p> </div> </div></div\[/code\]Following is CSS of VerticalSlider Tab:\[code\]@charset "utf-8";/* Container */.verticalslider {border: 1px solid #666666; overflow: hidden; width: 825px; margin: 0 auto; margin-top: 25px; height: 504px; }/* Tabs */.verticalslider_tabs {float: left;width: 250px;}.verticalslider_tabs, .verticalslider_tabs li{margin: 0px; padding: 0px;}.verticalslider_tabs li{list-style-type: none;}.verticalslider_tabs a:link, .verticalslider_tabs a:visited{display: block; width: 109px; height: 85px; padding: 35px 10px 6px 10px; background-color: #eeeeee;font-family: Georgia, "Times New Roman", Times, serif; font-size: 20px; font-weight: bold;color: #333333; border-right: 1px solid #666666; border-top: 1px solid #666666; text-decoration: none;}.verticalslider_tabs li:first-child a:link, .verticalslider_tabs li:first-child a:visited{border-top: none; height: 85px;}.verticalslider_tabs .activeTab a:link, .verticalslider_tabs .activeTab a:visited{background: #ffffff; border-right: 1px solid #ffffff;}.verticalslider_tabs .activeTab a:hover, .verticalslider_tabs .activeTab a:active{background: #ffffff; border-right: 1px solid #ffffff;}.verticalslider .arrow {width: 27px; height: 60px; position: absolute; z-index: 1000; margin-left: 250px; margin-top: -55px; }/* Contents */.verticalslider_contents{float: left;width: 500px;display: inline; margin: 0px; padding: 0px;}.verticalslider_contents li{margin-left: -120px; padding: 0px;width: 695px;overflow: hidden; padding: 0px;display: none;position: absolute;list-style-type: none; }.verticalslider_contents li h2{font-family: Georgia, "Times New Roman", Times, serif, font-size: 15px; color: #333333;margin: 5px 20px; padding: 0px;}.verticalslider_contents li p{ margin: 5px 20px; padding: 0px;color: #333333;font-family: Tahoma, Geneva, sans-serif; font-size: 13px; }.verticalslider_contents .activeContent{display: inline;}/* Play Pause*/.verticalslider .playPause a{display:block;width: 60px;height: 60px;position:absolute;z-index:50;}.verticalslider .pause a:hover,.verticalslider .pause a:active,.verticalslider .play a:hover,.verticalslider .play a:active{background-position:0px -60px;border-bottom: none;}/* Float Right Styles .verticalslider_tabs {float: right;}.verticalslider .arrow {margin-left: -27px; background: url(../images/arrow-right.png); }.verticalslider_tabs a:link, .verticalslider_tabs a:visited{border-left: 1px solid #666666; border-right: none;}.verticalslider_tabs .activeTab a:link, .verticalslider_tabs .activeTab a:visited{border-left: 1px solid #ffffff;}.verticalslider_tabs .activeTab a:hover, .verticalslider_tabs .activeTab a:active{border-left: 1px solid #ffffff;}*/\[/code\]Following is CSS for SpryTabbedPanel:\[code\].TabbedPanelsContent@charset "UTF-8";.TabbedPanels { margin: 0px; padding: 0px; float: left; clear: none; width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/}.TabbedPanelsTabGroup { margin: 0px; padding: 0px; margin:0 0 0 10px;}.TabbedPanelsTab { position: relative; float: left; margin: 0px 0px 0px 0px; font: bold 40px centaur, Helvetica, sans-serif; background:url(../res/tab.png) no-repeat left top; height:50px; width:280px; list-style: none; color:#000; -moz-user-select: none; -khtml-user-select: none; cursor: pointer; line-height:38px; text-align:center;}.TabbedPanelsTabHover { background:url(../res/tab_active.png) no-repeat left top; color:#000;}.TabbedPanelsTabSelected { background:url(../res/tab_active.png) no-repeat left top; width:275px !important; z-index:9999 !important; color:rgb(43,120,228);}.TabbedPanelsTab a { color: black; text-decoration: none;}.TabbedPanelsContentGroup { clear: both; /*border-left: solid 1px #a7a29c; border-bottom: solid 1px #a7a29c; border-right: solid 1px #a7a29c; border-top: solid 1px #a7a29c;*/ float:left; width:100%; margin-top:-1px; padding:0 0 10px 0; height:282px; }.TabbedPanelsContent { padding: 25px; line-height:20px; margin-top: 10px;}.TabbedPanelsContentA { padding: 25px; line-height:25px;}.TabbedPanelsContentVisible {}.VTabbedPanels .TabbedPanelsTabGroup { float: left; width: 10em; height: 20em; background-color: #EEE; position: relative; border-top: solid 1px #a7a29c; border-right: solid 1px #a7a29c; border-left: solid 1px #a7a29c; border-bottom: solid 1px #a7a29c;}.VTabbedPanels .TabbedPanelsTab { float: none; margin: 0px; border-top: none; border-left: none; border-right: none;}.VTabbedPanels .TabbedPanelsTabSelected { background-color: #EEE; border-bottom: solid 1px #999;}.VTabbedPanels .TabbedPanelsContentGroup { clear: none; float: left; padding: 0px; width: 30em; height: 20em;}\[/code\]Sp please help me out of this problem...Thanks in advance...