<!doctype html>
<html>
<head>
    <title>Test</title>
    <meta charset="UTF-8">
</head>
<body>
<style>
.holder>div {
  display: none;
}

[dir=second]>.txt2,
[dir=first]>.txt1 {
  display: block;
}

.holder_2>div {
  display: none;
}

[dir=second_2]>.txt2_2,
[dir=first_2]>.txt1_2 {
  display: block;
}
</style>
<div class="container1">
  <button onclick="toggle('first')" class="clickme">Some text</button>
  <button onclick="toggle('second')" class="clickme">Some other text</button>

    <div class="holder">
      <div class="txt1">
        <h1>Some content here</h1>
      </div>    
      <div class="txt2">
        <h1>Some different content here</h1>
       </div>
    </div>
</div>

<div class="container2">
  <button onclick="toggle_2('first_2')" class="clickme">Some text</button>
  <button onclick="toggle_2('second_2')" class="clickme">Some other text</button>

    <div class="holder_2">
      <div class="txt1_2">
        <h1>Some content here</h1>
      </div>    
      <div class="txt2_2">
        <h1>Some different content here</h1>
       </div>
    </div>
</div>

<script src="script.js"></script>
</body>
</html>
var holder = document.querySelector(".holder");

function toggle(val) {
  holder.setAttribute('dir', val);
}

var holder_2 = document.querySelector(".holder_2");

function toggle_2(val) {
  holder_2.setAttribute('dir', val);
}