title: Slick Carousel + Accordion Formatting issue
body: <p>I'm having an issue with my slick carousel within my accordions. Here is what's going on at the moment:</p>
  
  <p>Replica: <strong>Open Accordion -> Close Accordion -> Click right arrow -> Open Accordion</strong><br>
  This is where the formatting gets all jacked up. I have set a on click function that sort of places it back in place, but I have not had much luck with it at all.</p>
  
  <p>Please expand snippet to full-page.</p>
  
  <p><a href="https://i.stack.imgur.com/GbVFG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GbVFG.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" /&gt;
  &lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" /&gt;
  &lt;link rel="stylesheet" type="text/css" href="https://cloud.typography.com/7088154/7564812/css/fonts.css" /&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /&gt;
  
  &lt;head&gt;
  &lt;style&gt;
  /* --- */
  @media (max-width: 1023px) {
   .row .row {
    margin-left: -1.0rem;
    margin-right: -1.0rem;
   }
  }
  @media (min-width: 992px) {
      .col-md-7 {
          width: 58.335%;
      }
  }
  @media (max-width: 411px) {
   p {
    font-size: smaller;
   }
   .heading &gt; .col-xs-9 &gt; h4 {
    font-size: small!important;
   }
   .col-xs-2 {
    display: none;
   }
   .col-xs-10 {
    width: 100%;
   }
   .col-xs-4 &gt; span {
    font-size: smaller!important;
   }
   .col-xs-3 &gt; span {
    font-size: inherit;
   }
  }
  #bannerWrapper {
      display: none;
  }
  #sticky {
   z-index: 100;
   top: 0;
   position: sticky;
   position : -webkit-sticky;
  }
  .second {
   background: white;
   border-bottom: 1px solid #5E6A71;
  }
  #pageTitle {
   display: none;
  }
  #columnMiddle {
   padding-top: 50px;
  }
  .heading {
      background-color: #A2AD00;
      display: flex;
  }
  .sub-heading {
      background-color: white;
      border-bottom: 1px solid lightgray;
  }
  
  
  .container {
      /* box-shadow: 0 1px 3px rgba(77,72,69,0.2), 0 6px 10px rgba(77,72,69,0.15); */
      border: 1px solid #5E6A71;
  }
  
  
  /* Change the padding on rows.*/
  .container &gt; .col-xs-3, .col-xs-4 {
      padding-top: .6rem!important;
      padding-bottom: .6rem!important;
  }
  .container &gt; .col-md-5, .col-md-7 {
      padding-top: .2rem!important;
      padding-bottom: .2rem!important;
      font-family: "Whitney A", "Whitney B";
      font-size: large;
  }
  .col-xs-10, .col-xs-2 {
   padding-top: .2rem!important;
      padding-bottom: .2rem!important;
      font-family: "Whitney A", "Whitney B";
   font-size: medium;
  }
  .col-xs-10 &gt; span {
      font-size: 18px!important;
  }
  .col-xs-2 &gt; span {
      font-size: 18px!important;
  }
  /* ----- */
  
  .even-row &gt; .col-xs-3 {
   padding-top: 10px;
  }
  .odd-row &gt; .col-xs-3 {
   padding-top: 10px;
  }
  
  
  .col-xs-3 {
      word-wrap: break-word;
      padding-right: 5px;
      padding-left: 10px;
      font-style: italic;
      color: #A2AD00;
      font-family: "Archer SSm A", "Archer SSm B"!important;
      font-weight: 600;
  }
  .col-xs-3 &gt; span {
      font-size: 15px!important;
      font-family: "Archer SSm A", "Archer SSm B";
      font-weight: 800;
  }
  
  /* Junior/Mid/Senior Sub-Headings */
  .col-xs-4 &gt; span {
   font-family: "Archer SSm A", "Archer SSm B"!important;
   font-weight: 600;
      font-size: 16px;
      color: #231f20;
  }
  .col-xs-4 &gt; ul &gt; li {
      font-family: "Archer SSm A", "Archer SSm B";
      font-size: 14px;
      color: #231f20;
  }
  /* ----- */
  
  .col-xs-9 {
   padding-left: 0px;
   padding-right: 0px;
   border-left: 1px solid #5E6A71;
  }
  .col-xs-9 &gt; p {
      font-size: 13px!important;
      font-family: "Archer SSm A", "Archer SSm B";
      font-weight: 800;
  }
  #sub {
   font-weight: normal;
   font-size: smaller;
  }
  
  /* Heading */
  .heading &gt; .col-xs-9 {
   padding-left: 15px;
   padding-right: 15px;
   font-family: "Archer SSm A", "Archer SSm B"!important;
   font-size: small;
      border-left: 0px!important;
  }
  .heading &gt; .col-xs-9 &gt; h4 {
   font-size: x-large;
   color: white!important;
   font-family: "Whitney A", "Whitney B";
   margin-bottom: 2px;
  }
  .heading &gt; .col-xs-3 {
   padding-right: 7px!important;
   padding-left: 7px!important;
   align-self: center;
  }
  /* ----- */
  
  /* Change background color on even rows: Client Service and Counsel, 
  Strategic and Creative Integrated Programming, etc.. */
  .even-row {
   background-color: #F0F0F0;
  }
  
  /* Change background color on odd rows: Account Management and Operational Excellence, 
  Recruitment and Retention, etc.. */
  .odd-row {
   background-color: #F8F8F8;
  }
  
  /* Change background color of left-hand headings: Client, Talent, etc.. */
  .left-hand-header-background {
   background-color: #EEAF00;
      font-family: "Whitney A", "Whitney B";
  }
  .left-hand-header-background &gt; span {
      font-family: "Whitney A", "Whitney B"!important;
  }
  
  /* Change background color of right-hand headings: Client, Talent, etc.. */
  .right-hand-header-background {
   background-color: #A2AD00;
  }
  
  .bl {
      border-left: 1px solid lightgray;
  }
  .bb {
      border-bottom: 1px solid #5E6A71;
  }
  .bg-white {
      background-color: white;
  }
  
  
  
  /* Sections */
  .mainText {
      font-style: italic;
      color: #00C6D7;
  }
  #section {
      border-top: 1px solid #5E6A71;
      border-bottom: 1px solid #5E6A71;
  }
  #section1, #section2, #section3, #section4 {
      border-bottom: 1px solid #5E6A71;
  }
  /* ----- */
  
  
  
  .title {
      color: #A2AD00;
      font-family: "Whitney A", "Whitney B";
      font-size: larger;
      margin-bottom: 0px;
  }
  .panel-heading {
   padding: 0px!important;
   border-left-width: 0px;
   border-top-width: 0px;
   border-right-width: 0px;
   border-bottom-width: 0px;
  }
  
  /* Slick Carousel */
  .slick-next {
      right: 10px!important;
  }
  .slick-prev:before {
    color: #5E6A71!important;
  }
  .slick-next:before {
    color: #5E6A71!important;
  }
  .no-arrows &gt; .slick-next,
  .no-arrows &gt; .slick-prev {
     display: none!important;
  }
  /* ----- */
  
  /* BootStrap 4 Classes */
  .py-5 {
      padding-bottom: 3rem!important;
      padding-top: 3rem!important;
  }
  .py-2 {
      padding-bottom: .5rem!important;
      padding-top: .5rem!important;
  }
  .text-white {
      color: #fff!important;
  }
  .text-left {
      text-align: left!important;
  }
  .text-uppercase {
      text-transform: uppercase!important;
  }
  .font-weight-bold {
      font-weight: 700!important;
  }
  .row-11 {
      height: auto!important;
  }
  .container &gt; ul {
      padding-left: 0px;
      margin-bottom: 0px;
      margin-left: 10px;
  }
  .img-responsive {
   display: inline-block;
  }
  /* ----- */
  &lt;/style&gt;
  
  &lt;script&gt; 
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); 
  
  ga('create', 'UA-27197903-14', 'auto'); 
  ga('send', 'pageview'); 
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div class="container"&gt;
    &lt;div id="sticky"&gt;
      &lt;div class="row heading"&gt;
          &lt;div class="col-xs-9 col-md-10 text-white text-left py-2"&gt;
              &lt;h4 class="text-uppercase font-weight-bold"&gt;PR - Performance Benchmark&lt;/h4&gt;
              &lt;p&gt;These are global expectations for FleishmanHillard account staff. 
              Managers should use this as the baseline for setting goals and managing team members at the local level. 
              Some basic expectations — such as negotiating, listening and interpersonal communication — are not included here, 
              but are essential skills to perform each role.&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="col-xs-3 col-md-2 text-center" style="margin: auto;"&gt;
              &lt;img class="img-responsive" src="" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row second odd-row"&gt;
          &lt;div class="col-xs-3"&gt;&lt;/div&gt;
          &lt;div class="col-xs-9"&gt;
              &lt;section class="regular slider"&gt;
                  &lt;div class="col-xs-4"&gt;
                      &lt;h6 class="text-uppercase font-weight-bold title"&gt;Junior&lt;/h6&gt;
                      &lt;span&gt;Valued Colleague and Practitioner.&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class="col-xs-4"&gt;
                      &lt;h6 class="text-uppercase font-weight-bold title"&gt;Mid&lt;/h6&gt;
                      &lt;span&gt;Trusted Colleague. Proven and Creative Practitioner.&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class="col-xs-4"&gt;
                      &lt;h6 class="text-uppercase font-weight-bold title"&gt;Senior&lt;/h6&gt;
                      &lt;span&gt;Trusted Client Advisor and Partner. Proven Agency Leader.&lt;/span&gt;
                      &lt;span id="sub"&gt;&lt;i&gt;*Partner and Senior Partner: Additional Requirements&lt;/i&gt;&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/section&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
     &lt;div class="row panel-heading" id="section4" data-toggle="collapse" data-parent="#section4" href="#collapseFour"&gt;
          &lt;div class="col-xs-10 col-md-5 left-hand-header-background"&gt;
              &lt;span class="text-uppercase font-weight-bold text-white"&gt;Finance and Operations&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="col-xs-2 col-md-7 right-hand-header-background"&gt;
           &lt;span&gt;&lt;br/&gt;&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      
      &lt;div class="panel-collapse collapse" id="collapseFour"&gt;
      &lt;div class="row bb even-row"&gt;
          &lt;div class="col-xs-3"&gt;
              &lt;span&gt;Financial Management of Accounts (Account Profitability, Realiziation, Budgets)&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="col-xs-9"&gt;
              &lt;section class="regular slider no-arrows"&gt;
                  &lt;div class="col-xs-4"&gt;
                      &lt;ul&gt;
                       &lt;li&gt;Understands agency operations, including time sheets, expense reports and invoicing&lt;/li&gt;
                          &lt;li&gt;Stays within hours assigned for specific projects; alerts managers when hours will go above or below forecast&lt;/li&gt;
                          &lt;li&gt;Gains basic understanding of client budgets and budget management&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
                  &lt;div class="col-xs-4"&gt;
                      &lt;ul&gt;
                          &lt;li&gt;Prepares and manages client budgets&lt;/li&gt;
                          &lt;li&gt;Immediately flags budget concerns and team leaders&lt;/li&gt;
                          &lt;li&gt;Understands how the agency makes money&lt;/li&gt;
                          &lt;li&gt;Understands and manages write-offs&lt;/li&gt;               
                      &lt;/ul&gt;
                  &lt;/div&gt;
                  &lt;div class="col-xs-4"&gt;
                      &lt;ul&gt;
                       &lt;li&gt;Approves budgets and worksheets&lt;/li&gt;
                       &lt;li&gt;Oversees forecasting for accounts and/or groups&lt;/li&gt;
                          &lt;li&gt;Successfully manages large client budgets or business units (including across offices, regions, companies)&lt;/li&gt;
                          &lt;li&gt;Drives account growth and profitability&lt;/li&gt;
                          &lt;li&gt;Mitigates potential risk to the business&lt;/li&gt;
                          &lt;li&gt;Helps junior-mid staff understand the agency's business and financial management&lt;/li&gt;
                          &lt;li&gt;Negotiates budgets, both internally and externally, to meet client needs&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/section&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      
      &lt;div class="row odd-row"&gt;
          &lt;div class="col-xs-3"&gt;
              &lt;span&gt;Staffing and Resource Planning&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="col-xs-9"&gt;
              &lt;section class="regular slider no-arrows"&gt;
                  &lt;div class="col-xs-4"&gt;
                      &lt;ul&gt;
                       &lt;li&gt;Meets personal billable standards&lt;/li&gt;
                          &lt;li&gt;Ensures all time is entered accurately and submitted by the end of each day&lt;/li&gt;
                          &lt;li&gt;Acts judiciously with client and agency budgets&lt;/li&gt;
                          &lt;li&gt;Adheres to financial practices and policies&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
                  &lt;div class="col-xs-4"&gt;
                      &lt;ul&gt;
                          &lt;li&gt;Understands how to effectively and profitably staff accounts&lt;/li&gt;
                          &lt;li&gt;Knows how to forecast staffing needs and communciates expectations effectively&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
                  &lt;div class="col-xs-4"&gt;
                      &lt;ul&gt;
                          &lt;li&gt;Anticipates staffing needs&lt;/li&gt;
                          &lt;li&gt;Effectively deals with account/business fluctuations to staff effectively and profitably&lt;/li&gt;
                          &lt;li&gt;Effectively harnesses resources across the agency/DAS/OPRG&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/section&gt;
          &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/jquery-migrate-3.0.1.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"&gt;&lt;/script&gt;
  &lt;!-- &lt;script type="text/javascript" src="https://cdnjs.com/libraries/jquery.SPServices"&gt;&lt;/script&gt; --&gt;
  
  &lt;script type="text/javascript"&gt;
      $(function() {
          $(".regular").slick({
          dots: false,
          infinite: false,
          /* mobileFirst:true, */
          slidesToShow: 2,
          slidesToScroll: 1,
          asNavFor: '.slider',
          responsive: [{
              breakpoint: 700,
              settings: {
                  slidesToShow: 1,
                  slidesToScroll: 1,
                  }
              }]
          });
          $('#section4').on('click', function(e) {
        $('#collapseFour').resize();
    });
      });
  &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>