Untitled

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
body {
  font-family: Helvetica;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.42;
  color: rgba(0, 0, 0, 0.8);
  background: #efefef;
}

div {
  padding: 30px;
  background: #e9e9e9;
}

button {
  padding: 10px 40px;
  color: grey;
  text-transform: uppercase;
  border: 0;
}
</style>
</head>
<body>
  <div>
    <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>
  </div>
<script id="jsbin-javascript">
var block = document.querySelector('DIV'),
    textBlock = document.querySelector('P'),
    text = textBlock.textContent,
    textLength = text.length,
    textSliced,
    buttonMore;

if (textLength > 400) {

  textSliced = text.slice(0, 300)
  textBlock.innerHTML = `${textSliced}...`
  buttonMore = document.createElement('button')
  buttonMore.innerHTML = "More"
  block.appendChild(buttonMore)

  buttonMore.addEventListener('click', function(e){
    var textState = e.target.getAttribute("data");

    if (textState === null || textState !== "expand") {
      textBlock.innerHTML = text
      e.target.innerHTML = "Show less"
      e.target.setAttribute("data", "expand");
    } else {
      textBlock.innerHTML = `${textSliced}...`
      e.target.innerHTML = "More"
      e.target.setAttribute("data", "collapse");
    }

  })

} else {
  console.log("Go and fuck yourself!")
}
</script>


<script id="jsbin-source-css" type="text/css">body {
  font-family: Helvetica;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.42;
  color: rgba(0, 0, 0, 0.8);
  background: #efefef;
}

div {
  padding: 30px;
  background: #e9e9e9;
}

button {
  padding: 10px 40px;
  color: grey;
  text-transform: uppercase;
  border: 0;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">var block = document.querySelector('DIV'),
    textBlock = document.querySelector('P'),
    text = textBlock.textContent,
    textLength = text.length,
    textSliced,
    buttonMore;

if (textLength > 400) {

  textSliced = text.slice(0, 300)
  textBlock.innerHTML = `${textSliced}...`
  buttonMore = document.createElement('button')
  buttonMore.innerHTML = "More"
  block.appendChild(buttonMore)

  buttonMore.addEventListener('click', function(e){
    var textState = e.target.getAttribute("data");

    if (textState === null || textState !== "expand") {
      textBlock.innerHTML = text
      e.target.innerHTML = "Show less"
      e.target.setAttribute("data", "expand");
    } else {
      textBlock.innerHTML = `${textSliced}...`
      e.target.innerHTML = "More"
      e.target.setAttribute("data", "collapse");
    }

  })

} else {
  console.log("Go and fuck yourself!")
}
</script></body>
</html>