Ich versuche, eine div-Klasse breiter als ihre Originalgröße auf einen Link klicken; also ursprünglich die 'generic-shadow' klasse ist auf 33% eingestellt, aber sobald ich auf den "read-more" ich möchte, dass es 100%? ich bin nicht so gut mit jquery/js aber gehofft, ich bin in der NäheExpand Breite der Div-Klasse auf klicken
$(".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 & 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>
Vielen Dank für das, es aber nicht funktioniert hat. Ich denke, es ist, weil ich 3 Blöcke (generic-shadow) links schweben lassen habe? –
Ich habe die Antwort aktualisiert und ihr Snippet hinzugefügt. Es klappt. Akzeptieren und Upvoten, wenn es nützlich ist – jafarbtech