Skip to content

Instantly share code, notes, and snippets.

@truetamtam
Created August 3, 2017 11:24
Show Gist options
  • Save truetamtam/e1678c81b0f274381eadd3045509c617 to your computer and use it in GitHub Desktop.
Save truetamtam/e1678c81b0f274381eadd3045509c617 to your computer and use it in GitHub Desktop.
jquery long description text toggler
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script
src="http://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<title>html</title>
</head>
<body>
<a id="devpull-read-desc" href="#" class="button gray"><i class="fa fa-align-left" aria-hidden="true"></i> <span>Читать описание категории</span></a>
<script>
$(document).ready(function() {
(function() {
console.log("inited");
var $toggler = $("#devpull-read-desc");
var $desc = $(".category-description.top-description");
var hideText = "Cпрятать описание";
var originText = $toggler.text();
var $buttonText = $toggler.find("span");
console.log("originText");
console.log(originText);
function textControl() {
console.log("calling text control");
console.log("$desc.css(\"display\")");
console.log($desc.css("display"));
($desc.css("display") == "none") ? $buttonText.text(originText) : $buttonText.text(hideText);
}
$toggler.on("click", function(e) {
$desc.slideToggle("fast", textControl);
e.preventDefault();
});
})();
});
</script>
<div class="category-description top-description" style="display: none;"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment