if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
* Elementor toggle widget.
* Elementor widget that displays a collapsible display of content in an toggle
* style, allowing the user to open multiple items.
class Widget_Toggle extends Widget_Base {
* Retrieve toggle widget name.
* @return string Widget name.
public function get_name() {
* Retrieve toggle widget title.
* @return string Widget title.
public function get_title() {
return esc_html__( 'Toggle', 'elementor' );
* Retrieve toggle widget icon.
* @return string Widget icon.
public function get_icon() {
* Retrieve the list of keywords the widget belongs to.
* @return array Widget keywords.
public function get_keywords() {
return [ 'tabs', 'accordion', 'toggle' ];
protected function is_dynamic_content(): bool {
* Get style dependencies.
* Retrieve the list of style dependencies the widget requires.
* @return array Widget style dependencies.
public function get_style_depends(): array {
return [ 'widget-toggle' ];
* Hide widget from panel.
* Hide the toggle widget from the panel if nested-accordion experiment is active.
public function show_in_panel(): bool {
return ! Plugin::$instance->experiments->is_feature_active( 'nested-elements', true );
public function has_widget_inner_wrapper(): bool {
return ! Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
* Register toggle widget controls.
* Adds different input fields to allow the user to change and customize the widget settings.
protected function register_controls() {
$this->start_controls_section(
'label' => esc_html__( 'Toggle', 'elementor' ),
$repeater = new Repeater();
'label' => esc_html__( 'Title', 'elementor' ),
'type' => Controls_Manager::TEXT,
'default' => esc_html__( 'Toggle Title', 'elementor' ),
'label' => esc_html__( 'Content', 'elementor' ),
'type' => Controls_Manager::WYSIWYG,
'default' => esc_html__( 'Toggle Content', 'elementor' ),
if ( Plugin::$instance->widgets_manager->get_widget_types( 'nested-accordion' ) ) {
$this->add_deprecation_message(
'You are currently editing a Toggle widget in its old version. Drag a new Accordion widget onto your page to use a newer version, providing nested capabilities.',
'label' => esc_html__( 'Toggle Items', 'elementor' ),
'type' => Controls_Manager::REPEATER,
'fields' => $repeater->get_controls(),
'tab_title' => esc_html__( 'Toggle #1', 'elementor' ),
'tab_content' => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'elementor' ),
'tab_title' => esc_html__( 'Toggle #2', 'elementor' ),
'tab_content' => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'elementor' ),
'title_field' => '{{{ tab_title }}}',
'label' => esc_html__( 'Icon', 'elementor' ),
'type' => Controls_Manager::ICONS,
'fa4compatibility' => 'icon',
'value' => 'fas fa-caret' . ( is_rtl() ? '-left' : '-right' ),
'label' => esc_html__( 'Active Icon', 'elementor' ),
'type' => Controls_Manager::ICONS,
'fa4compatibility' => 'icon_active',
'value' => 'fas fa-caret-up',
'selected_icon[value]!' => '',
'label' => esc_html__( 'Title HTML Tag', 'elementor' ),
'type' => Controls_Manager::SELECT,
'label' => esc_html__( 'FAQ Schema', 'elementor' ),
'type' => Controls_Manager::SWITCHER,
$this->end_controls_section();
$this->start_controls_section(
'label' => esc_html__( 'Toggle', 'elementor' ),
'tab' => Controls_Manager::TAB_STYLE,
'label' => esc_html__( 'Border Width', 'elementor' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
'{{WRAPPER}} .elementor-tab-title' => 'border-width: {{SIZE}}{{UNIT}};',
'{{WRAPPER}} .elementor-tab-content' => 'border-width: {{SIZE}}{{UNIT}};',
'label' => esc_html__( 'Border Color', 'elementor' ),
'type' => Controls_Manager::COLOR,
'{{WRAPPER}} .elementor-tab-content' => 'border-block-end-color: {{VALUE}};',
'{{WRAPPER}} .elementor-tab-title' => 'border-color: {{VALUE}};',
$this->add_responsive_control(
'label' => esc_html__( 'Space Between', 'elementor' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px', 'em', 'rem', 'custom' ],
'{{WRAPPER}} .elementor-toggle-item:not(:last-child)' => 'margin-block-end: {{SIZE}}{{UNIT}}',
$this->add_group_control(
Group_Control_Box_Shadow::get_type(),
'selector' => '{{WRAPPER}} .elementor-toggle-item',
$this->end_controls_section();
$this->start_controls_section(
'section_toggle_style_title',
'label' => esc_html__( 'Title', 'elementor' ),
'tab' => Controls_Manager::TAB_STYLE,
'label' => esc_html__( 'Background', 'elementor' ),
'type' => Controls_Manager::COLOR,
'{{WRAPPER}} .elementor-tab-title' => 'background-color: {{VALUE}};',
// The title selector specificity is to override Theme Style
'label' => esc_html__( 'Color', 'elementor' ),
'type' => Controls_Manager::COLOR,
'{{WRAPPER}} .elementor-toggle-title, {{WRAPPER}} .elementor-toggle-icon' => 'color: {{VALUE}};',
'{{WRAPPER}} .elementor-toggle-icon svg' => 'fill: {{VALUE}};',
'default' => Global_Colors::COLOR_PRIMARY,
'label' => esc_html__( 'Active Color', 'elementor' ),
'type' => Controls_Manager::COLOR,
'{{WRAPPER}} .elementor-tab-title.elementor-active a, {{WRAPPER}} .elementor-tab-title.elementor-active .elementor-toggle-icon' => 'color: {{VALUE}};',
'default' => Global_Colors::COLOR_ACCENT,
$this->add_group_control(
Group_Control_Typography::get_type(),
'name' => 'title_typography',
'selector' => '{{WRAPPER}} .elementor-toggle-title',
'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
$this->add_group_control(
Group_Control_Text_Shadow::get_type(),
'name' => 'title_shadow',
'selector' => '{{WRAPPER}} .elementor-toggle-title',
$this->add_responsive_control(
'label' => esc_html__( 'Padding', 'elementor' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
'{{WRAPPER}} .elementor-tab-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
$this->end_controls_section();
$this->start_controls_section(
'section_toggle_style_icon',
'label' => esc_html__( 'Icon', 'elementor' ),
'tab' => Controls_Manager::TAB_STYLE,
'selected_icon[value]!' => '',
'label' => esc_html__( 'Alignment', 'elementor' ),
'type' => Controls_Manager::CHOOSE,
'title' => esc_html__( 'Start', 'elementor' ),
'icon' => 'eicon-h-align-left',
'title' => esc_html__( 'End', 'elementor' ),
'icon' => 'eicon-h-align-right',
'default' => is_rtl() ? 'right' : 'left',
'label' => esc_html__( 'Color', 'elementor' ),
'type' => Controls_Manager::COLOR,
'{{WRAPPER}} .elementor-tab-title .elementor-toggle-icon i:before' => 'color: {{VALUE}};',
'{{WRAPPER}} .elementor-tab-title .elementor-toggle-icon svg' => 'fill: {{VALUE}};',
'label' => esc_html__( 'Active Color', 'elementor' ),
'type' => Controls_Manager::COLOR,
'{{WRAPPER}} .elementor-tab-title.elementor-active .elementor-toggle-icon i:before' => 'color: {{VALUE}};',
'{{WRAPPER}} .elementor-tab-title.elementor-active .elementor-toggle-icon svg' => 'fill: {{VALUE}};',
$this->add_responsive_control(
'label' => esc_html__( 'Spacing', 'elementor' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px', 'em', 'rem', 'custom' ],