Steps to activate Slick slider by clicking (expand and collapse smoothly)

Question

Steps to activate Slick slider by clicking (expand and collapse smoothly)

Looking to add a smooth slide down animation to some Slick sliders in my project.

Want the slider and "projects" button to smoothly slide down when the title above is clicked.

Currently, the slider/button container does slide down on click by toggling a class that changes the max-height of the container, but the slider and button just pop into view without any animation.

If you have any suggestions or code snippets for achieving a smooth slide down transition, please share them! View the codepen here

.service-content-wrapper {
  margin: 0 auto;
  width: 100%;
  visibility: hidden;
  margin-bottom: 25px;
  max-height: 0;
  transition: max-height 2s;
}

.accordion-content-wrapper {
  background: blue;
}

.active {
  max-height: 1000px;
  visibility: visible;
}

-

$('.title-box').click(function() {
  $(this).siblings('.service-content-wrapper').toggleClass('active');
});

javascript jquery css slick.js

Answer 1

Answer №1

If you wish to animate the height using CSS without utilizing @keyframes, consider making a few modifications. To see if the desired effect is achieved and to view the slides in full screen mode, follow the instructions below.

$('.accordion-content-wrapper').slick({
  prevArrow: false
});

$('.title-box').click(function() {
  $(this).siblings('.service-content-wrapper').toggleClass('active');
});

body {
  font-family: 'Open Sans', sans-serif;
}

.title-box h1 {
  margin: 0 auto;
  text-align: center;
  padding: 25px;
}

.service-content-wrapper {
  margin: 0 auto;
  width: 100%;
  /*   margin-bottom: 25px; */
  height: 0px;
  position: relative;
  transition: 1s;
}

.accordion-content-wrapper {
  background: blue;
}

.active {
  transition: 1s;
  height: 350px;
}

.slide-1,
.slide-2 {
  width: 100%;
}

