acılıp kapanan tablo kodu lazım

<script language="javascript">var Spry;
if (!Spry) Spry = {};
if (!Spry.Widget) Spry.Widget = {};

Spry.Widget.Accordion = function(element, opts)
{
   this.element = this.getElement(element);
   this.defaultPanel = 0;
   this.hoverClass = "AccordionPanelTabHover";
   this.openClass = "AccordionPanelOpen";
   this.closedClass = "AccordionPanelClosed";
   this.focusedClass = "AccordionFocused";
   this.enableAnimation = true;
   this.enableKeyboardNavigation = true;
   this.currentPanel = null;
   this.animator = null;
   this.hasFocus = null;

   this.previousPanelKeyCode = Spry.Widget.Accordion.KEY_UP;
   this.nextPanelKeyCode = Spry.Widget.Accordion.KEY_DOWN;

   this.useFixedPanelHeights = true;
   this.fixedPanelHeight = 0;

   Spry.Widget.Accordion.setOptions(this, opts, true);

   this.attachBehaviors();
};

Spry.Widget.Accordion.prototype.getElement = function(ele)
{
   if (ele && typeof ele == "string")
      return document.getElementById(ele);
   return ele;
};

Spry.Widget.Accordion.prototype.addClassName = function(ele, className)
{
   if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
      return;
   ele.className += (ele.className ? " " : "") + className;
};

Spry.Widget.Accordion.prototype.removeClassName = function(ele, className)
{
   if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
      return;
   ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
};

Spry.Widget.Accordion.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
{
   if (!optionsObj)
      return;
   for (var optionName in optionsObj)
   {
      if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
         continue;
      obj[optionName] = optionsObj[optionName];
   }
};

Spry.Widget.Accordion.prototype.onPanelTabMouseOver = function(e, panel)
{
   if (panel)
      this.addClassName(this.getPanelTab(panel), this.hoverClass);
   return false;
};

Spry.Widget.Accordion.prototype.onPanelTabMouseOut = function(e, panel)
{
   if (panel)
      this.removeClassName(this.getPanelTab(panel), this.hoverClass);
   return false;
};

Spry.Widget.Accordion.prototype.openPanel = function(elementOrIndex)
{
   var panelA = this.currentPanel;
   var panelB;

   if (typeof elementOrIndex == "number")
      panelB = this.getPanels()[elementOrIndex];
   else
      panelB = this.getElement(elementOrIndex);
   
   if (!panelB || panelA == panelB)   
      return null;

   var contentA = panelA ? this.getPanelContent(panelA) : null;
   var contentB = this.getPanelContent(panelB);

   if (!contentB)
      return null;

   if (this.useFixedPanelHeights && !this.fixedPanelHeight)
      this.fixedPanelHeight = (contentA.offsetHeight) ? contentA.offsetHeight : contentA.scrollHeight;

   if (this.enableAnimation)
   {
      if (this.animator)
         this.animator.stop();
      this.animator = new Spry.Widget.Accordion.PanelAnimator(this, panelB, { duration: this.duration, fps: this.fps, transition: this.transition });
      this.animator.start();
   }
   else
   {
      if(contentA)
      {
         contentA.style.display = "none";
         contentA.style.height = "0px";
      }
      contentB.style.display = "block";
      contentB.style.height = this.useFixedPanelHeights ? this.fixedPanelHeight + "px" : "auto";
   }

   if(panelA)
   {
      this.removeClassName(panelA, this.openClass);
      this.addClassName(panelA, this.closedClass);
   }

   this.removeClassName(panelB, this.closedClass);
   this.addClassName(panelB, this.openClass);

   this.currentPanel = panelB;

   return panelB;
};

