blockquote or Text box expandable on click

Public

blockquote or Text box expandable on click

</> CopyGet raw version
css
  1. body div blockquote {
  2. border-left: 7px solid #151a61;
  3. color: #939598;
  4. line-height: 1.5em;
  5. max-height:27.7em;
  6. overflow:hidden;
  7. position: relative;
  8. margin-left: 0px;
  9. }
  10.  
  11. body div blockquote.compactquote {
  12. max-height:7.4em;
  13. }
  14.  
  15. body div blockquote p {
  16. margin-top: 15px;
  17. }
  18.  
  19. body div blockquote .morelink {
  20. background-color: white;
  21. bottom: 0;
  22. color: #e6af53;
  23. display: inline-block;
  24. float: right;
  25. height: 1em;
  26. line-height: 1em;
  27. position: absolute;
  28. right: 11px;
  29. text-align: right;
  30. width: 100%;
  31. z-index: 9;
  32. display: none;
  33. }
  34.  
  35. body div blockquote.compactquote .morelink {
  36. display: block;
  37. }
</> CopyGet raw version
javascript
  1. $(document).ready(function () {
  2.  
  3. $("body div blockquote").each(function () {
  4. if ($(this).height() > 190) {
  5. $(this).addClass("compactquote");
  6. $(this).append("<span class='morelink'>more...</span>");
  7. outerthis = this;
  8. $(this).on("click", outerthis, function () {
  9. $(outerthis).toggleClass("compactquote");
  10. });
  11. }
  12.  
  13. });
  14.  
  15.  
  16. });