| Current File : /home/pacjaorg/public_html/nsa/components/com_sppagebuilder/addons/accordion/site.php |
<?php
/**
* @package SP Page Builder
* @author JoomShaper http://www.joomshaper.com
* @copyright Copyright (c) 2010 - 2021 JoomShaper
* @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 or later
*/
//no direct accees
defined ('_JEXEC') or die ('Restricted access');
class SppagebuilderAddonAccordion extends SppagebuilderAddons {
public function render() {
$settings = $this->addon->settings;
$class = (isset($settings->class) && $settings->class) ? $settings->class : '';
$style = (isset($settings->style) && $settings->style) ? $settings->style : 'panel-default';
$title = (isset($settings->title) && $settings->title) ? $settings->title : '';
$heading_selector = (isset($settings->heading_selector) && $settings->heading_selector) ? $settings->heading_selector : 'h3';
$icon_position = (isset($settings->icon_position) && $settings->icon_position) ? $settings->icon_position : '';
$output = '';
$output = '<div class="sppb-addon sppb-addon-accordion ' . $class . '">';
if($title) {
$output .= '<'.$heading_selector.' class="sppb-addon-title">' . $title . '</'.$heading_selector.'>';
}
$output .= '<div class="sppb-addon-content">';
$output .= '<div class="sppb-panel-group">';
if(isset($settings->sp_accordion_item) && is_array($settings->sp_accordion_item) && count($settings->sp_accordion_item)){
foreach ($settings->sp_accordion_item as $key => $item) {
$item_title = (isset($item->title) && $item->title) ? $item->title : '';
$output .= '<div class="sppb-panel sppb-'. $style .'">';
$output .= '<div class="sppb-panel-heading'. (($key == 0) ? ' active' : '') .' '.($icon_position == 'right' ? 'sppb-accordion-icon-position-right' : '').'" id="sppb-ac-heading-'.$this->addon->id.'-key-'.$key.'" aria-expanded="'. (($key == 0) ? 'true' : 'false') .'" aria-controls="sppb-ac-content-'.$this->addon->id.'-key-'.$key.'">';
if(isset($item->icon) && $item->icon != '' && $style == 'panel-custom') {
$output .= '<span class="sppb-accordion-icon-wrap" aria-label="'.trim(strip_tags($item_title)).'">';
$icon_arr = array_filter(explode(' ', $item->icon));
if (count($icon_arr) === 1) {
$item->icon = 'fa ' . $item->icon;
}
$output .= '<i class="' . $item->icon . '" aria-hidden="true"></i> ';
$output .= '</span>';//.sppb-accordion-icon-wrap
}
$output .= '<span class="sppb-panel-title" aria-label="'.trim(strip_tags($item_title)).'">';
if(isset($item->icon) && $item->icon != '' && $style !== 'panel-custom') {
$icon_arr = array_filter(explode(' ', $item->icon));
if (count($icon_arr) === 1) {
$item->icon = 'fa ' . $item->icon;
}
$output .= '<i class="' . $item->icon . '" aria-hidden="true"></i> ';
}
$output .= $item_title;
$output .= '</span>';//.sppb-panel-title
if($style !== 'panel-custom'){
$output .= '<span class="sppb-toggle-direction" aria-label="Toggle Direction Icon '.($key+1).'"><i class="fa fa-chevron-right" aria-hidden="true"></i></span>';
}
$output .= '</div>';//.sppb-panel-heading
$output .= '<div id="sppb-ac-content-'.$this->addon->id.'-key-'.$key.'" class="sppb-panel-collapse"' . (($key != 0) ? ' style="display: none;"' : '') . ' aria-labelledby="sppb-ac-heading-'.$this->addon->id.'-key-'.$key.'">';
$output .= '<div class="sppb-panel-body">';
$output .= isset($item->content) ? $item->content : '';
$output .= '</div>';//.sppb-panel-body
$output .= '</div>';//.sppb-panel-collapse
$output .= '</div>';//.sppb-panel
}
}
$output .= '</div>';
$output .= '</div>';
$output .= '</div>';
return $output;
}
public function css(){
$settings = $this->addon->settings;
$addon_id = '#sppb-addon-' . $this->addon->id;
$css = '';
//item style
$item_style = '';
$item_style .= (isset($settings->item_bg) && $settings->item_bg) ? 'background: ' . $settings->item_bg . ';' : '';
$item_style .= (isset($settings->item_border_color) && $settings->item_border_color) ? 'border-color: ' . $settings->item_border_color . ';' : '';
$item_style .= (isset($settings->item_border_width) && trim($settings->item_border_width)) ? 'border-width: ' . $settings->item_border_width . '; border-style: solid;' : '';
$item_style .= (isset($settings->item_border_radius) && $settings->item_border_radius) ? 'border-radius: ' . $settings->item_border_radius . 'px;' : '';
$item_style .= (isset($settings->item_margin) && trim($settings->item_margin)) ? 'margin: ' . $settings->item_margin . ';' : '';
$item_style .= (isset($settings->item_padding) && trim($settings->item_padding)) ? 'padding: ' . $settings->item_padding . ';' : '';
if($item_style){
$css .= $addon_id . ' .sppb-panel.sppb-panel-custom {';
$css .= $item_style;
if(!isset($settings->item_margin) || $settings->item_margin =='0px 0px 0px 0px' || !trim($settings->item_margin)){
$css .= 'border-top-width: 0;';
}
$css .= '}';
if(!isset($settings->item_margin) || $settings->item_margin =='0px 0px 0px 0px'|| !trim($settings->item_margin)){
if(isset($settings->item_border_width) && $settings->item_border_width){
$border_top = explode(' ',$settings->item_border_width)[0];
}
$css .= $addon_id . ' .sppb-panel-group > .sppb-panel.sppb-panel-custom:first-child {';
$css .= 'border-top-width: '.$border_top.';';
$css .= '}';
}
}
//title style
$title_style = '';
$title_style .= (isset($settings->item_title_bg_color) && $settings->item_title_bg_color) ? 'background: ' . $settings->item_title_bg_color . ';' : '';
$title_style .= (isset($settings->item_title_text_color) && $settings->item_title_text_color) ? 'color: ' . $settings->item_title_text_color . ';' : '';
$title_style .= (isset($settings->item_title_fontsize) && $settings->item_title_fontsize) ? 'font-size: ' . $settings->item_title_fontsize . 'px;' : '';
$title_style .= (isset($settings->item_title_lineheight) && $settings->item_title_lineheight) ? 'line-height: ' . $settings->item_title_lineheight . 'px;' : '';
$title_style .= (isset($settings->item_title_letterspace) && $settings->item_title_letterspace) ? 'letter-spacing: ' . $settings->item_title_letterspace . ';' : '';
$title_style .= (isset($settings->item_title_padding) && trim($settings->item_title_padding)) ? 'padding: ' . $settings->item_title_padding . ';' : '';
$item_title_font_style = (isset($settings->item_title_font_style) && $settings->item_title_font_style) ? $settings->item_title_font_style : '';
if(isset($item_title_font_style->underline) && $item_title_font_style->underline){
$title_style .= 'text-decoration:underline;';
}
if(isset($item_title_font_style->italic) && $item_title_font_style->italic){
$title_style .= 'font-style:italic;';
}
if(isset($item_title_font_style->uppercase) && $item_title_font_style->uppercase){
$title_style .= 'text-transform:uppercase;';
}
if(isset($item_title_font_style->weight) && $item_title_font_style->weight){
$title_style .= 'font-weight:'.$item_title_font_style->weight.';';
}
if($title_style){
$css .= $addon_id . ' .sppb-panel-custom .sppb-panel-heading {';
$css .= $title_style;
$css .= '}';
$css .= $addon_id . ' .sppb-panel-custom .sppb-panel-heading .sppb-panel-title{';
if (isset($settings->item_title_fontsize) && $settings->item_title_fontsize) {
$css .= 'font-size: ' . $settings->item_title_fontsize . 'px;';
}
if(isset($item_title_font_style->weight) && $item_title_font_style->weight){
$css .= 'font-weight:'.$item_title_font_style->weight.';';
}
$css .= '}';
}
//icon style
$icon_style = '';
$icon_style .= (isset($settings->icon_text_color) && $settings->icon_text_color) ? 'color: ' . $settings->icon_text_color . ';' : '';
$icon_style .= (isset($settings->icon_fontsize) && $settings->icon_fontsize) ? 'font-size: ' . $settings->icon_fontsize . 'px;' : '';
$icon_style .= (isset($settings->icon_margin) && trim($settings->icon_margin)) ? 'margin: ' . $settings->icon_margin . ';' : '';
if($icon_style){
$css .= $addon_id . ' .sppb-panel-custom .sppb-accordion-icon-wrap {';
$css .= $icon_style;
$css .= '}';
}
//content style
$content_style = '';
$content_style .= (isset($settings->item_content_padding) && trim($settings->item_content_padding)) ? 'padding: ' . $settings->item_content_padding . ';' : '';
$content_style .= (isset($settings->item_content_border_color) && $settings->item_content_border_color) ? 'border-color: ' . $settings->item_content_border_color . ';' : '';
$content_style .= (isset($settings->item_content_border_width) && trim($settings->item_content_border_width)) ? 'border-width: ' . $settings->item_content_border_width . ';border-style:solid;' : '';
if($content_style){
$css .= $addon_id . ' .sppb-panel-custom .sppb-panel-body {';
$css .= $content_style;
$css .= '}';
}
//active title style
$active_title_style = '';
$active_title_style .= (isset($settings->active_title_bg_color) && $settings->active_title_bg_color) ? 'background:' . $settings->active_title_bg_color . ';' : '';
$active_title_style .= (isset($settings->active_title_text_color) && $settings->active_title_text_color) ? 'color:' . $settings->active_title_text_color . ';' : '';
if($active_title_style){
$css .= $addon_id . ' .sppb-panel-custom .sppb-panel-heading.active {';
$css .= $active_title_style;
$css .= '}';
}
//Active icon style
$active_icon_style = '';
$active_icon_style .= (isset($settings->active_icon_color) && $settings->active_icon_color) ? 'color:' . $settings->active_icon_color . ';' : '';
$active_icon_style .= (isset($settings->active_icon_rotate) && $settings->active_icon_rotate) ? 'transform: rotate(' . $settings->active_icon_rotate . 'deg);' : '';
if($active_icon_style){
$css .= $addon_id . ' .sppb-panel-custom .active .sppb-accordion-icon-wrap {';
$css .= $active_icon_style;
$css .= '}';
}
//Responsive
//Item tab style
$item_style_sm = '';
$item_style_sm .= (isset($settings->item_margin_sm) && trim($settings->item_margin_sm)) ? 'margin: ' . $settings->item_margin_sm . ';' : '';
$item_style_sm .= (isset($settings->item_padding_sm) && trim($settings->item_padding_sm)) ? 'padding: ' . $settings->item_padding_sm . ';' : '';
//Title tab style
$title_style_sm = '';
$title_style_sm .= (isset($settings->item_title_padding_sm) && trim($settings->item_title_padding_sm)) ? 'padding: ' . $settings->item_title_padding_sm . ';' : '';
$title_style_sm .= (isset($settings->item_title_fontsize_sm) && $settings->item_title_fontsize_sm) ? 'font-size: ' . $settings->item_title_fontsize_sm . 'px;' : '';
$font_size_sm = (isset($settings->item_title_fontsize_sm) && $settings->item_title_fontsize_sm) ? 'font-size: ' . $settings->item_title_fontsize_sm . 'px;' : '';
$title_style_sm .= (isset($settings->item_title_lineheight_sm) && $settings->item_title_lineheight_sm) ? 'line-height: ' . $settings->item_title_lineheight_sm . 'px;' : '';
//Icon tab style
$icon_style_sm = '';
$icon_style_sm .= (isset($settings->icon_fontsize_sm) && $settings->icon_fontsize_sm) ? 'font-size: ' . $settings->icon_fontsize_sm . 'px;' : '';
$icon_style_sm .= (isset($settings->icon_margin_sm) && trim($settings->icon_margin_sm)) ? 'margin: ' . $settings->icon_margin_sm . ';' : '';
//Content tab style
$content_style_sm = (isset($settings->item_content_padding_sm) && trim($settings->item_content_padding_sm)) ? 'padding: ' . $settings->item_content_padding_sm . ';' : '';
if($item_style_sm || $title_style_sm || $icon_style_sm || $content_style_sm){
$css .= '@media (min-width: 768px) and (max-width: 991px) {';
if($item_style_sm){
$css .= $addon_id . ' .sppb-panel.sppb-panel-custom {';
$css .= $item_style_sm;
$css .= '}';
}
if($title_style_sm){
$css .= $addon_id . ' .sppb-panel-custom .sppb-panel-heading {';
$css .= $title_style_sm;
$css .= '}';
$css .= $addon_id . ' .sppb-panel-custom .sppb-panel-heading .sppb-panel-title{';
$css .= $font_size_sm;
$css .= '}';
}
if($icon_style_sm){
$css .= $addon_id . ' .sppb-panel-custom .sppb-accordion-icon-wrap {';
$css .= $icon_style_sm;
$css .= '}';
}
if($content_style_sm){
$css .= $addon_id . ' .sppb-panel-custom .sppb-panel-body {';
$css .= $content_style_sm;
$css .= '}';
}
$css .= '}';
}
//Item mobile style
$item_style_xs = '';
$item_style_xs .= (isset($settings->item_margin_xs) && trim($settings->item_margin_xs)) ? 'margin: ' . $settings->item_margin_xs . ';' : '';
$item_style_xs .= (isset($settings->item_padding_xs) && trim($settings->item_padding_xs)) ? 'padding: ' . $settings->item_padding_xs . ';' : '';
//Title mobile style
$title_style_xs = '';
$title_style_xs .= (isset($settings->item_title_padding_xs) && trim($settings->item_title_padding_xs)) ? 'padding: ' . $settings->item_title_padding_xs . ';' : '';
$title_style_xs .= (isset($settings->item_title_fontsize_xs) && $settings->item_title_fontsize_xs) ? 'font-size: ' . $settings->item_title_fontsize_xs . 'px;' : '';
$font_size_xs = (isset($settings->item_title_fontsize_xs) && $settings->item_title_fontsize_xs) ? 'font-size: ' . $settings->item_title_fontsize_xs . 'px;' : '';
$title_style_xs .= (isset($settings->item_title_lineheight_xs) && $settings->item_title_lineheight_xs) ? 'line-height: ' . $settings->item_title_lineheight_xs . 'px;' : '';
//Icon mobile style
$icon_style_xs = '';
$icon_style_xs .= (isset($settings->icon_fontsize_xs) && $settings->icon_fontsize_xs) ? 'font-size: ' . $settings->icon_fontsize_xs . 'px;' : '';
$icon_style_xs .= (isset($settings->icon_margin_xs) && trim($settings->icon_margin_xs)) ? 'margin: ' . $settings->icon_margin_xs . ';' : '';
//Content mobile style
$content_style_xs = (isset($settings->item_content_padding_xs) && trim($settings->item_content_padding_xs)) ? 'padding: ' . $settings->item_content_padding_xs . ';' : '';
if($item_style_xs || $title_style_xs || $icon_style_xs || $content_style_xs){
$css .= '@media (max-width: 767px) {';
if($item_style_xs){
$css .= $addon_id . ' .sppb-panel.sppb-panel-custom {';
$css .= $item_style_xs;
$css .= '}';
}
if($title_style_xs){
$css .= $addon_id . ' .sppb-panel-custom .sppb-panel-heading {';
$css .= $title_style_xs;
$css .= '}';
$css .= $addon_id . ' .sppb-panel-custom .sppb-panel-heading .sppb-panel-title{';
$css .= $font_size_xs;
$css .= '}';
}
if($icon_style_xs){
$css .= $addon_id . ' .sppb-panel-custom .sppb-accordion-icon-wrap {';
$css .= $icon_style_xs;
$css .= '}';
}
if($content_style_xs){
$css .= $addon_id . ' .sppb-panel-custom .sppb-panel-body {';
$css .= $content_style_xs;
$css .= '}';
}
$css .= '}';
}
return $css;
}
public function js() {
$settings = $this->addon->settings;
$addon_id = '#sppb-addon-' . $this->addon->id;
$openitem = (isset($settings->openitem) && $settings->openitem) ? $settings->openitem : '';
if ($openitem) {
$js ="jQuery(document).ready(function($){'use strict';
if('".$openitem."' === 'hide') {
$( '".$addon_id."' + ' .sppb-addon-accordion .sppb-panel-heading').removeClass('active');
} else {
$( '".$addon_id."' + ' .sppb-addon-accordion .sppb-panel-heading').addClass('active');
}
$( '".$addon_id."' + ' .sppb-addon-accordion .sppb-panel-collapse')." . $openitem . "();
});";
return $js;
}
return ;
}
public static function getTemplate()
{
$output = '
<style type="text/css">
<# if(data.style == "panel-custom") { #>
#sppb-addon-{{ data.id }} .sppb-panel.sppb-panel-custom {
background:{{data.item_bg}};
border-color: {{data.item_border_color}};
border-color: {{data.item_border_color}};
border-width: {{data.item_border_width}};
border-radius: {{data.item_border_radius}}px;
<# if(_.isObject(data.item_margin)) { #>
margin: {{data.item_margin.md}};
<# } else { #>
margin: {{data.item_margin}};
<# }
if(_.isObject(data.item_padding)) { #>
padding: {{data.item_padding.md}};
<# } else { #>
padding: {{data.item_padding}};
<# }
if(_.trim(data.item_border_width)){ #>
border-style: solid;
<# }
if(_.isObject(data.item_margin)){
if(data.item_margin.md =="0px 0px 0px 0px" || !_.trim(data.item_margin.md)){ #>
border-top-width: 0;
<# }
} #>
}
<# if(_.isObject(data.item_margin)){
if(data.item_margin.md =="0px 0px 0px 0px" || !_.trim(data.item_margin.md)){
let borderTop = _.split(data.item_border_width, " ")[0];
#>
#sppb-addon-{{ data.id }} .sppb-panel-group > .sppb-panel.sppb-panel-custom:first-child {
border-top-width: {{borderTop}};
}
<# }
} #>
#sppb-addon-{{ data.id }} .sppb-panel-custom .sppb-panel-heading {
background: {{data.item_title_bg_color}};
color: {{data.item_title_text_color}};
<# if (_.isObject(data.item_title_fontsize)) { #>
font-size: {{data.item_title_fontsize.md}}px;
<# } else { #>
font-size: {{data.item_title_fontsize}}px;
<# }
if (_.isObject(data.item_title_lineheight)) { #>
line-height: {{data.item_title_lineheight.md}}px;
<# } else { #>
line-height: {{data.item_title_lineheight}}px;
<# }
if (_.isObject(data.item_title_padding)) { #>
padding: {{data.item_title_padding.md}};
<# } else { #>
padding: {{data.item_title_padding}};
<# }
if(_.isObject(data.item_title_font_style)){
if(data.item_title_font_style.underline){ #>
text-decoration:underline;
<# }
if(data.item_title_font_style.italic){ #>
font-style:italic;
<# }
if(data.item_title_font_style.uppercase){ #>
text-transform:uppercase;
<# }
if(data.item_title_font_style.weight){ #>
font-weight:{{data.item_title_font_style.weight}};
<# }
} #>
letter-spacing: {{data.item_title_letterspace}};
}
#sppb-addon-{{ data.id }} .sppb-panel-custom .sppb-panel-heading .sppb-panel-title{
<# if (!_.isEmpty(data.item_title_fontsize) && data.item_title_fontsize) { #>
<# if(_.isObject(data.item_title_fontsize)){ #>
font-size: {{data.item_title_fontsize.md}}px;
<# } else { #>
font-size: {{data.item_title_fontsize}}px;
<# } #>
<# }
if(_.isObject(data.item_title_font_style)){
if(data.item_title_font_style.weight){ #>
font-weight:{{data.item_title_font_style.weight}};
<# }
} #>
}
#sppb-addon-{{ data.id }} .sppb-panel-custom .sppb-accordion-icon-wrap {
color: {{data.icon_text_color}};
<# if(_.isObject(data.icon_fontsize)){ #>
font-size: {{data.icon_fontsize.md}}px;
<# } else { #>
font-size: {{data.icon_fontsize}}px;
<# }
if(_.isObject(data.icon_margin)) { #>
margin: {{data.icon_margin.md}};
<# } else { #>
margin: {{data.icon_margin}};
<# } #>
}
#sppb-addon-{{ data.id }} .sppb-panel-custom .sppb-panel-body {
border-color: {{data.item_content_border_color}};
border-width: {{data.item_content_border_width}};
<# if(_.trim(data.item_content_border_width)){ #>
border-style:solid;
<# }
if (_.isObject(data.item_content_padding)) { #>
padding: {{data.item_content_padding.md}};
<# } else { #>
padding: {{data.item_content_padding}};
<# } #>
}
#sppb-addon-{{ data.id }} .sppb-panel-custom .sppb-panel-heading.active {
background: {{data.active_title_bg_color}};
color: {{data.active_title_text_color}};
}
#sppb-addon-{{ data.id }} .sppb-panel-custom .active .sppb-accordion-icon-wrap {
color:{{data.active_icon_color}};
transform: rotate({{data.active_icon_rotate}}deg);
}
@media (min-width: 768px) and (max-width: 991px) {
#sppb-addon-{{ data.id }} .sppb-panel.sppb-panel-custom {
<# if(_.isObject(data.item_margin)) { #>
margin: {{data.item_margin.sm}};
<# }
if(_.isObject(data.item_padding)) { #>
padding: {{data.item_padding.sm}};
<# } #>
}
#sppb-addon-{{ data.id }} .sppb-panel-custom .sppb-panel-heading {
<# if (_.isObject(data.item_title_fontsize)) { #>
font-size: {{data.item_title_fontsize.sm}}px;
<# }
if (_.isObject(data.item_title_lineheight)) { #>
line-height: {{data.item_title_lineheight.sm}}px;
<# }
if (_.isObject(data.item_title_padding)) { #>
padding: {{data.item_title_padding.sm}};
<# } #>
}
<# if (!_.isEmpty(data.item_title_fontsize) && data.item_title_fontsize) { #>
#sppb-addon-{{ data.id }} .sppb-panel-custom .sppb-panel-heading .sppb-panel-title{
<# if(_.isObject(data.item_title_fontsize)){ #>
font-size: {{data.item_title_fontsize.sm}}px;
<# } #>
}
<# } #>
#sppb-addon-{{ data.id }} .sppb-panel-custom .sppb-accordion-icon-wrap {
<# if(_.isObject(data.icon_fontsize)){ #>
font-size: {{data.icon_fontsize.sm}}px;
<# }
if(_.isObject(data.icon_margin)) { #>
margin: {{data.icon_margin.sm}};
<# } #>
}
#sppb-addon-{{ data.id }} .sppb-panel-custom .sppb-panel-body {
<# if (_.isObject(data.item_content_padding)) { #>
padding: {{data.item_content_padding.sm}};
<# } #>
}
}
@media (max-width: 767px) {
#sppb-addon-{{ data.id }} .sppb-panel.sppb-panel-custom {
<# if(_.isObject(data.item_margin)) { #>
margin: {{data.item_margin.xs}};
<# }
if(_.isObject(data.item_padding)) { #>
padding: {{data.item_padding.xs}};
<# } #>
}
#sppb-addon-{{ data.id }} .sppb-panel-custom .sppb-panel-heading {
<# if (_.isObject(data.item_title_fontsize)) { #>
font-size: {{data.item_title_fontsize.xs}}px;
<# }
if (_.isObject(data.item_title_lineheight)) { #>
line-height: {{data.item_title_lineheight.xs}}px;
<# }
if (_.isObject(data.item_title_padding)) { #>
padding: {{data.item_title_padding.xs}};
<# } #>
}
<# if (!_.isEmpty(data.item_title_fontsize) && data.item_title_fontsize) { #>
#sppb-addon-{{ data.id }} .sppb-panel-custom .sppb-panel-heading .sppb-panel-title{
<# if(_.isObject(data.item_title_fontsize)){ #>
font-size: {{data.item_title_fontsize.xs}}px;
<# } #>
}
<# } #>
#sppb-addon-{{ data.id }} .sppb-panel-custom .sppb-accordion-icon-wrap {
<# if(_.isObject(data.icon_fontsize)){ #>
font-size: {{data.icon_fontsize.xs}}px;
<# }
if(_.isObject(data.icon_margin)) { #>
margin: {{data.icon_margin.xs}};
<# } #>
}
#sppb-addon-{{ data.id }} .sppb-panel-custom .sppb-panel-body {
<# if (_.isObject(data.item_content_padding)) { #>
padding: {{data.item_content_padding.xs}};
<# } #>
}
}
<# } #>
</style>
<div class="sppb-addon sppb-addon-accordion {{ data.class }}">
<#
if( !_.isEmpty( data.title ) ){ #><{{ data.heading_selector }} class="sppb-addon-title">{{ data.title }}</{{ data.heading_selector }}><# } #>
<div class="sppb-addon-content">
<div class="sppb-panel-group">
<# _.each(data.sp_accordion_item, function(accordion_item, key){ #>
<# var activeClass = ((key == 0 || data.openitem == "show") && data.openitem != "hide") ? "active" : ""; #>
<div class="sppb-panel sppb-{{ data.style }}">
<div class="sppb-panel-heading {{ activeClass }} <# if(data.icon_position == "right"){ #> sppb-accordion-icon-position-right <# } #>">
<# if(accordion_item.icon != "" && data.style == "panel-custom"){ #>
<span class="sppb-accordion-icon-wrap">
<#
let icon_arr = (typeof accordion_item.icon !== "undefined" && accordion_item.icon) ? accordion_item.icon.split(" ") : "";
let icon_name = icon_arr.length === 1 ? "fa "+accordion_item.icon : accordion_item.icon;
#>
<i class="{{ icon_name }}"></i>
</span>
<# } #>
<span class="sppb-panel-title">
<# if(accordion_item.icon != "" && data.style !== "panel-custom"){
let title_icon_arr = (typeof accordion_item.icon !== "undefined" && accordion_item.icon) ? accordion_item.icon.split(" ") : "";
let title_icon_name = title_icon_arr.length === 1 ? "fa "+accordion_item.icon : accordion_item.icon;
#>
<i class="{{ title_icon_name }}"></i>
<# } #>
{{ accordion_item.title }}
</span>
<# if(data.style !== "panel-custom") { #>
<span class="sppb-toggle-direction"><i class="fa fa-chevron-right"></i></span>
<# } #>
</div>
<# var panelStyle = ((key != 0 || data.openitem == "hide") && data.openitem != "show") ? "display: none;" : ""; #>
<div class="sppb-panel-collapse" style="{{ panelStyle }}">
<div class="sppb-panel-body">
<#
var htmlContent = "";
_.each(accordion_item.content, function(content){
htmlContent += content;
});
#>
{{{ htmlContent }}}
</div>
</div>
</div>
<# }); #>
</div>
</div>
</div>';
return $output;
}
}