Need a unique gift idea?
A Pastebin account makes a great Christmas gift
SHARE
TWEET

Untitled

a guest Aug 10th, 2018 49 Never
Upgrade to PRO!
ENDING IN00days00hours00mins00secs
 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <meta name="viewport" content="width=device-width">
  6.   <title>JS Bin</title>
  7. <style id="jsbin-css">
  8. body {
  9.   font-family: Helvetica;
  10.   font-weight: 300;
  11.   font-size: 14px;
  12.   line-height: 1.42;
  13.   color: rgba(0, 0, 0, 0.8);
  14.   background: #efefef;
  15. }
  16.  
  17. div {
  18.   padding: 30px;
  19.   background: #e9e9e9;
  20. }
  21.  
  22. button {
  23.   padding: 10px 40px;
  24.   color: grey;
  25.   text-transform: uppercase;
  26.   border: 0;
  27. }
  28. </style>
  29. </head>
  30. <body>
  31.   <div>
  32.     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum molestiae quos sed enim, facere, distinctio officiis delectus sequi facilis obcaecati doloribus maxime, quam dolor quasi neque alias quia error officia! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum molestiae quos sed enim, facere, distinctio officiis delectus sequi facilis obcaecati doloribus maxime, quam dolor quasi neque alias quia error officia! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum molestiae quos sed enim, facere, distinctio officiis delectus sequi facilis obcaecati doloribus maxime, quam dolor quasi neque alias quia error officia!</p>
  33.   </div>
  34. <script id="jsbin-javascript">
  35. var block = document.querySelector('DIV'),
  36.     textBlock = document.querySelector('P'),
  37.     text = textBlock.textContent,
  38.     textLength = text.length,
  39.     textSliced,
  40.     buttonMore;
  41.  
  42. if (textLength > 400) {
  43.  
  44.   textSliced = text.slice(0, 300)
  45.   textBlock.innerHTML = `${textSliced}...`
  46.   buttonMore = document.createElement('button')
  47.   buttonMore.innerHTML = "More"
  48.   block.appendChild(buttonMore)
  49.      
  50.   buttonMore.addEventListener('click', function(e){
  51.     var textState = e.target.getAttribute("data");
  52.    
  53.     if (textState === null || textState !== "expand") {
  54.       textBlock.innerHTML = text
  55.       e.target.innerHTML = "Show less"
  56.       e.target.setAttribute("data", "expand");
  57.     } else {
  58.       textBlock.innerHTML = `${textSliced}...`
  59.       e.target.innerHTML = "More"
  60.       e.target.setAttribute("data", "collapse");
  61.     }
  62.    
  63.   })
  64.  
  65. } else {
  66.   console.log("Go and fuck yourself!")
  67. }
  68. </script>
  69.  
  70.  
  71. <script id="jsbin-source-css" type="text/css">body {
  72.   font-family: Helvetica;
  73.   font-weight: 300;
  74.   font-size: 14px;
  75.   line-height: 1.42;
  76.   color: rgba(0, 0, 0, 0.8);
  77.   background: #efefef;
  78. }
  79.  
  80. div {
  81.   padding: 30px;
  82.   background: #e9e9e9;
  83. }
  84.  
  85. button {
  86.   padding: 10px 40px;
  87.   color: grey;
  88.   text-transform: uppercase;
  89.   border: 0;
  90. }</script>
  91.  
  92. <script id="jsbin-source-javascript" type="text/javascript">var block = document.querySelector('DIV'),
  93.     textBlock = document.querySelector('P'),
  94.     text = textBlock.textContent,
  95.     textLength = text.length,
  96.     textSliced,
  97.     buttonMore;
  98.  
  99. if (textLength > 400) {
  100.  
  101.   textSliced = text.slice(0, 300)
  102.   textBlock.innerHTML = `${textSliced}...`
  103.   buttonMore = document.createElement('button')
  104.   buttonMore.innerHTML = "More"
  105.   block.appendChild(buttonMore)
  106.      
  107.   buttonMore.addEventListener('click', function(e){
  108.     var textState = e.target.getAttribute("data");
  109.    
  110.     if (textState === null || textState !== "expand") {
  111.       textBlock.innerHTML = text
  112.       e.target.innerHTML = "Show less"
  113.       e.target.setAttribute("data", "expand");
  114.     } else {
  115.       textBlock.innerHTML = `${textSliced}...`
  116.       e.target.innerHTML = "More"
  117.       e.target.setAttribute("data", "collapse");
  118.     }
  119.    
  120.   })
  121.  
  122. } else {
  123.   console.log("Go and fuck yourself!")
  124. }
  125. </script></body>
  126. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top