طراحی تب های آکاردئونی در المنتور

همان طور که اطلاع دارید با صفحه ساز المنتور خیلی راحت میتوانیم تب های آکاردئونی ایجاد کنیم با استفاده از این تب ها میتوانیم سوالات متداول در مقالات و برگه های سایت خودمان داشته باشیم .. اما این تب ها در المنتور دارای محدودیت می باشند و این محدودیت اجازه طراحی تب های آکاردئونی زیبا در المنتور را نمیدهد. .. برای مثال نمیتوانیم یک عکس یا ویدئو را داشته باشیم.

طراحی تب های آکاردئونی زیبا در المنتور

اما در این ویدئو با استفاده از کدهای css و js (javascripts) به راحتی میتوانید این محدودیت ها را دور بزنید و تب های آکاردئونی بسیار جذاب و حرفه ای داشته باشید .

افزونه استفاده شده جهت درج کدهای javascripts

Simple Custom CSS and JS

طراحی تب های آکاردئونی زیبا در المنتور

کدهای استفاده شده در آموزش (js)

jQuery(document).ready(function( $ ){
    
   jQuery(".toggle_trigger").on("click", function() {
    let $this = $(this);
  
    if ($this.hasClass('tab_active')) {
        $this.removeClass('tab_active');
        $this.next(".toggle_content").slideUp(200);
    } else {
        $this.toggleClass('tab_active');
        $this.next('.toggle_content').slideDown(200);
    }
     
  });
   });

کدهای css استفاده شده

body:not(.elementor-editor-active) .toggle_content{
  display:none
}

.toggle_trigger{
  cursor:pointer
}

.arrow i{
     transition-duration: 0.5s;
  
}
.tab_active .arrow i{
    transition-property: transform;
    -ms-transform: rotate(180deg) !important; /* IE 9 */
  transform: rotate(180deg) !important;
     transition-duration: 0.5s;
  
}