Spry.Widget.Accordion.prototype.closePanel = function()
{
   // The accordion can only ever have one panel open at any
   // give time, so this method only closes the current panel.
   // If the accordion is in fixed panel heights mode, this
   // method does nothing.

   if (!this.useFixedPanelHeights && this.currentPanel)
   {
      var panel = this.currentPanel;
      var content = this.getPanelContent(panel);
      if (content)
      {
         if (this.enableAnimation)
         {
            if (this.animator)
               this.animator.stop();
            this.animator = new Spry.Widget.Accordion.PanelAnimator(this, null, { duration: this.duration, fps: this.fps, transition: this.transition });
            this.animator.start();
         }
         else
         {
            content.style.display = "none";
            content.style.height = "0px";
         }
      }      
      this.removeClassName(panel, this.openClass);
      this.addClassName(panel, this.closedClass);
      this.currentPanel = null;
   }
};

Spry.Widget.Accordion.prototype.openNextPanel = function()
{
   return this.openPanel(this.getCurrentPanelIndex() + 1);
};

Spry.Widget.Accordion.prototype.openPreviousPanel = function()
{
   return this.openPanel(this.getCurrentPanelIndex() - 1);
};

Spry.Widget.Accordion.prototype.openFirstPanel = function()
{
   return this.openPanel(0);
};

Spry.Widget.Accordion.prototype.openLastPanel = function()
{
   var panels = this.getPanels();
   return this.openPanel(panels[panels.length - 1]);
};

Spry.Widget.Accordion.prototype.onPanelTabClick = function(e, panel)
{
   if (panel != this.currentPanel)
      this.openPanel(panel);
   else
      this.closePanel();

   if (this.enableKeyboardNavigation)
      this.focus();

   if (e.preventDefault) e.preventDefault();
   else e.returnValue = false;
   if (e.stopPropagation) e.stopPropagation();
   else e.cancelBubble = true;

   return false;
};

Spry.Widget.Accordion.prototype.onFocus = function(e)
{
   this.hasFocus = true;
   this.addClassName(this.element, this.focusedClass);
   return false;
};

Spry.Widget.Accordion.prototype.onBlur = function(e)
{
   this.hasFocus = false;
   this.removeClassName(this.element, this.focusedClass);
   return false;
};

Spry.Widget.Accordion.KEY_UP = 38;
Spry.Widget.Accordion.KEY_DOWN = 40;

Spry.Widget.Accordion.prototype.onKeyDown = function(e)
{
   var key = e.keyCode;
   if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode))
      return true;
   
   var panels = this.getPanels();
   if (!panels || panels.length < 1)
      return false;
   var currentPanel = this.currentPanel ? this.currentPanel : panels[0];
   var nextPanel = (key == this.nextPanelKeyCode) ? currentPanel.nextSibling : currentPanel.previousSibling;

   while (nextPanel)
   {
      if (nextPanel.nodeType == 1 /* Node.ELEMENT_NODE */)
         break;
      nextPanel = (key == this.nextPanelKeyCode) ? nextPanel.nextSibling : nextPanel.previousSibling;
   }

   if (nextPanel && currentPanel != nextPanel)
      this.openPanel(nextPanel);

   if (e.preventDefault) e.preventDefault();
   else e.returnValue = false;
   if (e.stopPropagation) e.stopPropagation();
   else e.cancelBubble = true;

   return false;
};

Spry.Widget.Accordion.prototype.attachPanelHandlers = function(panel)
{
   if (!panel)
      return;

   var tab = this.getPanelTab(panel);

   if (tab)
   {
      var self = this;
      Spry.Widget.Accordion.addEventListener(tab, "click", function(e) { return self.onPanelTabClick(e, panel); }, false);
      Spry.Widget.Accordion.addEventListener(tab, "mouseover", function(e) { return self.onPanelTabMouseOver(e, panel); }, false);
      Spry.Widget.Accordion.addEventListener(tab, "mouseout", function(e) { return self.onPanelTabMouseOut(e, panel); }, false);
   }
};

Spry.Widget.Accordion.addEventListener = function(element, eventType, handler, capture)
{
   try
   {
      if (element.addEventListener)
         element.addEventListener(eventType, handler, capture);
      else if (element.attachEvent)
         element.attachEvent("on" + eventType, handler);
   }
   catch (e) {}
};

