Accordeon custom

by nikolya223

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<div class="row">
      <ul class="accordion-group" id="accordion">
        <!-- Accordion 1 -->
        <li class="out">
          <img class="acc-poster" src="image/main/acc1.jpg">
          <div class="accordion-overlay"></div>
          <div class="acc-close py-5 px-lg-4 px-1 d-flex flex-column h-100 w-10">
            <div class="ml-lg-0 ml-md-2 ml-1 mt-3 mr-lg-0 pb-4 acc-rotate order-lg-1 order-2">title 1</div>
            <div class="ml-lg-0 ml-md-2 ml-1 text-uppercase acc-rotate order-lg-2 order-1 lh-12 t-24">subtitle 1</div>
            <div class="mt-auto ml-lg-auto mr-lg-0 ml-auto mr-auto acc-rotate order-lg-3 order-3 lh-1">
              <img class="ico mr-lg-0 mr-2 mb-lg-0 mb-1" src="image/main/plus.svg">
              <span class="pl-1 PNL fw-600 text-uppercase">rent</span>
            </div>
          </div>
          <div class="acc-open py-5 px-xl-5 px-lg-4 d-flex flex-column h-100 w-100">
            <div class="mt-auto ao-desc px-xl-5 px-lg-4 animate__animated animate__slideInRight">
              <div class="d-lg-flex text-white">
                <div class="text-uppercase lh-13 PNL fw-600 t-46">title 1</div>
                <div class="my-auto ml-auto t-24">subtitle 1</div>
              </div>
              <div class="pb-2 text-uppercase text-white t-24">8 PAX</div>
              <div class="progress">
                <div class="progress-bar" role="progressbar" style="width: 40%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <div class="row pt-4">
                <div class="col-md-6 py-2">
                  <button class="btn btn-gold oval-button w-100 py-lg-3 py-2 text-uppercase PNL fw-600 t-20">read more</button>
                </div>
                <div class="col-md-6...

CSS

/* BLOCK 1 */

.accordion-group li:nth-child(1) .accordion-overlay {
    background-color: #25559F;
    opacity: 0.8;
}

.accordion-group li:nth-child(1).out .accordion-overlay {
    background-color: #25559F;
    opacity: 0;
}

.accordion-group li:nth-child(2) .accordion-overlay {
    background-color: #26487C;
    opacity: 0.8;
}

.accordion-group li:nth-child(2).out .accordion-overlay {
    background-color: #26487C;
    opacity: 0;
}

.accordion-group li:nth-child(3) .accordion-overlay {
    background-color: #182E51;
    opacity: 0.8;
}

.accordion-group li:nth-child(3).out .accordion-overlay {
    background-color: #182E51;
    opacity: 0;
}

.acc-poster {
    width: 100%;
    object-fit: cover;
}

.accordion-group {
    padding: 0;
    width: 100%;
    height: 750px;
    display: flex;
}

@media (min-width: 1025px) and (max-width: 1500px) {
    .accordion-group {
        height: 650px !important;
    }
}

@media (max-width: 1024px) {
    .accordion-group {
        height: 600px !important;
    }
}


.accordion-group li {
    cursor: pointer;
    position: relative;
    display: flex;
    overflow: hidden;
    width: 35%;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}

@media (max-width: 579px) {
    .accordion-group li {
        width: 15%;
    }
}

@media (min-width: 580px) and (max-width: 768px) {
    .accordion-group li {
        width: 10%;
    }
}

.accordion-group li .acc-close {
    position: absolute;
    color: #FFFFFF;
}

.accordion-group li .accordion-overlay {
    position: absolute;
    height: 100%;
    width: 100%;
    -webkit-transition: all 250ms ease-in-out;
    -moz-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
}

.accordion-group li .acc-open {
    position: absolute;
}

.accordion-group li .acc-open::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(360deg, #0F1833 6%, rgba(15, 24, 51, 0)...

JavaScript

$.fn.myAccordion = function(options) {
  var me = $(this); 
  let config = {
     pause: 1000
  }
  config = $.extend(config, options);
  
  let data = { 
       li: me.children('li'),
       wideScreen: $(window).width() > 767, 
       timer: false, 
  }
  
  let methods = {
     init: () => {
     
      if (data.wideScreen) { 
          data.li.on('mouseenter click', methods.onStart );
      } else {
          data.li.on('touchstart touchend', methods.onStart);
      }
      
       methods.demo();
    },
    open: (item) => { 
       item.addClass('out');
       item.siblings().removeClass('out');
    },
    onStart: function (e) { 
        clearInterval(data.timer);
        e.stopPropagation(); 
        methods.open($(this));
    },
    demo: () => {
        data.timer = setInterval(()=>{ 
            let current = me.children('li.out');
            if (current.is(':last-child')) {
               methods.open(data.li.first());
            } else {
               methods.open(current.next());
            }
         }, config.pause);
    }
  }
  
  methods.init();
} 

jQuery($ => {
  $('#accordion').myAccordion({
      pause: 4000,
  })
})