title: Load div based on [Slick] slider selection
body: <p>The Slick slider loads fine and the initial div content below shows "asdf" as expected. When I click on any slider image now, the div below displays nothing. The 2nd "$('.group').hide();" is apparently executed correctly, just not the code after, so this should have nothing to do with the slider itself. I have tried various different approaches for the last 4 hours now and just cannot figure this out. </p>
  
  <pre><code>    &lt;div class="carousel" id="selectMe"&gt;
              &lt;div value="option1"&gt;&lt;img src="image1.jpg"&gt;&lt;/div&gt;
              &lt;div value="option2"&gt;&lt;img src="image2.jpg"&gt;&lt;/div&gt;
              &lt;div value="option3"&gt;&lt;img src="image3.jpg"&gt;&lt;/div&gt;
              &lt;div value="option4"&gt;&lt;img src="image4.jpg"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id="option1" class="group"&gt;asdf&lt;/div&gt;
      &lt;div id="option2" class="group"&gt;kljh&lt;/div&gt;
      &lt;div id="option3" class="group"&gt;zxcv&lt;/div&gt;
      &lt;div id="option4" class="group"&gt;adfs&lt;/div&gt;
  
  
      &lt;script&gt;
          $(document).ready(function () {
              $('.group').hide();
              $('#option1').show();
              $('#selectMe div').click(function () {
                  $('.group').hide();
                  var various = $(this).attr("value");
                  console.log(various);
                  $('#' + various).show();
              })
          });
      &lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          $(document).ready(function(){
              $('.carousel').slick({
                  dots: true,
                  infinite: false,
                  speed: 300,
                  slidesToShow: 7,
                  slidesToScroll: 7,
                  responsive: [
                      {
                          breakpoint: 1024,
                          settings: {
                              slidesToShow: 6,
                              slidesToScroll: 6,
                              infinite: true,
                              dots: true
                          }
                      },
                      {
                          breakpoint: 600,
                          settings: {
                              slidesToShow: 4,
                              slidesToScroll: 4
                          }
                      },
                      {
                          breakpoint: 480,
                          settings: {
                              slidesToShow: 3,
                              slidesToScroll: 3
                          }
                      }
                  ]
              });
          });
      &lt;/script&gt;
  </code></pre>