Spry.Widget.Accordion.prototype.initPanel = function(panel, isDefault)
{
   var content = this.getPanelContent(panel);
   if (isDefault)
   {
      this.currentPanel = panel;
      this.removeClassName(panel, this.closedClass);
      this.addClassName(panel, this.openClass);

      // Attempt to set up the height of the default panel. We don't want to
      // do any dynamic panel height calculations here because our accordion
      // or one of its parent containers may be display:none.

      if (content)
      {
         if (this.useFixedPanelHeights)
         {
            // We are in fixed panel height mode and the user passed in
            // a panel height for us to use.
   
            if (this.fixedPanelHeight)
               content.style.height = this.fixedPanelHeight + "px";
         }
         else
         {
            // We are in variable panel height mode, but since we can't
            // calculate the panel height here, we just set the height to
            // auto so that it expands to show all of its content.
   
            content.style.height = "auto";
         }
      }
   }
   else
   {
      this.removeClassName(panel, this.openClass);
      this.addClassName(panel, this.closedClass);

      if (content)
      {
         content.style.height = "0px";
         content.style.display = "none";
      }
   }
   
   this.attachPanelHandlers(panel);
};

Spry.Widget.Accordion.prototype.attachBehaviors = function()
{
   var panels = this.getPanels();
   for (var i = 0; i < panels.length; i++)
      this.initPanel(panels[i], i == this.defaultPanel);

   // Advanced keyboard navigation requires the tabindex attribute
   // on the top-level element.

   this.enableKeyboardNavigation = (this.enableKeyboardNavigation && this.element.attributes.getNamedItem("tabindex"));
   if (this.enableKeyboardNavigation)
   {
      var self = this;
      Spry.Widget.Accordion.addEventListener(this.element, "focus", function(e) { return self.onFocus(e); }, false);
      Spry.Widget.Accordion.addEventListener(this.element, "blur", function(e) { return self.onBlur(e); }, false);
      Spry.Widget.Accordion.addEventListener(this.element, "keydown", function(e) { return self.onKeyDown(e); }, false);
   }
};

Spry.Widget.Accordion.prototype.getPanels = function()
{
   return this.getElementChildren(this.element);
};

Spry.Widget.Accordion.prototype.getCurrentPanel = function()
{
   return this.currentPanel;
};

Spry.Widget.Accordion.prototype.getPanelIndex = function(panel)
{
   var panels = this.getPanels();
   for( var i = 0 ; i < panels.length; i++ )
   {
      if( panel == panels[i] )
         return i;
   }
   return -1;
};

Spry.Widget.Accordion.prototype.getCurrentPanelIndex = function()
{
   return this.getPanelIndex(this.currentPanel);
};

Spry.Widget.Accordion.prototype.getPanelTab = function(panel)
{
   if (!panel)
      return null;
   return this.getElementChildren(panel)[0];
};

Spry.Widget.Accordion.prototype.getPanelContent = function(panel)
{
   if (!panel)
      return null;
   return this.getElementChildren(panel)[1];
};

Spry.Widget.Accordion.prototype.getElementChildren = function(element)
{
   var children = [];
   var child = element.firstChild;
   while (child)
   {
      if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
         children.push(child);
      child = child.nextSibling;
   }
   return children;
};

Spry.Widget.Accordion.prototype.focus = function()
{
   if (this.element && this.element.focus)
      this.element.focus();
};

Spry.Widget.Accordion.prototype.blur = function()
{
   if (this.element && this.element.blur)
      this.element.blur();
};

/////////////////////////////////////////////////////

