HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>data-country example</title>
</head>
<body>
  <h1>Country-specific sections</h1>
  <p>Pick a country to highlight its section:</p>
  <button type="button" data-pick="US">United States</button>
  <button type="button" data-pick="GB">United Kingdom</button>
  <button type="button" data-pick="IN">India</button>

  <div class="country-info" data-country="US">
    <h2>United States</h2>
    <p>Information for customers in the United States.</p>
  </div>
  <div class="country-info" data-country="GB">
    <h2>United Kingdom</h2>
    <p>Information for customers in the United Kingdom.</p>
  </div>
  <div class="country-info" data-country="IN">
    <h2>India</h2>
    <p>Information for customers in India.</p>
  </div>

  <script>
    var sections = document.querySelectorAll('.country-info');
    function showCountry(code) {
      for (var i = 0; i < sections.length; i++) {
        sections[i].style.display =
          sections[i].getAttribute('data-country') === code ? 'block' : 'none';
      }
    }
    var buttons = document.querySelectorAll('[data-pick]');
    for (var j = 0; j < buttons.length; j++) {
      buttons[j].onclick = function () {
        showCountry(this.getAttribute('data-pick'));
      };
    }
    showCountry('US');
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

Country Code — data-country Sections