{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import panel as pn\n",
    "pn.extension()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "``Accordion`` layouts are a type of ``Card`` layout that allows switching between multiple objects by clicking on the corresponding card header. The labels for each card may be defined explicitly as part of a tuple, and otherwise default to the ``name`` parameter of the card's contents. Like ``Column`` and ``Row``, ``Tabs`` has a list-like API that allows interactively updating and modifying the cards using methods ``append``, ``extend``, ``clear``, ``insert``, ``pop``, ``remove`` and ``__setitem__`` (to replace the contents).\n",
    "\n",
    "#### Parameters:\n",
    "\n",
    "* **``active``** (list, default=[]): The indexes of the currently displayed cards. Updates when a card is expanded or collapsed and may also be set to programmatically control which cards are shown.\n",
    "* **``objects``** (list): The list of objects to display in the Column. Should not generally be modified directly except when replaced in its entirety.\n",
    "* **``toggle``** (bool): Whether to toggle between the available cards, activating only one at a time (if True), or (if False) whether to allow multiple cards to be expanded simultaneously.\n",
    "\n",
    "Styling-related parameters:\n",
    "\n",
    "* **``active_header_background``** (str): The background color of the header when the `Card` is expanded.\n",
    "* **``header_color``** (str): The color of the header text.\n",
    "* **``header_background``** (str): The background color of the header.\n",
    "\n",
    "For further layout and styling-related parameters see the [customization user guide](../../user_guide/Customization.ipynb).\n",
    "\n",
    "___"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Accordion"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "An ``Accordion`` layout can either be instantiated as empty and populated after the fact, or by using a list of objects provided on instantiation as positional arguments. If the objects are not already Panel components they will each be converted to one using the ``pn.panel`` conversion method. Unlike other panel types, ``Accordion`` also accepts tuples to specify the title of each tab; if no name is supplied explicitly the name of the underlying object will be used."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from bokeh.plotting import figure\n",
    "\n",
    "p1 = figure(width=300, height=300, name='Scatter', margin=5)\n",
    "p1.scatter([0, 1, 2, 3, 4, 5, 6], [0, 1, 2, 3, 2, 1, 0])\n",
    "\n",
    "p2 = figure(width=300, height=300, name='Line', margin=5)\n",
    "p2.line([0, 1, 2, 3, 4, 5, 6], [0, 1, 2, 3, 2, 1, 0])\n",
    "\n",
    "accordion = pn.Accordion(('Scatter', p1), p2)\n",
    "accordion"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The contents of the ``Accordion.objects`` list should never be modified individually, because Panel cannot detect when items in that list have changed internally, and will thus fail to update any already-rendered views of those objects (and their card titles!). Instead, use the provided methods for adding and removing items from the list.  The only change that is safe to make directly to ``Accordion.objects`` is to replace the list of ``objects`` entirely.  As a simple example of using the methods, we might add an additional widget to the ``Accordion`` using the `append` method:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "p3 = figure(width=300, height=300, name='Square', margin=5)\n",
    "p3.square([0, 1, 2, 3, 4, 5, 6], [0, 1, 2, 3, 2, 1, 0], size=10)\n",
    "\n",
    "accordion.append(p3)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "On a live server or in a notebook the `accordion` displayed above will dynamically expand to include the new card. To see the effect in a statically rendered page, we will display the accordion a second time:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "accordion"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### ``active``\n",
    "\n",
    "In addition to being able to modify the ``objects`` using methods we can also get and set the currently ``active`` cards as a list of integers, which will update any rendered views of the object:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "print(accordion.active)\n",
    "accordion.active = [0, 2]"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### ``toggle``\n",
    "\n",
    "When toggle is enabled only one card can be active at the same time, i.e., expanding one card will collapse the other active cards (much like a Tabs layout)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "accordion.clone(toggle=True, active=[0])"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}