How to create collapsible panel in flex3

I
How to create Collapsible panel in flex.
If you observer above image. There are three panels.For ffirst and last panel i have provided one button where it contains open/close button.When user selects close button left panel should collapse to left hand side and the same should come to its original postion. In case of right panel is the same process except it should collapse to right side.
Below is my code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="init()" >
<mx:Script>
<![CDATA[
import flash.net.FileReference;
import mx.controls.Menu;
import flash.display.Stage;
import mx.events.MenuEvent;
import mx.controls.Alert;
import mx.events.ListEvent;
import mx.managers.DragManager;
        import mx.core.DragSource;
        import mx.events.DragEvent;
import DrawingClasses.Designer;
[Bindable]
[Embed(source="/images2/line.png")]
public var linePicture:Class;
[Bindable]
[Embed(source="/images2/box.png")]
public var boxPicture:Class;
[Bindable]
public var xm:XML =
<AbstractComponentTemplate></AbstractComponentTemplate>;
public var compType:XML =
   <ComponentTemplateDescriptor>
    <Owner>BackTesting</Owner>
    <Name>Component</Name>
    <Version>1</Version>
   </ComponentTemplateDescriptor>;
[Bindable]
        private var cm:ContextMenu;
public var xm1:XML;
public var loopparent:Array = new Array();
private var mouseTarget:DisplayObject;
private var xOff:Number;
private var yOff:Number;
private var designer:Designer = new Designer();
private var i:int;
private var j:int;
private function init():void
   designer.setDesignArea(designArea);
   var cmi1:ContextMenuItem = new ContextMenuItem("Properties", true);
            cmi1.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, contextMenuItem_propertiesSelect);
   var cmi2:ContextMenuItem = new ContextMenuItem("View XML", true);
   cmi2.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, contextMenuItem_viewXMLSelect);
   var cmi3:ContextMenuItem = new ContextMenuItem("Saved Components", true);
   cmi3.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, contextMenuItem_savedListSelect);
   cm = new ContextMenu();
   cm.hideBuiltInItems();
   cm.customItems = [cmi1, cmi2, cmi3];
   cm.addEventListener(ContextMenuEvent.MENU_SELECT, contextMenu_menuSelect);
