Throughout the backend of Joomla!, there are several screens containing sliding panes full of options. This is done to save space on the screen, and to make specific settings easier to find. The CSS that creates the "tabbed" visual effect is automatically included in the backend. To use the siding panes, you only need to bring in the JavaScript and make some calls to a JPane object.

To test the panes, create a component in the backend at /administrator/components/com_js. Add the file js.php to this folder, and fill it with the following code:

<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
jimport('joomla.application.component.controller');
class JsController extends JController
{
function showPanes()
{
jimport('joomla.html.pane');
?>
<div class="col width-45">
<?php
$pane = &JPane::getInstance('sliders');
echo $pane->startPane('menu-pane');
echo $pane->startPanel('Name', 'info-name');
echo '<p>John Worthington</p>';
echo $pane...