Skip to content

Commit 385e031

Browse files
actuallyakashactuallyakash
committed
[Accordion] Fixes
1 parent e271150 commit 385e031

File tree

2 files changed

+115
-48
lines changed

2 files changed

+115
-48
lines changed

‎assets/css/accordion.css‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,14 +37,18 @@
3737
font-weight: bold;
3838
float: left;
3939
margin-left: 5px;
40+
padding: 5px;
41+
}
42+
43+
.mighty-accordion .mt-panel .accordion .accordion-icons i {
44+
padding: 5px;
4045
}
4146

4247
.mighty-accordion .mt-panel .active .accordion-active-icon {
4348
display: block;
4449
}
4550

4651
.mighty-accordion .mt-panel .panel {
47-
padding: 0 18px;
4852
background-color: white;
4953
max-height: 0;
5054
overflow: hidden;

‎widgets/accordion.php‎

Lines changed: 110 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -79,26 +79,10 @@ protected function _register_controls() {
7979
);
8080

8181
$repeater->add_control(
82-
'accordion_icon',
82+
'accordion_main_icon',
8383
[
8484
'label' => __( 'Icon', 'mighty' ),
8585
'type' => Controls_Manager::ICONS,
86-
'default' => [
87-
'value' => 'fas fa-chevron-right',
88-
'library' => 'solid',
89-
],
90-
]
91-
);
92-
93-
$repeater->add_control(
94-
'active_accordion_icon',
95-
[
96-
'label' => __( 'Active Icon', 'mighty' ),
97-
'type' => Controls_Manager::ICONS,
98-
'default' => [
99-
'value' => 'fas fa-chevron-down',
100-
'library' => 'solid',
101-
],
10286
]
10387
);
10488

@@ -111,12 +95,12 @@ protected function _register_controls() {
11195
'default' => [
11296
[
11397
'accordion_title' => __( 'Accordion 1', 'mighty' ),
114-
'accordion_icon' => __( 'fas fa-plus', 'mighty' ),
98+
'accordion_main_icon' => __( 'fas fa-plus', 'mighty' ),
11599
'accordion_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.', 'mighty' ),
116100
],
117101
[
118102
'accordion_title' => __( 'Accordion 2', 'mighty' ),
119-
'accordion_icon' => __( 'fas fa-plus', 'mighty' ),
103+
'accordion_main_icon' => __( 'fas fa-plus', 'mighty' ),
120104
'accordion_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.', 'mighty' ),
121105
],
122106
],
@@ -176,11 +160,12 @@ protected function _register_controls() {
176160
);
177161

178162
$this->end_controls_section();
179-
163+
180164
$this->start_controls_section(
181-
'section_title',
165+
'section_title_style',
182166
[
183167
'label' => __( 'Title', 'mighty' ),
168+
'tab' => Controls_Manager::TAB_STYLE,
184169
]
185170
);
186171

@@ -202,16 +187,6 @@ protected function _register_controls() {
202187
'separator' => 'before',
203188
]
204189
);
205-
206-
$this->end_controls_section();
207-
208-
$this->start_controls_section(
209-
'section_title_style',
210-
[
211-
'label' => __( 'Title', 'mighty' ),
212-
'tab' => Controls_Manager::TAB_STYLE,
213-
]
214-
);
215190

216191
$this->add_control(
217192
'title_color',
@@ -234,7 +209,7 @@ protected function _register_controls() {
234209
'label' => __( 'Background', 'mighty' ),
235210
'type' => Controls_Manager::COLOR,
236211
'selectors' => [
237-
'{{WRAPPER}} .mighty-accordion .mt-panel .accordion .mt-accordion-title' => 'background-color: {{VALUE}};',
212+
'{{WRAPPER}} .mighty-accordion .mt-panel .accordion' => 'background-color: {{VALUE}};',
238213
],
239214
]
240215
);
@@ -264,7 +239,7 @@ protected function _register_controls() {
264239
'value' => Scheme_Color::COLOR_1,
265240
],
266241
'selectors' => [
267-
'{{WRAPPER}} .mighty-accordion .mt-panel .active .mt-accordion-title' => 'background-color: {{VALUE}}',
242+
'{{WRAPPER}} .mighty-accordion .mt-panel .active' => 'background-color: {{VALUE}}',
268243
],
269244
]
270245
);
@@ -273,8 +248,8 @@ protected function _register_controls() {
273248
Group_Control_Typography::get_type(),
274249
[
275250
'name' => 'title_typography',
276-
'selector' => '{{WRAPPER}} .mighty-accordion .mt-panel .accordion .mt-accordion-title',
277251
'scheme' => Scheme_Typography::TYPOGRAPHY_1,
252+
'selector' => '{{WRAPPER}} .mighty-accordion .mt-panel .accordion .mt-accordion-title',
278253
]
279254
);
280255

