scroll gutter - reference

by Code_Garage

HTML

<div class="card">
<p id="text">
  Lorem ipsum dolor sit amet, conse adipiscing elit.
</p>
<button onClick="toggle()">
Active-moi
</button>
</div>

CSS

.card {
  background-color: #3498db;
  border-radius: 5px;
  padding: 10px;
  box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.1);
}
body {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  font-family: Arial;
  padding-top: 20px;
}

p {
  margin: 0;
  background-color: #2980b9;
  padding: 10px;
  color: white;
  height: 75px;
  width: 250px;
  font-family: 12px;
  border-radius: 3px;
  margin-bottom: 10px;
  overflow-y: auto;
}

JavaScript

let full = false;
function toggle(){
  if(full){
  	full = false;
		return document.querySelector('#text').innerHTML = "Lorem ipsum dolor sit amet, conse adipiscing elit."
	}
  full = true;
  return document.querySelector('#text').innerHTML = "Lorem ipsum dolor sit amet, conse adipiscing elit. Pellentesque est ligula, pellentesque nec nunc rutrum, dapibus aliquet sem. Praesent placerat tortor in eros ultricies laoreet at et ipsum. Nulla vestibulum fermentum felis ut dictum. Donec vitae purus at lectus volutpat luctus. Mauris dictum dictum ipsum id venenatis. Donec nec dignissim augue. Sed faucibus molestie vulputate. Nulla facilisi. Mauris varius facilisis turpis eu ullamcorper. Donec pretium posuere tellus. Donec mauris mauris, condimentum non fermentum vitae, cursus ac elit. Suspendisse dignissim, ante sed vehicula dictum, felis metus convallis augue, id aliquet mauris quam eget libero. "
}