Spry.Widget.Accordion.PanelAnimator = function(accordion, panel, opts)
{
   this.timer = null;
   this.interval = 0;

   this.fps = 60;
   this.duration = 500;
   this.startTime = 0;

   this.transition = Spry.Widget.Accordion.PanelAnimator.defaultTransition;

   this.onComplete = null;

   this.panel = panel;
   this.panelToOpen = accordion.getElement(panel);
   this.panelData = [];
   this.useFixedPanelHeights = accordion.useFixedPanelHeights;

   Spry.Widget.Accordion.setOptions(this, opts, true);

   this.interval = Math.floor(1000 / this.fps);

   // Set up the array of panels we want to animate.

   var panels = accordion.getPanels();
   for (var i = 0; i < panels.length; i++)
   {
      var p = panels[i];
      var c = accordion.getPanelContent(p);
      if (c)
      {
         var h = c.offsetHeight;
         if (h == undefined)
            h = 0;

         if (p == panel && h == 0)
            c.style.display = "block";

         if (p == panel || h > 0)
         {
            var obj = new Object;
            obj.panel = p;
            obj.content = c;
            obj.fromHeight = h;
            obj.toHeight = (p == panel) ? (accordion.useFixedPanelHeights ? accordion.fixedPanelHeight : c.scrollHeight) : 0;
            obj.distance = obj.toHeight - obj.fromHeight;
            obj.overflow = c.style.overflow;
            this.panelData.push(obj);

            c.style.overflow = "hidden";
            c.style.height = h + "px";
         }
      }
   }
};

Spry.Widget.Accordion.PanelAnimator.defaultTransition = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); };

Spry.Widget.Accordion.PanelAnimator.prototype.start = function()
{
   var self = this;
   this.startTime = (new Date).getTime();
   this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);
};

Spry.Widget.Accordion.PanelAnimator.prototype.stop = function()
{
   if (this.timer)
   {
      clearTimeout(this.timer);

      // If we're killing the timer, restore the overflow
      // properties on the panels we were animating!

      for (i = 0; i < this.panelData.length; i++)
      {
         obj = this.panelData[i];
         obj.content.style.overflow = obj.overflow;
      }
   }

   this.timer = null;
};

Spry.Widget.Accordion.PanelAnimator.prototype.stepAnimation = function()
{
   var curTime = (new Date).getTime();
   var elapsedTime = curTime - this.startTime;

   var i, obj;

   if (elapsedTime >= this.duration)
   {
      for (i = 0; i < this.panelData.length; i++)
      {
         obj = this.panelData[i];
         if (obj.panel != this.panel)
         {
            obj.content.style.display = "none";
            obj.content.style.height = "0px";
         }
         obj.content.style.overflow = obj.overflow;
         obj.content.style.height = (this.useFixedPanelHeights || obj.toHeight == 0) ? obj.toHeight + "px" : "auto";
      }
      if (this.onComplete)
         this.onComplete();
      return;
   }

   for (i = 0; i < this.panelData.length; i++)
   {
      obj = this.panelData[i];
      var ht = this.transition(elapsedTime, obj.fromHeight, obj.distance, this.duration);
      obj.content.style.height = ((ht < 0) ? 0 : ht) + "px";
   }
   
   var self = this;
   this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);
};

</script><div id="Accordion1" class="Accordion" tabindex="0">
  <div class="AccordionPanel">
    <div class="AccordionPanelTab">TeknoEsinti</div>
    <div class="AccordionPanelContent">Bu Alana BÄ°lgi Yazınız</div>
  </div>
  <div class="AccordionPanel">
    <div class="AccordionPanelTab">Teknoesinti</div>
    <div class="AccordionPanelContent">Bu Alana Bilgi Yazınız</div>
  </div>
</div>
<script type="text/javascript">
<!--
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
//-->
</script>

.Accordion {
   border-left: solid 1px gray;
   border-right: solid 1px black;
   border-bottom: solid 1px gray;
   overflow: hidden;
}

/* This is the selector for the AccordionPanel container which houses the
 * panel tab and a panel content area. It doesn't render visually, but we
 * make sure that it has zero margin and padding.
 *
 * The name of the class ("AccordionPanel") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * accordion panel container.
*/
.AccordionPanel {
   margin: 0px;
   padding: 0px;
}

