James James - 4 days ago 4
Javascript Question

jQuery show hide truncated text not working

Does anyone have ideas what i am doing wrong here? the show and hide text is not working within the truncated element.

If anyone could help out would be great!

It seems to be truncating the text fine and the link toggle is working but just not expanding etc..



// truncate and show / hide long descriptions
var charLimit = 300;

function truncate(el) {
var text = el.html();
el.attr("data-originalText", text);
el.text(text.substring(0, charLimit) + "...");
}

function reveal(el) {
el.append(el.attr("data-originalText"));
}

$(".truncated").each(function() {
truncate($(this));
});

$("a").on("click", function(e) {
e.preventDefault();
if ($(this).text() === "Show") {
$(this).text("Hide");
reveal($(this).prev());
} else {
$(this).text("Show");
truncate($(this).prev());
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="panel show">
<div class="truncated">
<p class="p1"><span class="s1">A premium set of essential eye brushes which every girl needs to create the perfect eye</span>
</p>
<p class="p1"><span class="s1">-Engineered for precise application<br /></span><span class="s1">-Sculpted brushes for a dramatic look<br /></span><span class="s1">-Soft bristles for the perfect blend<br /></span><span class="s1">-High pigment application</span>
</p>
<p class="p1"><span class="s1"> </span>
</p>
<p class="p1"><span class="s1">Set includes:</span><span class="s1"> </span>
</p>
<p class="p1"><span style="text-decoration: underline;"><span class="s2">EMBASE-IT</span></span>
</p>
<p class="p1"><span class="s1">An essential for creating the perfect bas colour. This brush is great for the application of powders or creamy shadows to the entire lid. Easy to build and blend colour for a more intense finish.</span>
</p>
<p class="p1"><span class="s1"> </span>
</p>
<p class="p1"><span style="text-decoration: underline;"><span class="s2">CREASE POLICE</span></span>
</p>
<p class="p1"><span class="s1">This sneaky little number is your new partner in crime. To create just the right amount of drama, use the soft angle to add shade to your eyes.</span>
</p>
<p class="p1"><span class="s1"> </span>
</p>
<p class="p1"><span style="text-decoration: underline;"><span class="s2">BLEND BABY BLEND</span></span>
</p>
<p class="p1"><span class="s1">Lightly buff this baby across the eye lid to work in that light and shade, achieving a super sexy eye.</span>
</p>
<p class="p1"><span class="s1"> </span>
</p>
<p class="p1"><span style="text-decoration: underline;"><span class="s2">FEELING FINE</span></span>
</p>
<p class="p1"><span class="s1">This is the prefect brush to be the finest girl on the block. The pointed tip developed for ultimate control of your gel, liquid and cream liners.</span>
</p>
<p class="p1"><span class="s1"> </span>
</p>
<p class="p1"><span style="text-decoration: underline;"><span class="s2">IT’S A WING THING</span></span>
</p>
<p class="p1"><span class="s1">Define those wings with a firm, fluid application reaching your lash line. And if you want to be super fleeky, fill in those eyebrows for a strong brow game.</span>
</p>
<p class="p1"><span class="s1">  </span>
</p>
<p class="p1"><span class="s1">Help your brushes stay clean and hygienic by washing in warm soapy water, for a deep clean use our brush cleansing tool. Air dry so the shape stays perfect.</span>
</p>
</div>
<a href="#">Show</a>
</div>




Answer

Remove the .find() from your click function as the previous element is the one you want to show/hide, and adding the find() is what fails as it then looks for a descendant which doesn't exist. Use for example reveal($(this).prev());:

// truncate and show / hide long descriptions
var charLimit = 300;

function truncate(el) {
  var text = el.html();
  el.attr("data-originalText", text);
  el.html(text.substring(0, charLimit) + "...");
}

function reveal(el) {
  el.html(el.attr("data-originalText"));
}

$(".truncated").each(function() {
  truncate($(this));
});

$("a").on("click", function(e) {
  e.preventDefault();
  if ($(this).text() === "Show") {
    $(this).text("Hide");
    reveal($(this).prev());
  } else {
    $(this).text("Show");
    truncate($(this).prev());
  }
});
.s1 {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="panel show">
  <div class="truncated">
    <p class="p1"><span class="s1">A premium set of essential eye brushes which every girl needs to create the perfect eye</span>
    </p>
    <p class="p1"><span class="s1">-Engineered for precise application<br /></span><span class="s1">-Sculpted brushes for a dramatic look<br /></span><span class="s1">-Soft bristles for the perfect blend<br /></span><span class="s1">-High pigment application</span>
    </p>
    <p class="p1"><span class="s1"> </span>
    </p>
    <p class="p1"><span class="s1">Set includes:</span><span class="s1"> </span>
    </p>
    <p class="p1"><span style="text-decoration: underline;"><span class="s2">EMBASE-IT</span></span>
    </p>
    <p class="p1"><span class="s1">An essential for creating the perfect bas colour. This brush is great for the application of powders or creamy shadows to the entire lid. Easy to build and blend colour for a more intense finish.</span>
    </p>
    <p class="p1"><span class="s1"> </span>
    </p>
    <p class="p1"><span style="text-decoration: underline;"><span class="s2">CREASE POLICE</span></span>
    </p>
    <p class="p1"><span class="s1">This sneaky little number is your new partner in crime. To create just the right amount of drama, use the soft angle to add shade to your eyes.</span>
    </p>
    <p class="p1"><span class="s1"> </span>
    </p>
    <p class="p1"><span style="text-decoration: underline;"><span class="s2">BLEND BABY BLEND</span></span>
    </p>
    <p class="p1"><span class="s1">Lightly buff this baby across the eye lid to work in that light and shade, achieving a super sexy eye.</span>
    </p>
    <p class="p1"><span class="s1"> </span>
    </p>
    <p class="p1"><span style="text-decoration: underline;"><span class="s2">FEELING FINE</span></span>
    </p>
    <p class="p1"><span class="s1">This is the prefect brush to be the finest girl on the block. The pointed tip developed for ultimate control of your gel, liquid and cream liners.</span>
    </p>
    <p class="p1"><span class="s1"> </span>
    </p>
    <p class="p1"><span style="text-decoration: underline;"><span class="s2">IT’S A WING THING</span></span>
    </p>
    <p class="p1"><span class="s1">Define those wings with a firm, fluid application reaching your lash line. And if you want to be super fleeky, fill in those eyebrows for a strong brow game.</span>
    </p>
    <p class="p1"><span class="s1">  </span>
    </p>
    <p class="p1"><span class="s1">Help your brushes stay clean and hygienic by washing in warm soapy water, for a deep clean use our brush cleansing tool. Air dry so the shape stays perfect.</span>
    </p>
  </div>
  <a href="#">Show</a>
</div>

Comments