.slick-next {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

.title-box {
  background: gray;
  width: 100%;
  z-index: 9999 !important;
  position: relative;
}

.service-container {
  /*   background: pink; */
  margin: 10px;
  overflow: hidden;
  position: relative;
}

.page-container {
  padding: 25px;
}

.btn {
  padding: 15px;
  background: salmon;
  text-align: center;
  text-transform: uppercase;
  font-weight: 900;
  margin-top: 15px;
  margin-bottom: 15px;
}

.btn:hover {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class="row page-container">

  <div class="col-md-4 col-xs-12 services-column">

    <div class="service-container">

      <div class="title-box col-md-12">
        <h1>HEAVY CIVIL</h1>
      </div>

      <div class="service-content-wrapper">

        <div class="accordion-content-wrapper col-md-12">

          <div class="slide-1 col-md-12">
            This is test content.
          </div>
          <!-- slide-1 -->

          <div class="slide-2 col-md-12">
            <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content
              here, content here', making it look like readable English.</p>
            <p> Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes
              by accident, sometimes on purpose (injected humour and the like).</p>
          </div>
          <!-- slide-2 -->

        </div>
        <!-- accordion-content-wrapper -->

        <div class="btn col-md-12">PROJECTS</div>

      </div>
      <!-- service-content-wrapper -->

    </div>
    <!-- service-container -->

    <div class="service-container">

      <div class="title-box col-md-12">
        <h1>HEAVY CIVIL</h1>
      </div>

      <div class="service-content-wrapper">

        <div class="accordion-content-wrapper col-md-12">

          <div class="slide-1 col-md-12">
            This is test content.
          </div>
          <!-- slide-1 -->

          <div class="slide-2 col-md-12">
            <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content
              here, content here', making it look like readable English.</p>
            <p> Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes
              by accident, sometimes on purpose (injected humour and the like).</p>
          </div>
          <!-- slide-2 -->

        </div>
        <!-- accordion-content-wrapper -->

        <div class="btn col-md-12">PROJECTS</div>

      </div>
      <!-- service-content-wrapper -->

    </div>
    <!-- service-container -->

  </div>
  <!-- col-md-4 -->

Answer 2

If you wish to animate the height using CSS without utilizing @keyframes, consider making a few modifications. To see if the desired effect is achieved and to view the slides in full screen mode, follow the instructions below.

$('.accordion-content-wrapper').slick({
  prevArrow: false
});

$('.title-box').click(function() {
  $(this).siblings('.service-content-wrapper').toggleClass('active');
});

body {
  font-family: 'Open Sans', sans-serif;
}

.title-box h1 {
  margin: 0 auto;
  text-align: center;
  padding: 25px;
}

.service-content-wrapper {
  margin: 0 auto;
  width: 100%;
  /*   margin-bottom: 25px; */
  height: 0px;
  position: relative;
  transition: 1s;
}

.accordion-content-wrapper {
  background: blue;
}

.active {
  transition: 1s;
  height: 350px;
}

.slide-1,
.slide-2 {
  width: 100%;
}

.slick-next {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

.title-box {
  background: gray;
  width: 100%;
  z-index: 9999 !important;
  position: relative;
}

.service-container {
  /*   background: pink; */
  margin: 10px;
  overflow: hidden;
  position: relative;
}

.page-container {
  padding: 25px;
}

.btn {
  padding: 15px;
  background: salmon;
  text-align: center;
  text-transform: uppercase;
  font-weight: 900;
  margin-top: 15px;
  margin-bottom: 15px;
}

.btn:hover {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class="row page-container">

  <div class="col-md-4 col-xs-12 services-column">

    <div class="service-container">

      <div class="title-box col-md-12">
        <h1>HEAVY CIVIL</h1>
      </div>

      <div class="service-content-wrapper">

        <div class="accordion-content-wrapper col-md-12">

          <div class="slide-1 col-md-12">
            This is test content.
          </div>
          <!-- slide-1 -->

          <div class="slide-2 col-md-12">
            <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content
              here, content here', making it look like readable English.</p>
            <p> Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes
              by accident, sometimes on purpose (injected humour and the like).</p>
          </div>
          <!-- slide-2 -->

        </div>
        <!-- accordion-content-wrapper -->

        <div class="btn col-md-12">PROJECTS</div>

      </div>
      <!-- service-content-wrapper -->

    </div>
    <!-- service-container -->

    <div class="service-container">

      <div class="title-box col-md-12">
        <h1>HEAVY CIVIL</h1>
      </div>

      <div class="service-content-wrapper">

        <div class="accordion-content-wrapper col-md-12">

          <div class="slide-1 col-md-12">
            This is test content.
          </div>
          <!-- slide-1 -->

          <div class="slide-2 col-md-12">
            <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content
              here, content here', making it look like readable English.</p>
            <p> Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes
              by accident, sometimes on purpose (injected humour and the like).</p>
          </div>
          <!-- slide-2 -->

        </div>
        <!-- accordion-content-wrapper -->

        <div class="btn col-md-12">PROJECTS</div>

      </div>
      <!-- service-content-wrapper -->

    </div>
    <!-- service-container -->

  </div>
  <!-- col-md-4 -->

Steps to activate Slick slider by clicking (expand and collapse smoothly)

Answer №1

Similar questions

Unraveling the intricacies of extracting data from nested object properties

Creating a new deferred object by cascading the inner jqXHR in jQuery.ajax for wrapping and returning

Using a double for loop in VUE3 without altering the property

What is the proper way to change this JavaScript variable into JSON format?

I'm currently attempting to determine the total cost of a series of operations, however, I am not receiving any results

Issue: [unresolved] Provider not recognized: $resourseProvider <- $resourse <- Phone Angular factory

Total of values that are continuously updated

Sending documents via ExpressJS

Is there a way to encode a clear image stream into base64 without saving it to the local storage

I am interested in running JavaScript code on a page that has been loaded through AJAX

Is it advisable to use mongoose for validating get parameters?

Unable to integrate any modules or components from bit.dev into my React application

Strategies for embedding hyperlinks within paragraphs

Troubleshooting: JavaScript code not functioning properly with variable input instead of fixed value

I am facing an issue where the inline CSS is not being applied in my

What is the best way to transfer information from a directive to a sibling element within the DOM?

Searching for specific values within data attributes using jQuery wildcards

Rearranging information within a JSON structure

What is the best way to swap out an HTML file with another without altering the link?

What is the best method to close a polygon infowindow when hovering over a map marker?