Loading ...
Sorry, an error occurred while loading the content.

Tabs within YUI panel with bubbling collapse not working

Expand Messages
  • cgimarko
    I am using yui panels with bubbling to provide the ability to minimize the panel. If I include a tabs within the panel, the tabs are not getting hidden when I
    Message 1 of 1 , Oct 5, 2009
    View Source
    • 0 Attachment
      I am using yui panels with bubbling to provide the ability to minimize the panel.

      If I include a tabs within the panel, the tabs are not getting hidden when I minimize the panel. Any idea would be great.

      Here is the simple test page...the first panel has tabs

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
      <html>
      <head>
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
      <title>Bubbling Library (YUI Extension) - Accordion Panels using the YUI Panel Skin</title>
      <meta name='author' content='Caridy Patino (caridy at gmail.com)' />
      <link rel="stylesheet" type="text/css" href="../assets/example.css" />
      <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/container/assets/skins/sam/container.css" />
      <link rel="stylesheet" type="text/css" href="http://js.bubbling-library.com/2.1/build/accordion/assets/accordion.css" />
      <style type="text/css">

      .multicolumns {
      width: 860px;
      }
      .multicolumns .yui-cms-accordion .yui-cms-item {
      width: 31%;
      float: left;
      margin: 1%;
      }
      .multicolumns .yui-cms-accordion .yui-cms-item .bd {
      background-color: #fff;
      }

      </style>
      <!-- Dependency source files -->
      <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/utilities/utilities.js"></script>


      <script type="text/javascript" src="http://js.bubbling-library.com/2.1/build/bubbling/bubbling.js"></script>
      <script type="text/javascript" src="http://js.bubbling-library.com/2.1/build/accordion/accordion.js"></script>


      <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/tabview/assets/skins/sam/tabview.css">
      <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/element/element-beta-min.js"></script>
      <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/tabview/tabview-min.js"></script>
      </head>
      <body id="cms-body" class="yui-skin-sam">
      <div id="doc">




      <div class="multicolumns">
      <p>Configuration: <code>multiple</code>, <code>fadeIn/Out</code></p>
      <div class="yui-cms-accordion multiple fade fixIE">
      <div class="yui-cms-item yui-panel selected">
      <div class="hd">Accessories</div>
      <div class="bd">
      <div class="fixed">

      <div id="news" class="yui-navset" >

      <ul class="yui-nav" >

      <li class="selected"><a href="#VV"><em>Tab1</em></a></li>
      <li ><a href="#VDIF"><em>Tab2</em></a></li>
      </ul>

      <div class="yui-content" >
      <div id="VV" >


      </div>
      <div id="VDIF" >

      </div>


      </div>
      </div>
      </div>



      </div>
      <div class="actions">
      <a href="#" class="accordionToggleItem"> </a>
      <a href="#" class="accordionRemoveItem"> </a>
      </div>
      </div>
      <div class="yui-cms-item yui-panel selected">
      <div class="hd">Photos</div>
      <div class="bd">
      <div class="fixed">
      <p>Consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.Consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. </p>
      <div>
      <p>Consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec.</p>
      </div>
      </div>
      </div>
      <div class="ft">Also we can define the footer element for panels</div>
      <div class="actions">
      <a href="#" class="accordionToggleItem"> </a>
      <a href="#" class="accordionRemoveItem"> </a>
      </div>
      </div>

      </div>
      </div>



      <!-- THE EXAMPLE's CODE END HERE, FROM NOW ON IS JUST THE DOCUMENTATION //-->



      </div>
      </body>
      </html>
    Your message has been successfully submitted and would be delivered to recipients shortly.