title: Trying to control element visibility activated by JQUERY functionality at different HTML breakpoints
body: <p>I have cards that I want to toggle visibility when the page is narrower than 750px. I have that part figured out. What I need help controlling (either with js or css) is displaying block on the elements that were hidden at &lt; than 750 when I expand the page > than 750 automatically. I am attaching the code and jsfiddle to make sense of this.</p>
  
  <p>Here is the jsfiddle</p>
  
  <p><a href="https://jsfiddle.net/galnova/bjz6pgyp/16/" rel="nofollow noreferrer">https://jsfiddle.net/galnova/bjz6pgyp/16/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('[id^="coll-"]').click(function(e) {
    e.preventDefault();
    if ($(window).width() &lt; 750) {
      $("." + this.id).stop().slideToggle();
      return false;
    }
  });
  
  //I also tried this
  
  I tried this but it didn't work.
  
  $('[id^="coll-"]').click(function(e){
      e.preventDefault();
      if ($(window).width() &lt; 750) {
          $("." + this.id).stop().slideToggle();
          return false; 
      } else if ($(window).width() &gt; 750) {
          $(".coll-1, .coll-2, .coll-3").show();
      }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.coll-1,
  .coll-2,
  .coll-3 {
    display: block;
    background: pink;
  }
  
  #coll-1,
  #coll-2,
  #coll-3 {
    display: none;
  }
  
  .ful_cwrap {
    display: block;
    top: 30px;
    position: relative;
    width: 100%;
  }
  
  .cwrap {
    padding-left: 5px!important;
    padding-right: 5px!important;
  }
  
  hr {
    width: 100%;
    float: left;
  }
  
  
  /* .card &gt; hr { margin: 0px 0 10px 0; } */
  
  dl.hpair {
    float: left;
    overflow: hidden;
    margin-bottom: 0px;
  }
  
  .hpair dt,
  .hpair dd {
    float: left;
    display: inline-block;
  }
  
  .hpair dt {
    margin-right: 5px;
  }
  
  .hpair dd {
    margin-right: 10px;
  }
  
  .card {
    float: left;
    width: 100%;
    border: solid 1px #000;
    padding: 0 10px 10px 10px;
    margin-bottom: 10px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    /*background: #eee;*/
  }
  
  span.card-title {
    font-size: 1.4em;
  }
  
  .card-title {
    margin-top: 0;
    margin-bottom: .5em;
    padding-top: 10px;
    text-align: center;
    /*padding-bottom: 10px;*/
    font-weight: 700;
    font-size: 1.143em;
    line-height: 20px;
  }
  
  .card-subtitle {
    margin-top: 0;
    margin-bottom: 0;
  }
  
  @media only screen and (max-width: 767px) {
    .coll-1,
    .coll-2,
    .coll-3 {
      display: none;
    }
    #coll-1,
    #coll-2,
    #coll-3 {
      display: block;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.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;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/2.2.4/css/bootstrap.min.css" /&gt;
  &lt;div class="ful_cwrap"&gt;
    &lt;div class="col-xs-12 col-sm-2 cwrap"&gt;
      &lt;div class="card card-block"&gt;
        &lt;h4&gt;
          Tester
        &lt;/h4&gt;
        &lt;div class="col-xs-12 nill"&gt;
          &lt;dl class="hpair"&gt;
            &lt;dt&gt;Cash: &lt;/dt&gt;
            &lt;dd&gt;Plenty Dollars&lt;/dd&gt;
          &lt;/dl&gt;
          &lt;dl class="hpair"&gt;
            &lt;dt&gt;Names: &lt;/dt&gt;
            &lt;dd&gt;Alot&lt;/dd&gt;
          &lt;/dl&gt;
          &lt;dl class="hpair"&gt;
            &lt;dt&gt;Avg. Time: &lt;/dt&gt;
            &lt;dd&gt;30 hours&lt;/dd&gt;
          &lt;/dl&gt;
        &lt;/div&gt;
        &lt;hr/&gt;
        &lt;div class="col-xs-12 nill"&gt;
          &lt;p class="card-text"&gt;
            &lt;span class="coll-1"&gt;
              Maecenas mattis purus nunc, et molestie risus porttitor a. Phasellus ex lacus, viverra sed tempus at. Vivamus congue fringilla fringilla. Pit amet semper lacus.
              &lt;/span&gt;
          &lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="col-xs-12 nill mar_bott"&gt;
          &lt;a id="coll-1" href="" class=""&gt;Show more  &lt;span class="indicator glyphicon glyphicon-plus"&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;!-- --&gt;
  
    &lt;div class="col-xs-12 col-sm-2 cwrap"&gt;
      &lt;div class="card card-block"&gt;
        &lt;h4&gt;
          Tester
        &lt;/h4&gt;
        &lt;div class="col-xs-12 nill"&gt;
          &lt;dl class="hpair"&gt;
            &lt;dt&gt;Cash: &lt;/dt&gt;
            &lt;dd&gt;Plenty Dollars&lt;/dd&gt;
          &lt;/dl&gt;
          &lt;dl class="hpair"&gt;
            &lt;dt&gt;Names: &lt;/dt&gt;
            &lt;dd&gt;Alot&lt;/dd&gt;
          &lt;/dl&gt;
          &lt;dl class="hpair"&gt;
            &lt;dt&gt;Avg. Time: &lt;/dt&gt;
            &lt;dd&gt;30 hours&lt;/dd&gt;
          &lt;/dl&gt;
        &lt;/div&gt;
        &lt;hr/&gt;
        &lt;div class="col-xs-12 nill"&gt;
          &lt;p class="card-text"&gt;
            &lt;span class="coll-2"&gt;
              Maecenas mattis purus nunc, et molestie risus porttitor a. Phasellus ex lacus, viverra sed tempus at. Vivamus congue fringilla fringilla. Pit amet semper lacus.
              &lt;/span&gt;
          &lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="col-xs-12 nill mar_bott"&gt;
          &lt;a id="coll-2" href="" class=""&gt;Show more  &lt;span class="indicator glyphicon glyphicon-plus"&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;!-- --&gt;
  
    &lt;div class="col-xs-12 col-sm-2 cwrap"&gt;
      &lt;div class="card card-block"&gt;
        &lt;h4&gt;
          Tester
        &lt;/h4&gt;
        &lt;div class="col-xs-12 nill"&gt;
          &lt;dl class="hpair"&gt;
            &lt;dt&gt;Cash: &lt;/dt&gt;
            &lt;dd&gt;Plenty Dollars&lt;/dd&gt;
          &lt;/dl&gt;
          &lt;dl class="hpair"&gt;
            &lt;dt&gt;Names: &lt;/dt&gt;
            &lt;dd&gt;Alot&lt;/dd&gt;
          &lt;/dl&gt;
          &lt;dl class="hpair"&gt;
            &lt;dt&gt;Avg. Time: &lt;/dt&gt;
            &lt;dd&gt;30 hours&lt;/dd&gt;
          &lt;/dl&gt;
        &lt;/div&gt;
        &lt;hr/&gt;
        &lt;div class="col-xs-12 nill"&gt;
          &lt;p class="card-text"&gt;
            &lt;span class="coll-3"&gt;
              Maecenas mattis purus nunc, et molestie risus porttitor a. Phasellus ex lacus, viverra sed tempus at. Vivamus congue fringilla fringilla. Pit amet semper lacus.
              &lt;/span&gt;
          &lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="col-xs-12 nill mar_bott"&gt;
          &lt;a id="coll-3" href="" class=""&gt;Show more  &lt;span class="indicator glyphicon glyphicon-plus"&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;!-- --&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I added an image to help explain.</p>
  
  <p><a href="https://ibb.co/jj99w6" rel="nofollow noreferrer">https://ibb.co/jj99w6</a></p>