Advertisement
Guest User

Untitled

a guest
Nov 26th, 2014
229
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.44 KB | None | 0 0
  1. <style>
  2. .small {height: 20px;}
  3. .big {height: auto;}
  4. </style>
  5.  
  6.  
  7. <div class="small">
  8. <p>Lorenter code hereem ipsum dolor sit amet, consectetur adipisicing elit, sed do
  9. eiusmod tempor incididunt ut labore et dolore magna aliqua.
  10. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
  11. nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet,
  12. consectetur adipisicing elit, sed do eiusmod tempor incididunt
  13. ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  14. nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  15. consequat.</p>
  16. <a href="#">Click to read more</a>
  17. </div>
  18.  
  19. <script type='text/javascript'>
  20. $(window).load(function(){
  21. comment_reply = function (id){
  22.  
  23. var e = $(id);
  24. e.toggle();
  25. }
  26. });
  27. </script>
  28.  
  29. $('.wrapper').find('a[href="#"]').on('click', function (e) {
  30. e.preventDefault();
  31. $(this).closest('.wrapper').find('.small').toggleClass('small big');
  32. });
  33.  
  34. $('.wrapper').find('a[href="#"]').on('click', function (e) {
  35. e.preventDefault();
  36. this.expand = !this.expand;
  37. $(this).text(this.expand?"Click to collapse":"Click to read more");
  38. $(this).closest('.wrapper').find('.small, .big').toggleClass('small big');
  39. });
  40.  
  41. $(document).ready(function(){
  42. $(document).on('click', '.small a', function(){
  43. $('.small').addClass('big');
  44. $('.small').removeClass('small');
  45. });
  46. $(document).on('click', '.big a', function(){
  47. $('.big').addClass('small');
  48. $('.big').removeClass('big');
  49. });
  50. });
  51.  
  52. .text.short {
  53. height: 50px;
  54. overflow: hidden;
  55. }
  56. .text.full {
  57.  
  58. }
  59. .read-more {
  60. cursor: pointer;
  61. display: inline-block;
  62. font-weight: bold;
  63. padding: 3px;
  64. background-color: #06c;
  65. color: white;
  66. margin: 2px;
  67. }
  68.  
  69. $(document).ready(function(){
  70. $(".read-more").click(function(){
  71. var $elem = $(this).parent().find(".text");
  72. if($elem.hasClass("short"))
  73. {
  74. $elem.removeClass("short").addClass("full");
  75. }
  76. else
  77. {
  78. $elem.removeClass("full").addClass("short");
  79. }
  80. });
  81. });
  82.  
  83. [DEMO][2]
  84.  
  85. $('.wrapper').find('a[href="#"]').on('click', function (e) {
  86. e.preventDefault();
  87. this.expand = !this.expand;
  88. $(this).text(this.expand?"Click to collapse":"Click to read more");
  89. $(this).closest('.wrapper').find('.small, .big').toggleClass('small big');
  90. });
  91.  
  92. [2]: http://jsfiddle.net/mWcmg/1/
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement