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

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

اما در این ویدئو با استفاده از کدهای 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;
  
}

 

به اشتراک بگذاریدshare

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

این فیلد را پر کنید
این فیلد را پر کنید
لطفاً یک نشانی ایمیل معتبر بنویسید.
برای ادامه، شما باید با قوانین موافقت کنید

فهرست