visible = false;
txt = document.getElementById("text");
btn = document.getElementById("btn");
function toggle() {
  if(visible) {
    visible = 0;
    btn.innerHTML = 'Show';
    txt.style.display = 'none';
  } else {
    visible = 1;
    btn.innerHTML = 'Hide';
    txt.style.display = 'block';
  }
}

.button {
background: lightblu;
padding: 0px;
}

.button {
  background-color: #04AA6D;
  border: none;
  color: white;
  padding: 1px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  font-family: 'Courier New', monospace;
  margin: 1px 1px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button1 {
  background-color: white; 
  color: #2196F3; 
  border: px solid #04AA6D;
}

.button1:hover {
  background-color: #04AA6D;
  color: white;
}

<! --- First section. Working like I want 4 and 5 title is hiding and show, text on button is changing to Show and Hide -- >
<p><a href="Link" ="_blank"><span style="color: #717171;">> Title1</a>
<p><a href="Link" ="_blank"><span style="color: #717171;">> Title2</a>
<p><a href="Link" ="_blank"><span style="color: #717171;">> Title3</a>

<div id='text' style='display: none;'>
<p><a href="Link" ="_blank"><span style="color: #717171;">> Title4</a>
<p><a href="Link" ="_blank"><span style="color: #717171;">> Title5</a>
</div>

<button class="button button1"><span id='btn' onclick='toggle()'>Show</button>

<hr>
<! --- Two section. How make this section, work like first one ? Now i want hide Title 3,4,5 but dont know how make this ? -- >
<p><a href="Link" ="_blank"><span style="color: #717171;">> Title1</a>
<p><a href="Link" ="_blank"><span style="color: #717171;">> Title2</a>

<div id='text' style='display: none;'>
<p><a href="Link" ="_blank"><span style="color: #717171;">> Title3</a>
<p><a href="Link" ="_blank"><span style="color: #717171;">> Title4</a>
<p><a href="Link" ="_blank"><span style="color: #717171;">> Title5</a>
</div>

<button class="button button1"><span id='btn' onclick='toggle()'>Show</button>