/* This is the selector for the AccordionPanelTab. This container houses
 * the title for the panel. This is also the container that the user clicks
 * on to open a specific panel.
 *
 * The name of the class ("AccordionPanelTab") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * accordion panel tab container.
 *
 * NOTE:
 * This rule uses -moz-user-select and -khtml-user-select properties to prevent the
 * user from selecting the text in the AccordionPanelTab. These are proprietary browser
 * properties that only work in Mozilla based browsers (like FireFox) and KHTML based
 * browsers (like Safari), so they will not pass W3C validation. If you want your documents to
 * validate, and don't care if the user can select the text within an AccordionPanelTab,
 * you can safely remove those properties without affecting the functionality of the widget.
 */
.AccordionPanelTab {
   background-color: #CCCCCC;
   border-top: solid 1px black;
   border-bottom: solid 1px gray;
   margin: 0px;
   padding: 2px;
   cursor: pointer;
   -moz-user-select: none;
   -khtml-user-select: none;
}

/* This is the selector for a Panel's Content area. It's important to note that
 * you should never put any padding on the panel's content area if you plan to
 * use the Accordions panel animations. Placing a non-zero padding on the content
 * area can cause the accordion to abruptly grow in height while the panels animate.
 *
 * Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
 * Content container.
 *
 * The name of the class ("AccordionPanelContent") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * accordion panel content container.
 */
.AccordionPanelContent {
   overflow: auto;
   margin: 0px;
   padding: 0px;
   height: 200px;
}

/* This is an example of how to change the appearance of the panel tab that is
 * currently open. The class "AccordionPanelOpen" is programatically added and removed
 * from panels as the user clicks on the tabs within the Accordion.
 */
.AccordionPanelOpen .AccordionPanelTab {
   background-color: #EEEEEE;
}

/* This is an example of how to change the appearance of the panel tab as the
 * mouse hovers over it. The class "AccordionPanelTabHover" is programatically added
 * and removed from panel tab containers as the mouse enters and exits the tab container.
 */
.AccordionPanelTabHover {
   color: #555555;
}
.AccordionPanelOpen .AccordionPanelTabHover {
   color: #555555;
}

/* This is an example of how to change the appearance of all the panel tabs when the
 * Accordion has focus. The "AccordionFocused" class is programatically added and removed
 * whenever the Accordion gains or loses keyboard focus.
 */
.AccordionFocused .AccordionPanelTab {
   background-color: #3399FF;
}

/* This is an example of how to change the appearance of the panel tab that is
 * currently open when the Accordion has focus.
 */
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
   background-color: #33CCFF;
}

.black_overlay{
   display: none;
   position: absolute;
   top: 0%;
   left: 0%;
   width: 100%;
   height: 100%;
   background-color: black;
   z-index:1001;
   -moz-opacity: 0.8;
   opacity:.80;
   filter: alpha(opacity=80);
}
 
.white_content {
   display: none;
   position: absolute;
   top: 25%;
   left: 25%;
   width: 50%;
   height: 50%;
   padding: 16px;
   border: 16px solid orange;
   background-color: white;
   z-index:1002;
   overflow: auto;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
   <head>
      <title>LIGHTBOX EXAMPLE</title>
      <style>
      .black_overlay{
         display: none;
         position: absolute;
         top: 0%;
         left: 0%;
         width: 100%;
         height: 100%;
         background-color: black;
         z-index:1001;
         -moz-opacity: 0.8;
         opacity:.80;
         filter: alpha(opacity=80);
      }
      .white_content {
         display: none;
         position: absolute;
         top: 25%;
         left: 25%;
         width: 50%;
         height: 50%;
         padding: 16px;
         border: 16px solid orange;
         background-color: white;
         z-index:1002;
         overflow: auto;
      }
   </style>
   </head>
   <body>
      <p>This is the main content. To display a lightbox click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p>
      <div id="light" class="white_content">This is the lightbox content. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
      <div id="fade" class="black_overlay"></div>
   </body>
</html>