@@ -290,6 +265,27 @@ protected function _register_controls() {
290265
]
291266
);
292267

268+
$this->add_group_control(
269+
Group_Control_Border::get_type(),
270+
[
271+
'name' => 'title_border',
272+
'label' => __( 'Border Type', 'mighty' ),
273+
'selector' => '{{WRAPPER}} .mighty-accordion .accordion',
274+
]
275+
);
276+
277+
$this->add_control(
278+
'title_border_radius',
279+
[
280+
'label' => __( 'Border Radius', 'mighty' ),
281+
'type' => Controls_Manager::DIMENSIONS,
282+
'size_units' => [ 'px' ],
283+
'selectors' => [
284+
'{{WRAPPER}} .mighty-accordion .accordion' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
285+
],
286+
]
287+
);
288+
293289
$this->end_controls_section();
294290

295291
$this->start_controls_section(
@@ -298,7 +294,56 @@ protected function _register_controls() {
298294
'label' => __( 'Icon', 'mighty' ),
299295
'tab' => Controls_Manager::TAB_STYLE,
300296
]
301-
);
297+
);
298+
299+
$this->add_control(
300+
'open_close_icon',
301+
[
302+
'label' => __( 'Select Icon', 'mighty' ),
303+
'type' => \Elementor\Controls_Manager::CHOOSE,
304+
'options' => [
305+
'fa-angle-down' => [
306+
'title' => __( 'Angle', 'mighty' ),
307+
'icon' => 'fas fa-angle-down',
308+
],
309+
'fa-plus' => [
310+
'title' => __( 'Plus', 'mighty' ),
311+
'icon' => 'fas fa-plus',
312+
],
313+
'fa-arrow-down' => [
314+
'title' => __( 'Arrow', 'mighty' ),
315+
'icon' => 'fas fa-arrow-down',
316+
],
317+
'fa-sort-down' => [
318+
'title' => __( 'Sort', 'mighty' ),
319+
'icon' => 'fas fa-sort-down',
320+
],
321+
],
322+
'default' => 'fa-angle-down',
323+
'toggle' => true,
324+
]
325+
);
326+
327+
$this->add_responsive_control(
328+
'icon_size',
329+
[
330+
'label' => __( 'Font Size', 'mighty' ),
331+
'type' => Controls_Manager::SLIDER,
332+
'range' => [
333+
'px' => [
334+
'min' => 0,
335+
'max' => 100,
336+
],
337+
],
338+
'default' => [
339+
'unit' => 'px',
340+
'size' => 15,
341+
],
342+
'selectors' => [
343+
'{{WRAPPER}} .mighty-accordion .mt-panel .accordion .accordion-icons i' => 'font-size: {{SIZE}}{{UNIT}};',
344+
],
345+
]
346+
);
302347

303348
$this->add_control(
304349
'icon_align',
@@ -315,14 +360,14 @@ protected function _register_controls() {
315360
'icon' => 'eicon-h-align-right',
316361
],
317362
],
318-
'default' => is_rtl() ? 'right' : 'left',
363+
'default' => is_rtl() ? 'left' : 'right',
319364
'toggle' => false,
320365
'label_block' => false,
321366
]
322367
);
323368

324369
$this->add_responsive_control(
325-
'icon_space',
370+
'icon_spacing',
326371
[
327372
'label' => __( 'Spacing', 'mighty' ),
328373
'type' => Controls_Manager::SLIDER,
@@ -431,31 +476,31 @@ protected function _register_controls() {
431476
],
432477
'default' => [
433478
'unit' => 'px',
434-
'size' => 15,
479+
'size' => 0,
435480
],
436481
'selectors' => [
437-
'{{WRAPPER}} .mighty-accordion .mt-panel .accordion' => 'padding: {{SIZE}}{{UNIT}};'
482+
'{{WRAPPER}} .mighty-accordion .mt-panel:not(:last-child)' => 'margin-bottom: {{SIZE}}{{UNIT}};'
438483
],
439484
]
440485
);
441486

442487
$this->add_group_control(
443488
Group_Control_Border::get_type(),
444489
[
445-
'name' => 'title_border',
490+
'name' => 'accordion_border',
446491
'label' => __( 'Border Type', 'mighty' ),
447-
'selector' => '{{WRAPPER}} .mighty-accordion .mt-panel .accordion',
492+
'selector' => '{{WRAPPER}} .mighty-accordion .mt-panel',
448493
]
449494
);
450495

