title: Expand Width of Div Class on Click
body: <p>I'm trying to make a div class wider than it's original size on click of a link; so originally the 'generic-shadow' class is set to 33%, but once i click the 'read-more' i'd like it to be 100%? i'm not too good with jquery/js but hoping i'm close</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>$(".toggle").click(function() {
    $("generic-shadow").toggleClass("generic-shadow");
    $("generic-shadow").toggleClass("generic-shadow-clicked");
    // hides matched elements if shown, shows if hidden
    $(this).next().toggle();
    $(this).next().next().slideToggle("slow");
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.generic-shadow {
    height: 100%;
    transition: .8s ease-in-out;
    width: 33%;
  }
  .generic-shadow-clicked {
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;li class="generic-shadow lazy-loading"&gt;
    &lt;div class="interactive-pane"&gt;
  
      &lt;div class="pane-overlay"&gt;&lt;/div&gt;
      &lt;div class="pane-content"&gt;
        &lt;div class="pane-title"&gt;Integrated Solutions Knowledge &amp;amp; Insight&lt;/div&gt;
        &lt;div class="pane-content-inner"&gt;
          &lt;img src="images/health-assessments-small.png" alt="Product Logo"&gt;
          &lt;h2&gt;Health Assessments&lt;/h2&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
    &lt;a class="toggle" href="javascript:void(0);"&gt;Read More...&lt;/a&gt;
  
    &lt;div id="content" class="pane"&gt;
      &lt;div class="pane-info"&gt;Health Assessments serve to determine the current health and wellbeing of your workforce.&lt;/div&gt;
  
    &lt;/div&gt;
    &lt;div id="contentHidden" style="display:none;" class="pane"&gt;
      &lt;div class="pane-info"&gt;
        &lt;p&gt;Health Assessments serve to determine the current health and wellbeing of your workforce.&lt;/p&gt;
        &lt;p&gt;Through knowledge and education about an individual’s health, your workers are able to make informed decisions that function to provide a catalyst for positive workplace culture.&lt;/p&gt;
  
        &lt;p&gt;&lt;em&gt;Encouraging health, wellbeing and positive workplace culture&lt;/em&gt;
        &lt;/p&gt;
        &lt;p&gt;&lt;i class="fa fa-check-square-o" aria-hidden="true"&gt;&lt;/i&gt; Determine the health of your workforce&lt;/p&gt;
        &lt;p&gt;&lt;i class="fa fa-check-square-o" aria-hidden="true"&gt;&lt;/i&gt; Foster positive lifestyle changes within the workplace&lt;/p&gt;
        &lt;p&gt;&lt;i class="fa fa-check-square-o" aria-hidden="true"&gt;&lt;/i&gt; Educate and empower healthier lifestyle choices&lt;/p&gt;
        &lt;p&gt;&lt;i class="fa fa-check-square-o" aria-hidden="true"&gt;&lt;/i&gt; Provide simple solutions for long-lasting results&lt;/p&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  
  &lt;/li&gt;</code></pre>
  </div>
  </div>
  </p>