private function contextMenu_menuSelect(evt:ContextMenuEvent):void {
private function contextMenuItem_propertiesSelect(evt:ContextMenuEvent):void {
    accrCon2.label = "Two Way Split - Properties";
    accrWin.selectedIndex = 1;
private function contextMenuItem_viewXMLSelect(evt:ContextMenuEvent):void {
    viewstack1.selectedIndex = 1;
private function contextMenuItem_savedListSelect(evt:ContextMenuEvent):void {
    accrWin.selectedIndex = 0;
[Bindable]
private var propValue:String = "Component";
        private function itemClickEvent(event:ListEvent):void {
   var propKey:String = dgProp.selectedItem.@key;
   if (propKey == "name") {
    propValue = dgProp.selectedItem.propvalue;
[Bindable]
private var sourceXML:XML =
<order>
   
   <?PROC_INSTR sample ?>
   <item id='1'>
    <menuName>burger</menuName>
    <price>3.95</price>
   </item>
   <item id='2'>
    <menuName>fries</menuName>
    <price>1.45</price>
   </item>
</order>;
[Bindable]
private var savedComp:Array=['ComponentTemplate',
'iv85341.EquityCash.v1',
'ra92724.ThreeWaySplit.EU.US.OTHERS.v1',
'ra92724.TwoWaySplit.EU.OTHERS.v1',
'ra92724.TwoWaySplit.US.OTHERS.v1',
'iv85341.VanillaNode.v1',
'iv85341.ReadGmrFs.v1'
     [Bindable]
     private var propData:XML =
      <properties>
       <prop key="name">
        <propvalue>Component</propvalue>
     <itemRenderer>mx.controls.NumericStepper</itemRenderer>
       </prop>
       <prop key="Version">
        <propvalue>1.0</propvalue>
     <itemRenderer>mx.controls.NumericStepper</itemRenderer>
       </prop>
       <prop key="Owner">
        <propvalue>iv85341</propvalue>
     <itemRenderer>mx.controls.NumericStepper</itemRenderer>
       </prop>
       <prop key="width">
        <propvalue>250</propvalue>
     <itemRenderer>mx.controls.NumericStepper</itemRenderer>
       </prop>
       <prop key="height">
        <propvalue>300</propvalue>
     <itemRenderer>mx.controls.NumericStepper</itemRenderer>
       </prop>
       <prop key="X-Pos">
        <propvalue>40</propvalue>
     <itemRenderer>mx.controls.NumericStepper</itemRenderer>
       </prop>
       <prop key="Y-Pos">
        <propvalue>20</propvalue>
     <itemRenderer>mx.controls.NumericStepper</itemRenderer>
       </prop>
      </properties>;
   private function rightClick(event:MouseEvent):void
    Alert.show("Properties ..." + event.currentTarget, "Open");
   // Draging Code Starts Here
   private var curDate:Date = new Date();
   private var dateList:XMLList = null;
   public function pictureDragDrop(event:DragEvent):void {
    //Alert.show (" com = " + event.dragSource.dataForFormat("key"));
    var nodeName:String = event.dragSource.dataForFormat("key").toString(); //txtInput1.text;
    var nodeValue:String = "";
    if (nodeValue == "")
     if (xm == <AbstractComponentTemplate></AbstractComponentTemplate>)
      xm.appendChild(compType);
      dateList = new XMLList("<DateCreated>" + curDate + "</DateCreated>");
      xm.appendChild(dateList);
      dateList = new XMLList("<DateModified>" + curDate + "</DateModified>");
      xm.appendChild(dateList);
      xm1 = XML("<" + nodeName + "></" + nodeName + ">");
      xm.appendChild(xm1);
     else
      i++;
      xm1 = XML("<" + nodeName + "></" + nodeName + ">");
      xm.appendChild(xm1);
      //loopparent.push(xmlarray:xm1);
      loopparent[i] = xm1;
    else
     var xmlList:XMLList = new XMLList("<" + nodeName + ">" + nodeValue + "</" + nodeName + ">");
     if (xm1 == null)
      xm.appendChild(xmlList);
     else
      for (j = i; j>0; j--)
      (loopparent[j]).appendChild(xmlList);
      //Alert.show("alert");
    var x:int = event.currentTarget.mouseX - xOff;
    var y:int = event.currentTarget.mouseY - yOff;
    if(event.dragSource.dataForFormat("key") == "box")
     designer.addBox(x, y);
    else if(event.dragSource.dataForFormat("key") == "circle")
     designer.addCircle(x, y);
    else
     designer.addRectangle(x, y);
    //txtInput1.text = "";
    //txtInput2.text = "";
   // this method gets x and y coordinate of template box image
   private function myoffset(img:Image):void {
    xOff = img.mouseX;
    yOff = img.mouseY;
   // this method does acceptable draging box image
   public function pictureDragEnter(event:DragEvent):void{
    DragManager.acceptDragDrop(Canvas(event.target));
   // this method supply drag box when mouse move on the design area
   private function dragPicture1(event:MouseEvent, img1:Image,format:String):void{
    var dragInitiator:Image=Image(event.currentTarget);
    var ds:DragSource = new DragSource();
    var imageProxy:Image = new Image();
    imageProxy.source = img1.source;
    imageProxy.height= 150;
    imageProxy.width= 150;
    ds.addData(format,"key");
    DragManager.doDrag(dragInitiator, ds, event,imageProxy, 0, 0, 1.00);
   // this method works when click on the line button
   // it is make enable to draw line
   public function doDrawEnable():void {
    designer.setIsDrawEnable(true);
   private var fileRef:FileReference;
   public function createXML():void {
    var fileName:String = "component.xml";
                fileRef = new FileReference();
    fileRef.browse();
   // Draging code ends here
]]>
</mx:Script>
<mx:Fade id="theEffect"/>
<mx:HDividedBox width="100%" height="100%">
<mx:VDividedBox height="100%" width="20%">
    <mx:Panel title="Drawing Components" width="100%" height="100%" layout="vertical" >
        <mx:Panel title="Nodes" width="100%" height="100%" layout="vertical">
         <mx:Image id="box" toolTip="TwoWay Split" useHandCursor="true" buttonMode="true" source="@Embed(source='images2/box.png')" mouseMove="dragPicture1(event, box, 'box');myoffset(box);" width="28" height="28" x="84" y="6"></mx:Image>
         <mx:Image id="rectangle" toolTip="MultiWay Split" useHandCursor="true" buttonMode="true" source="@Embed(source='images2/rectangle.png')" mouseMove="dragPicture1(event, rectangle, 'rectangle');myoffset(rectangle);" width="28" height="28" x="160" y="10"></mx:Image>
         <mx:Image id="circle" toolTip="Reader" useHandCursor="true" buttonMode="true" source="@Embed(source='images2/circle.png')" mouseMove="dragPicture1(event, circle, 'circle');myoffset(circle);" width="28" height="28" x="120" y="8"></mx:Image>
         <mx:Image id="line" toolTip="Line" useHandCursor="true" buttonMode="true" source="@Embed(source='images2/line.png')" click="doDrawEnable()" width="28" height="28" x="279" y="10"></mx:Image>
         
        </mx:Panel>
    </mx:Panel>
</mx:VDividedBox>
<mx:VDividedBox height="100%" width="60%">
    <mx:HDividedBox width="100%" height="100%">
     <mx:Canvas width="100%" height="100%" >
      <mx:TabBar x="0" y="10" dataProvider="viewstack1" />
      <mx:ViewStack id="viewstack1" width="100%" height="100%" y="32">
       <mx:Canvas backgroundColor="#ffffff" borderColor="0xB7BABC" borderStyle="solid" borderThickness="7" label="{propValue}" id="designArea" contextMenu="{cm}" dragEnter="pictureDragEnter(event)" dragDrop="pictureDragDrop(event)" width="100%" height="100%" >
       </mx:Canvas>
       <mx:Panel id="pnlXML" label="XML" width="100%" height="100%" showEffect="{theEffect}" >
        <mx:ControlBar width="100%" barColor="#FF22CC">
         <mx:Spacer width="100%"/>
         <mx:Button id="btnSave" label="Save" useHandCursor="true" buttonMode="true" mouseChildren="false" click="createXML()" />
        </mx:ControlBar>
        <mx:TextArea fontSize="12" wordWrap="false" textIndent="8" id="txtAreaXML" text="{xm}" width="100%" height="100%" editable="false" />
       </mx:Panel>
      </mx:ViewStack>
     </mx:Canvas>
    </mx:HDividedBox>
</mx:VDividedBox>
<mx:VDividedBox height="100%" width="20%">
   <mx:Panel title="Saved Components and Properties" width="100%" height="100%" layout="vertical" >
    <mx:Accordion id="accrWin" x="51" y="35" width="100%" height="100%">
        <mx:Canvas label="Saved Components" width="100%" height="100%">
         <mx:List height="100%" width="100%" dataProvider="{savedComp}" />
        </mx:Canvas>
        <mx:Canvas id="accrCon2" label="Properties" width="100%" height="100%">
         <mx:DataGrid id="dgProp" dataProvider="{propData.prop}" height="100%" width="100%" editable="true" itemClick="itemClickEvent(event);">
          <mx:columns>
           <mx:DataGridColumn dataField="@key" headerText="Property" editable="false" />
           <mx:DataGridColumn dataField="propvalue" headerText="Value" editable="true" />
          </mx:columns>
         </mx:DataGrid>
        </mx:Canvas>
     </mx:Accordion>
   </mx:Panel>
</mx:VDividedBox>
</mx:HDividedBox>
<mx:ApplicationControlBar dock="true">
<mx:Image source="images/Openfile.gif" toolTip="Open" useHandCursor="true" buttonMode="true" mouseChildren="false" click="createXML()" />
<mx:Image source="images/Savefile.gif" toolTip="Save" useHandCursor="true" buttonMode="true" mouseChildren="false" click="createXML()" />
<mx:Image source="images/Undo.gif" toolTip="Undo" useHandCursor="true" buttonMode="true" mouseChildren="false" />
<mx:Image source="images/Redo.gif" toolTip="Redo" useHandCursor="true" buttonMode="true" mouseChildren="false" />
<mx:Image source="images/Delete.gif" toolTip="Delete" useHandCursor="true" buttonMode="true" mouseChildren="false" />
<mx:Image source="images/Print.gif" toolTip="Print" useHandCursor="true" buttonMode="true" mouseChildren="false" />
<mx:Spacer width="100%" />
<mx:Label text="BackTesting" fontWeight="bold" fontSize="16" />
</mx:ApplicationControlBar>
</mx:Application>
Plz change my code according to the requirement.
Thanks

Could you give us the full source code?
Thanks!!

Similar Messages

Dynamically created COLLAPSIBLE PANELS

In case this might help others, I thought I would share how I
dynamically create Collapsible Panels using MySQL, PHP, and SPRY.
Please note that I am not a master PHP coder and so there might be
a more efficient method but this does work great for me. Here is my
scenario. I have a MySQL table which holds a list of user
applications. Some applications then have individual modules which
are stored in a seperate table and related to applications by
app_id. I want to display the list of applications and then for
applications that have modules I create a collapsible panel to
display the modules.
My Applications:
mysql_select_db($database_ppg_conn, $ppg_conn);
$query_applications = "SELECT * FROM applications ORDER BY
active desc, name ASC";
$applications = mysql_query($query_applications, $ppg_conn)
or die(mysql_error());
$row_applications = mysql_fetch_assoc($applications);
$totalRows_applications = mysql_num_rows($applications);
code for application lists and collapsible panels:
<div id="maincontainerbox" align="center">
<div class="ppgaccounthdr">
PPG Applications
</div>
<div class="ppgaccountrow_active">
<a href="ppgaccounts_update.php?app=new">Add New
Application</a>
</div>
<?php
$icount = 0;
do { ?>
<?php switch ($row_applications['modules']) {
case "Y":
$modules = 1; //flags the building of collapsible panel to
display available modules for current application.
++$icount; //tracks # of applications that have modules.
This is used to properly create multiple collapsible panels.
break;
default:
$modules = 0; //no modules for current app
break;
} ?>
<?php switch ($row_applications['active']) {
case "Y":
if ($modules == 1) {
echo '<div id="CollapsiblePanel'.$icount.'"
class="ppgaccountrow_active1"><div
class="ppgaccountrow_active">';
} else {
echo '<div class="ppgaccountrow_active">'; }
break;
default:
echo '<div class="ppgaccountrow_notactive">';
break;
?>
<a href="ppgaccounts_update.php?app=<?php echo
$row_applications['id'];?>"><?php echo
$row_applications['name']; ?></a>
<?php if ($modules == 1) {
echo '</div>';
echo '<div class="CollapsiblePanelContent">';
$query_appmodules = "SELECT *
FROM app_modules
WHERE app_id = {$row_applications['id']}
ORDER BY active desc, name ASC";
$appmodules = mysql_query($query_appmodules, $ppg_conn) or
die(mysql_error());
$row_appmodules = mysql_fetch_assoc($appmodules);
$totalRows_appmodules = mysql_num_rows($appmodules);
echo '<div class="appmodulerow_active">';
echo '<a
href="ppg_app_modules_update.php?id=new&app_id='.$row_applications['id'].'">Add
New Module</a>';
echo '</div>';
do {
switch ($row_appmodules['active']) {
case "Y":
echo '<div class="appmodulerow_active">';
break;
default:
echo '<div class="appmodulerow_notactive">';
break;
echo '<a
href="ppg_app_modules_update.php?id='.$row_appmodules['id'].'"
title="Update Application
Module">'.$row_appmodules['name'].'</a></div>';
} while ($row_appmodules = mysql_fetch_assoc($appmodules));
mysql_free_result($appmodules);
echo '</div>';//close content div for collapsible
panal
} ?>
</div>
<?php } while ($row_applications =
mysql_fetch_assoc($applications)); ?>
</div>
So when my application record has a flag saying that it
possesses modules I increment $icount and then use
echo '<div id="CollapsiblePanel'.$icount.'"
class="ppgaccountrow_active1"> to build the collapsible
panel. Notice the $icount in the div id. Now at the bottom of the
HTML I do the following.
<?php
$i = 0;
do {
++$i;
echo 'var CollapsiblePanel'.$i.' = new
Spry.Widget.CollapsiblePanel("CollapsiblePanel'.$i.'",{contentIsOpen:false});';
} while ($i <= $icount);
?>
//-->
</script>
This creates a collapsiblepanel for each application which
has modules.
I hope I have described this ok and that it might help
somebody out. If you have suggestions on how to do it better then
please do let me know.
Thanks,
Lee Goolsby

Nice. Thanks for posting this, Lee.

Do you know how to create Front Panel like Web,

Do you know how to create Front Panel like Web, I mean like we pointed the word and click it will do another process instead by clicking push button.
If possible, i can click the link in the table... Any idea anyone
Solved!
Go to Solution.

Hi ezam,
can you define more clearly exactly what you would actually like to do, and ill have a further look into it. I think smercurio_fc has understood it as I have, and is right with the activeX.
any way, give a shout back with exactly what you want to do and we see what we can do,
Richard
Richard S
Applications Engineer
Certified LabVIEW Associate Developer
National Instruments UK&Ireland

How to create Contextual Panel?

Dear Friends..
I want to make Contextual Panel in WD4A..
But I don't know..how to create Contextual Panel..
Please answer me..^^
Thanks..

Oh... I'm Sorry.
I can't write english well..and I can't understand Navigation list and contexual panel.
So.. I can study that.
But..
I make Contextual Panel reference CTX_NAV_PANEL View in WDR_TEST_EVENTS Component.
'com.lang.abap.sap' line has right arrow just like '>'
i think.. '>' click then.. another action happens..
for example.. display sublist..
'comp.lang.abap.sap.webdynpro'
'comp.lang.abap.sap.webdynpro.viewdesigner'
'comp.lang.abap.sap.webdynpro.runtime,X'
'comp.lang.abap.sap.webdynpro.libraries'
and so on..
But nothing happens..
How can I display sublist..

How to create function panels for my own C functions?

I've been searching for a way to create my own function panels. CVI documentation seems to suggest that this can be done but the explanation inevitably turns to instrument drivers, not C functions.
I don't yet know what an instrument driver is. So far I've never needed one. I just want to know how to put plain old C functions that I've created into the library tree for coworkers to use. Is that practically possible?

The facility is couched in terms of "instrument driver" but it can be used for an arbitrary CVI function you've created.
First make a function tree from File pull down menu new ... Function Tree
Then right click in blank function tree panel and create instrument or use Create pulldown menu, enter name as prompted, use help button. You need to choose a "prefix" for your function names.
The tricky part is when you want to add a function to your "instrument" you right click on the <create class or function panel window> token the first time, thereafter when adding a function you right click on one of the functions you've already added. In either case you want to "create function panel window" which brings up the function panel window editor whcih allows you to place input controls that match the function signature.
There's a learning curve but keep at it. The help is good, use it.
Menchar

(window/cs6)How to create multiple panel

Hi all,
How do I code multiple tabs for plugins?
But I only create one.And I am a novice in Indesign Plugin Development.
Thank you very much.And hope you happy everyday.
your quanfeng.chen

Hi Manan,
Thank you very much for your help. And my idea is wrong.
Can you tell me how to dock some panels each other? For example,.(Images from Mag +)
Thank you again,
your quanfeng.chen

How to create dynamic panel tree view?

Hello,
I can create dynamic pallete panel without any problems (from sdk/paneltreeview) , but i can't when it's a panel tree view (from sdk/paneltreeview). I don't know how to initialize it. Can i call IID_ITREEVIEWWIDGETMGR's impl directly in ActionComponent to create panel widget? and how?
Thanks in advance.

solved by self

How to create custom panel icon using Extension Builder 3?

How does one go about adding a custom icon for extension panels created with Extension Builder 3?
The default icon looks Lego-like (see below)
I'd like to replace the generic icon with an image that can visually identifies the panel even when it's collapsed.

Found it.
In Eclipse, choose Window > Open Perspective > Other > Adobe Extension Builder 3.
Right-click your project and select Adobe Extension Builder 3 -> Bundle Manifest Editor.
This editor allows you to change the properties of your extension
Bundle Manfest Editor > Extension tab (at the bottom) > User Interface tab (back at the top). Used .png images and it worked.

How to create Admin Panel?

Hi Everyone,
I've 1 website in that I would like to include Admin Panel,so that in future anybody wants to do some modifications they have to do
without entering into coding part...I don't know how to achive this can anyone help me here............
Thanks & Regards RAJENDRAN M

Hi,
You can publish your website to IIS which has UI manager to handle some management jobs like authoriaztion connection string/machine key and so on.
We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
Click
HERE to participate the survey.

How to create Floatable panel!

well, i am trying to create a floatable panel like the one in NetBean, eg. source editor; which will be float as separate window if it is dragged and it will be closed if close icon is pressed and it can be re-opened from application menu.
i saw a lot of API out there for sale, but i am an student and i want to write it by learning. any suggestion or direction will be appreciate it. thanks a lot.

private void detachActionPerformed(java.awt.event.ActionEvent evt)
    System.out.println("detachActionPerformed");
    this.dockingSource = this.getParent();
//    dockingSource.remove(this);
    if (this.floatingFrame == null) {
      this.floatingFrame = createFloatingWindow(source);
    dockingSource.remove(this); // moved line hereYou are removing the panel from the container before creating your floating window. Therefore the
Window window = SwingUtilities.getWindowAncestor(source);
is returning null for the window, which means when you create the dialog you are passing in null as the parent.

How to create scroll panel

hi,
My panel contains many components, for visibility i would like to scroll the panel vertically. I searched in net and i dont have proper solution.
Please give me some sample code to achieve this.
Thanks in advance

http://java.sun.com/docs/books/tutorial/uiswing/components/scrollpane.html

How do I place external content in a Collapsible Panel

I figured out how to add a tooltip to a collapsible panel
today, but I am having trouble getting content to load in the
content portion of the panel from another HTML file.
I have created a loader.gif animation that I would also like
to appear in the content panel while the content is loading.
This, like the tooltips, is way above my skill level and any
help would be appreciated. I am starting from using Spry 1.6's
built in features in Dreamweaver CS3 and trying to expand on them
with help using the other spry js found here in the Labs.
Link to
collapsible panel page I am working on
Currently I have all the content panel text in panels. I
would like to copy the content to another file so it can load only
when the panel tab is opened.

Check out this example.
http://labs.adobe.com/technologies/spry/samples/utils/update_content.html
its about updateContent which allows u to place content in
your div.
U could create a little function for it to load content in
your divs.
Example of load indicator + function setup:
the indicator div
<div id="indicatorMessageBoxId"><img
scr="imagehere.gif" /> Please wait loading content </div>
The function (place in <script> tags and place it in
header (dont forget to include SpryData.js)
function updateContent(ele,url){
//U call this by using the command:
updateContent('ID_toLoad_contentIn',url_of_new_content');
document.getElementById('indicatorMessageBoxId').style.display =
""; //this will show the indicator loadimage box
Spry.Utils.updateContent(ele, url, function() {
document.getElementById('indicatorMessageBoxId').style.display =
"none"; }); //this will hide the box when loading file is done
u can attach this function on your collapspannel by adding a
onclick="updateContent('myId','data/page.html');" to the
element.
Hope this helps :)

How to apply different styles to multiple spry collapsible panels?

Hello every.
I would really appreciate some help with this problem I am coming up against.
I am creating a website which has multiple Spry collapsible panels in it. I applied the styles I wanted for the first Spry collapsible panel I did in the styles panel with no problems what so ever.
However when I go to apply the styles I want for my second and every other Spry collapsible panel, when I applied the style I wanted it changed the first panel I did. I’ve tried giving all my collapsible panels different Div ID’s but no luck. I just can’t seem to apply different styles to each of my collapsible panels.
Can someone please advise me how to do this?
Thank you in advance for your help.
Kind regards
Elliot

I've figured the most of it out.
By giving the Spry Collapsible Panel that you want to style differently a separate ID and class and then duplicating the original Spry Collapsible Panel style in the CSS style panel on the right and renaming them the same name as the panel you want to style differently it will allow you to style it differently to all the other panels apart from the Hover.
I've tried everything! Below is the code I'm using for the two Collapsible Panels I want to style Differently.
I only want to have different Tab backgrounds and Hover backgrounds
1st Spry CollapsiblePanel
Code:
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">Tab</div>
<div class="CollapsiblePanelContent">Content</div>
CSS Style
.CollapsiblePanelTab
.CollapsiblePanelTabHover, .CollapsiblePanelOpen .CollapsiblePanelTabHover
2nd Spry CollapsiblePanel
Code:
<div id="CollapsiblePanel2" class="CollapsiblePanel2">
<div class="CollapsiblePanel2Tab" tabindex="0">Tab</div>
<div class="CollapsiblePanel2Content">Content</div>
</div>
.CollapsiblePanel2Tab
.CollapsiblePanel2TabHover, .CollapsiblePanelOpen .CollapsiblePanel2TabHover
As I said the Tab works both I have two seperate background images for the Tabs but I can only seem to have one background for the hover.
Has anyone any ideas on how to get around this?
Kind regards
Elliot

How to create a multi-page collapsible & CSS styleable table of contents box?

How to create a multi-page collapsible & CSS styleabe table of contents box?
Is there a tool available for Dreamweaver or for standalone operation that can create for multi-page articles a collapsible & CSS styleabe table of contents box based on the page titles?

You could do this with jQuery.
Table of Contents -
http://www.downloadjavascripts.com/list/javasiteccc68/Details.aspx
Collapsible Panels, Tables & Accordions -
http://www.downloadjavascripts.com/Collapsible_And_Free_Accordion_Panels.aspx
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Spry Collapsible Panel at bottom of page - how to make the browser scrolldown automatically

The question is -
i have a collapsible panel at the bottom of my page that I'm using as a footer menu.
It is 200px tall. The visitor clicks on "FIND OUT MORE", then the panel opens 200px tall.
I want the viewing area of browser to focus on the content of this panel, and automatically scroll down 200px to accomodate the new real estate at the bottom of the page.
Now they click on it, but then have to manually scroll down.
How can I do this? What do I add to the Spry Collapsible Panel js scripts?
I tried using a tag at the bottom of the 200px but can't get it to work correctly.
Dreamweaver CS5.
thanks

I have been closing IE and reopening it for 7 months now. I don't of any other way to reload an applet.
Jason

How to create collapsible panel in flex3

Similar Messages

Maybe you are looking for