Snippets

Jan Pozivil Bootstrap3 Accordion

Created by Jan Pozivil last modified
<?php
/* Default values for the Accordion
 * $defaultArgs = array(
 * 'accordionId' => 'accordion',
 * 'expanded'    => true,
 * 'accPanels'   => array(
 *   array(
 *         'heading' => 'Panel Heading 1',
 *         'body' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque aspernatur, adipisci! Doloremque quas magni quo minima odit, sequi assumenda culpa delectus dolorem at.'
 *     ),
 *     array(
 *           'heading' => 'Panel Heading 2',
 *           'body' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem dolorem voluptate eos possimus corporis odio sequi dolor maiores quo necessitatibus.'
 *       ),
 *     array(
 *           'heading' => 'Panel Heading 3',
 *           'body' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, provident consequuntur sunt voluptates voluptatem ipsam nihil sed saepe minus velit et tempore.'
 *       )
 *   )
 * );
 * Accordion Methods:
 * $Accordion->get_accordion( $defaultArgs );
 *  - returns string of HTML code
 *
 * $Accordion->the_accordion( $defaultArgs );
 *  - outputs HTML
 */
  class Accordion {

    private $accordionId = 'accordion';
    private $expanded = true;
    private $accPanels   = array(
      array(
            'heading' => 'Panel Heading 1',
            'body' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque aspernatur, adipisci! Doloremque quas magni quo minima odit, sequi assumenda culpa delectus dolorem at.'
        ),
      array(
            'heading' => 'Panel Heading 2',
            'body' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem dolorem voluptate eos possimus corporis odio sequi dolor maiores quo necessitatibus.'
        ),
      array(
            'heading' => 'Panel Heading 3',
            'body' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, provident consequuntur sunt voluptates voluptatem ipsam nihil sed saepe minus velit et tempore.'
        )
      );

    public function __construct( array $args = [] ) {
      foreach ($this as $property => $value) {
        if ( isset( $args[$property] ) || array_key_exists( $property, $args ) ) {
          $this->$property = $args[$property];
        }
      }
    }

    public function the_accordion() {
      echo $this->get_accordion();
    }
    //get accordion
    public function get_accordion() {
      $index = 0;
      $html  = "";
      $html .= "<div class='panel-group' id='{$this->accordionId}' role='tablist' aria-multiselectable='true'>";
      foreach ( $this->accPanels as $panel ) {
        $html .= $this->get_panel( $panel, $index );
        $index++;
        $this->expanded = false; // panel 2nd+ is collapsed
      }
      $html .= "</div>";
      return $html;
    }

    //get panel
    private function get_panel( array $panel, $panelIndex ) {
      $html  = "";
      $html .= "<div class='panel panel-default'>";
      $html .= $this->get_panel_heading( $panel['heading'], $panelIndex );
      $html .= $this->get_panel_body( $panel['body'], $panelIndex );
      $html .= "</div>";
      return $html;
    }
    //get panel's heading
    private function get_panel_heading( string $panelHeading, $panelIndex ) {
      $ariaExpanded = ($this->expanded) ? 'true' : 'false';
      $html  = "";
      $html .= "<div class='panel-heading' role='tab' id='heading_{$panelIndex}'>";
      $html .= "  <h4 class='panel-title'>";
      // $html .= ($this->expanded) ? "<span class='glyphicon glyphicon-chevron-down' aria-hidden='true'></span>" : "<span class='glyphicon glyphicon-chevron-right' aria-hidden='true'></span>";
      $html .= "    <a role='button' data-toggle='collapse' data-parent='#{$this->accordionId}' href='#collapse_{$this->accordionId}_{$panelIndex}' aria-expanded='{$ariaExpanded}' aria-controls='collapse_{$panelIndex}'>";
      $html .= "     {$panelHeading}";
      $html .= "    </a>";
      $html .= "  </h4>";
      $html .= "</div>";
      return $html;
    }

    // get panel's body
    private function get_panel_body ( string $panelBody, $panelIndex ) {
      $open = ($this->expanded) ? 'in' : '';
      $html  = "";
      $html .= "<div id='collapse_{$this->accordionId}_{$panelIndex}' class='panel-collapse collapse {$open}' role='tabpanel' aria-labelledby='heading_{$panelIndex}'>";
      $html .= "      <div class='panel-body'>";
      $html .= "        {$panelBody}";
      $html .= "      </div>";
      $html .= "    </div>";
      return $html;
    }

  }
?>

Comments (0)

HTTPS SSH

You can clone a snippet to your computer for local editing. Learn more.