451496
$this->add_control(
452-
'title_border_radius',
497+
'accordion_border_radius',
453498
[
454499
'label' => __( 'Border Radius', 'mighty' ),
455500
'type' => Controls_Manager::DIMENSIONS,
456501
'size_units' => [ 'px' ],
457502
'selectors' => [
458-
'{{WRAPPER}} .mighty-accordion .mt-panel .accordion' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
503+
'{{WRAPPER}} .mighty-accordion .mt-panel' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
459504
],
460505
]
461506
);
@@ -521,7 +566,7 @@ protected function _register_controls() {
521566
Group_Control_Border::get_type(),
522567
[
523568
'name' => 'content_border',
524-
'label' => __( 'Border', 'mighty' ),
569+
'label' => __( 'Border Type', 'mighty' ),
525570
'selector' => '{{WRAPPER}} .mighty-accordion .mt-panel .panel .accordion-content',
526571
]
527572
);
@@ -533,7 +578,7 @@ protected function _register_controls() {
533578
'type' => Controls_Manager::DIMENSIONS,
534579
'size_units' => [ 'px' ],
535580
'selectors' => [
536-
'{{WRAPPER}} .mighty-accordion .mt-panel .panel .accordion-content' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
581+
'{{WRAPPER}} .mighty-accordion .panel' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
537582
],
538583
]
539584
);
@@ -553,15 +598,32 @@ protected function render() {
553598
$openAll = $settings['open_all'] == "yes" ? 'active' : '';
554599
$faqSchema = $settings['enable_faq'] == "yes" ? true : false;
555600
$titleTag = $settings['title_html_tag'];
601+
$openAccordionIcon = $settings['open_close_icon'];
602+
$closeAccordionIcon = "";
603+
if( $openAccordionIcon ) {
604+
switch( $openAccordionIcon ) {
605+
case 'fa-angle-down': $closeAccordionIcon = 'fa-angle-up';
606+
break;
607+
case 'fa-plus': $closeAccordionIcon = 'fa-minus';
608+
break;
609+
case 'fa-arrow-down': $closeAccordionIcon = 'fa-arrow-up';
610+
break;
611+
case 'fa-sort-down': $closeAccordionIcon = 'fa-sort-up';
612+
break;
613+
}
614+
}
556615
?>
557616

558617
<div <?php echo $faqSchema ? 'itemscope itemtype="https://schema.org/FAQPage" ' : ''; ?> class="mighty-accordion" data-enable-multiple="<?php echo $openMultiple; ?>" data-first-active="<?php echo $firstActive; ?>" data-open-all="<?php echo $openAll; ?>">
559618
<?php
560619
foreach ( $settings['tabs'] as $index => $tab ) :
561620
$tabId = substr( $this->get_id_int(), 0, 3 ) . $index+1;
562621

563-
$accordionIcon = '<i aria-hidden="true" class="accordion-icon ' . $tab['accordion_icon']['value'].'"></i>';
564-
$accordionActiveIcon = '<i aria-hidden="true" class="accordion-active-icon ' . $tab['active_accordion_icon']['value'].'"></i>';
622+
$mainAccordionIcon = '<i aria-hidden="true" class="accordion-icon-main ' . $tab['accordion_main_icon']['value'].'"></i>';
623+
$accordionIcon = '<i aria-hidden="true" class="accordion-icon fas ' . $openAccordionIcon .'"></i>';
624+
$accordionActiveIcon = '<i aria-hidden="true" class="accordion-active-icon fas ' . $closeAccordionIcon .'"></i>';
625+
626+
565627
?>
566628
<div <?php echo $faqSchema ? 'itemscope itemprop="mainEntity" itemtype="https://schema.org/Question" ' : ''; ?> class="mt-panel elementor-repeater-item-<?php echo $tab['_id']; ?>">
567629
<div class="accordion accordion-<?php echo $tabId; ?><?php echo $firstActive; ?> <?php echo $settings['icon_align'] == "left" ? 'icons-left' : 'icons-right'; ?>">
@@ -574,6 +636,7 @@ protected function render() {
574636
<?php } ?>
575637

576638
<<?php echo $titleTag; ?><?php echo $faqSchema ? ' itemprop="name"' : ''; ?> class="mt-accordion-title">
639+
<?php echo $mainAccordionIcon; ?>
577640
<?php echo $tab['accordion_title']; ?>
578641
</<?php echo $titleTag; ?>>
579642

0 commit comments

Comments
 (0)