Widget_Toggle()
Elementor toggle widget.
Description
Elementor widget that displays a collapsible display of content in an toggle style, allowing the user to open multiple items.
Changelog
Version | Description |
---|---|
1.0.0 | Introduced. |
Methods
- _content_template — Render toggle widget output in the editor.
- _register_controls — Register toggle widget controls.
- get_categories — Get widget categories.
- get_icon — Get widget icon.
- get_keywords — Get widget keywords.
- get_name — Get widget name.
- get_title — Get widget title.
- render — Render toggle widget output on the frontend.
Source
includes/widgets/toggle.php
class Widget_Toggle extends Widget_Base { /** * Retrieve toggle widget name. * * @access public * * @return string Widget name. */ public function get_name() { return 'toggle'; } /** * Retrieve toggle widget title. * * @access public * * @return string Widget title. */ public function get_title() { return __( 'Toggle', 'elementor' ); } /** * Retrieve toggle widget icon. * * @access public * * @return string Widget icon. */ public function get_icon() { return 'eicon-toggle'; } /** * Retrieve the list of categories the toggle widget belongs to. * * Used to determine where to display the widget in the editor. * * @access public * * @return array Widget categories. */ public function get_categories() { return [ 'general-elements' ]; } /** * Register toggle widget controls. * * Adds different input fields to allow the user to change and customize the widget settings. * * @access protected */ protected function _register_controls() { $this->start_controls_section( 'section_toggle', [ 'label' => __( 'Toggle', 'elementor' ), ] ); $this->add_control( 'tabs', [ 'label' => __( 'Toggle Items', 'elementor' ), 'type' => Controls_Manager::REPEATER, 'default' => [ [ 'tab_title' => __( 'Toggle #1', 'elementor' ), 'tab_content' => __( 'I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'elementor' ), ], [ 'tab_title' => __( 'Toggle #2', 'elementor' ), 'tab_content' => __( 'I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'elementor' ), ], ], 'fields' => [ [ 'name' => 'tab_title', 'label' => __( 'Title & Content', 'elementor' ), 'type' => Controls_Manager::TEXT, 'label_block' => true, 'default' => __( 'Toggle Title' , 'elementor' ), ], [ 'name' => 'tab_content', 'label' => __( 'Content', 'elementor' ), 'type' => Controls_Manager::WYSIWYG, 'default' => __( 'Toggle Content', 'elementor' ), 'show_label' => false, ], ], 'title_field' => '{{{ tab_title }}}', ] ); $this->add_control( 'view', [ 'label' => __( 'View', 'elementor' ), 'type' => Controls_Manager::HIDDEN, 'default' => 'traditional', ] ); $this->end_controls_section(); $this->start_controls_section( 'section_toggle_style', [ 'label' => __( 'Toggle', 'elementor' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'border_width', [ 'label' => __( 'Border Width', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'size' => 1, ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 10, ], ], 'selectors' => [ '{{WRAPPER}} .elementor-toggle .elementor-toggle-title' => 'border-width: {{SIZE}}{{UNIT}};', '{{WRAPPER}} .elementor-toggle .elementor-toggle-content' => 'border-width: {{SIZE}}{{UNIT}};', ], ] ); $this->add_control( 'border_color', [ 'label' => __( 'Border Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .elementor-toggle .elementor-toggle-content' => 'border-bottom-color: {{VALUE}};', '{{WRAPPER}} .elementor-toggle .elementor-toggle-title' => 'border-color: {{VALUE}};', ], ] ); $this->add_control( 'heading_title', [ 'label' => __( 'Title', 'elementor' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); $this->add_control( 'title_background', [ 'label' => __( 'Background', 'elementor' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .elementor-toggle .elementor-toggle-title' => 'background-color: {{VALUE}};', ], ] ); $this->add_control( 'title_color', [ 'label' => __( 'Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .elementor-toggle .elementor-toggle-title' => 'color: {{VALUE}};', ], 'scheme' => [ 'type' => Scheme_Color::get_type(), 'value' => Scheme_Color::COLOR_1, ], ] ); $this->add_control( 'tab_active_color', [ 'label' => __( 'Active Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .elementor-toggle .elementor-toggle-title.active' => 'color: {{VALUE}};', ], 'scheme' => [ 'type' => Scheme_Color::get_type(), 'value' => Scheme_Color::COLOR_4, ], ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'title_typography', 'selector' => '{{WRAPPER}} .elementor-toggle .elementor-toggle-title', 'scheme' => Scheme_Typography::TYPOGRAPHY_1, ] ); $this->add_control( 'heading_content', [ 'label' => __( 'Content', 'elementor' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); $this->add_control( 'content_background_color', [ 'label' => __( 'Background', 'elementor' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .elementor-toggle .elementor-toggle-content' => 'background-color: {{VALUE}};', ], ] ); $this->add_control( 'content_color', [ 'label' => __( 'Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .elementor-toggle .elementor-toggle-content' => 'color: {{VALUE}};', ], 'scheme' => [ 'type' => Scheme_Color::get_type(), 'value' => Scheme_Color::COLOR_3, ], ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'content_typography', 'selector' => '{{WRAPPER}} .elementor-toggle .elementor-toggle-content', 'scheme' => Scheme_Typography::TYPOGRAPHY_3, ] ); $this->end_controls_section(); } /** * Render toggle widget output on the frontend. * * Written in PHP and used to generate the final HTML. * * @access protected */ protected function render() { $tabs = $this->get_settings( 'tabs' ); ?> <div class="elementor-toggle"> <?php $counter = 1; ?> <?php foreach ( $tabs as $item ) : ?> <div class="elementor-toggle-title" data-tab="<?php echo $counter; ?>"> <span class="elementor-toggle-icon"> <i class="fa"></i> </span> <?php echo $item['tab_title']; ?> </div> <div class="elementor-toggle-content elementor-clearfix" data-tab="<?php echo $counter; ?>"><?php echo $this->parse_text_editor( $item['tab_content'] ); ?></div> <?php $counter++; endforeach; ?> </div> <?php } /** * Render toggle widget output in the editor. * * Written as a Backbone JavaScript template and used to generate the live preview. * * @access protected */ protected function _content_template() { ?> <div class="elementor-toggle"> <# if ( settings.tabs ) { var counter = 1; _.each(settings.tabs, function( item ) { #> <div class="elementor-toggle-title" data-tab="{{ counter }}"> <span class="elementor-toggle-icon"> <i class="fa"></i> </span> {{{ item.tab_title }}} </div> <div class="elementor-toggle-content elementor-clearfix" data-tab="{{ counter }}">{{{ item.tab_content }}}</div> <# counter++; } ); } #> </div> <?php } }