ClickでDivクラスの幅を広げる

Question

私はdivクラスをリンクのクリックで元のサイズよりも広くしようとしています。最初は 'generic-shadow'クラスが33％に設定されていましたが、 'read-more'をクリックすると100％になりますか？私はjqueryの/ jsのとあまりにも良いではないが、私は近いよ期待して

$(".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"); 
 
});

.generic-shadow { 
 
    height: 100%; 
 
    transition: .8s ease-in-out; 
 
    width: 33%; 
 
} 
 
.generic-shadow-clicked { 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<li class="generic-shadow lazy-loading"> 
 
    <div class="interactive-pane"> 
 

 
    <div class="pane-overlay"></div> 
 
    <div class="pane-content"> 
 
     <div class="pane-title">Integrated Solutions Knowledge &amp; Insight</div> 
 
     <div class="pane-content-inner"> 
 
     <img src="images/health-assessments-small.png" alt="Product Logo"> 
 
     <h2>Health Assessments</h2> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
    <a class="toggle" href="javascript:void(0);">Read More...</a> 
 

 
    <div id="content" class="pane"> 
 
    <div class="pane-info">Health Assessments serve to determine the current health and wellbeing of your workforce.</div> 
 

 
    </div> 
 
    <div id="contentHidden" style="display:none;" class="pane"> 
 
    <div class="pane-info"> 
 
     <p>Health Assessments serve to determine the current health and wellbeing of your workforce.</p> 
 
     <p>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.</p> 
 

 
     <p><em>Encouraging health, wellbeing and positive workplace culture</em> 
 
     </p> 
 
     <p><i class="fa fa-check-square-o" aria-hidden="true"></i> Determine the health of your workforce</p> 
 
     <p><i class="fa fa-check-square-o" aria-hidden="true"></i> Foster positive lifestyle changes within the workplace</p> 
 
     <p><i class="fa fa-check-square-o" aria-hidden="true"></i> Educate and empower healthier lifestyle choices</p> 
 
     <p><i class="fa fa-check-square-o" aria-hidden="true"></i> Provide simple solutions for long-lasting results</p> 
 
    </div> 
 

 
    </div> 
 

 
</li>

Answer 1

$(".generic-shadow").removeClass("generic-shadow"); 
    $(".generic-shadow").addClass("generic-shadow-clicked"); 

Answer 2

$("generic-shadow").toggleClass("generic-shadow"); 

が線の上に外して、$(".generic-shadow")に$("generic-shadow")を変更するには、この行を削除しますクラスが必要な場合.接頭辞

そのため

$(".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"); 
}); 

DEMO

$(".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"); 
 
});

.generic-shadow { 
 
    height: 100%; 
 
    transition: .8s ease-in-out; 
 
    width: 33%; 
 
} 
 
.generic-shadow-clicked { 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<li class="generic-shadow lazy-loading"> 
 
    <div class="interactive-pane"> 
 

 
    <div class="pane-overlay"></div> 
 
    <div class="pane-content"> 
 
     <div class="pane-title">Integrated Solutions Knowledge &amp; Insight</div> 
 
     <div class="pane-content-inner"> 
 
     <img src="images/health-assessments-small.png" alt="Product Logo"> 
 
     <h2>Health Assessments</h2> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
    <a class="toggle" href="javascript:void(0);">Read More...</a> 
 

 
    <div id="content" class="pane"> 
 
    <div class="pane-info">Health Assessments serve to determine the current health and wellbeing of your workforce.</div> 
 

 
    </div> 
 
    <div id="contentHidden" style="display:none;" class="pane"> 
 
    <div class="pane-info"> 
 
     <p>Health Assessments serve to determine the current health and wellbeing of your workforce.</p> 
 
     <p>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.</p> 
 

 
     <p><em>Encouraging health, wellbeing and positive workplace culture</em> 
 
     </p> 
 
     <p><i class="fa fa-check-square-o" aria-hidden="true"></i> Determine the health of your workforce</p> 
 
     <p><i class="fa fa-check-square-o" aria-hidden="true"></i> Foster positive lifestyle changes within the workplace</p> 
 
     <p><i class="fa fa-check-square-o" aria-hidden="true"></i> Educate and empower healthier lifestyle choices</p> 
 
     <p><i class="fa fa-check-square-o" aria-hidden="true"></i> Provide simple solutions for long-lasting results</p> 
 
    </div> 
 

 
    </div> 
 

 
</li>