<!-- Tab links -->
<div class="tab">
<button class="tablinks" data-target="kabul">Kabul</button>
<button class="tablinks" data-target="algiers">Algiers</button>
<button class="tablinks" data-target="luanda">Luanda</button>
<button class="tablinks" data-target="yerevan">Yerevan</button>
<button class="tablinks" data-target="canberra">Canberra</button>
<button class="tablinks" data-target="vienna">Vienna</button>
<button class="tablinks" data-target="baku">Baku</button>
<button class="tablinks" data-target="nassau">Nassau</button>
<button class="tablinks" data-target="manama">Manama</button>
<button class="tablinks" data-target="dhaka">Dhaka</button>
<button class="tablinks" data-target="bridgetown">Bridgetown</button>
<button class="tablinks" data-target="minsk">Minsk</button>
<button class="tablinks" data-target="brussels">Brussels</button>
<button class="tablinks" data-target="belmopan">Belmopan</button>
<button class="tablinks" data-target="thimphu">Thimphu</button>
<button class="tablinks" data-target="gaborone">Gaborone</button>
<button class="tablinks" data-target="brasilia">Brasilia</button>
<button class="tablinks" data-target="sofia">Sofia</button>
<button class="tablinks" data-target="yaounde">Yaounde</button>
<button class="tablinks" data-target="ottawa">Ottawa</button>
<button class="tablinks" data-target="santiago">Santiago</button>
<button class="tablinks" data-target="beijing">Beijing</button>
<button class="tablinks" data-target="bogota">Bogota</button>
<button class="tablinks" data-target="moroni">Moroni</button>
<button class="tablinks" data-target="zagreb">Zagreb</button>
<button class="tablinks" data-target="havana">Havana</button>
<button class="tablinks" data-target="nicosia">Nicosia</button>
<button class="tablinks" data-target="copenhagen">Copenhagen</button>
<button class="tablinks" data-target="djibouti">Djibouti</button>
<button class="tablinks" data-target="roseau">Roseau</button>
<button class="tablinks" data-target="quito">Quito</button>
<button class="tablinks" data-target="cairo">Cairo</button>
<button class="tablinks" data-target="asmara">Asmara</button>
<button class="tablinks" data-target="tallinn">Tallinn</button>
<button class="tablinks" data-target="suva">Suva</button>
<button class="tablinks" data-target="helsinki">Helsinki</button>
<button class="tablinks" data-target="paris">Paris</button>
<button class="tablinks" data-target="libreville">Libreville</button>
<button class="tablinks" data-target="banjul">Banjul</button>
<button class="tablinks" data-target="tbilisi">Tbilisi</button>
<button class="tablinks" data-target="berlin">Berlin</button>
<button class="tablinks" data-target="accra">Accra</button>
<button class="tablinks" data-target="athens">Athens</button>
<button class="tablinks" data-target="conakry">Conakry</button>
<button class="tablinks" data-target="georgetown">Georgetown</button>
<button class="tablinks" data-target="tegucigalpa">Tegucigalpa</button>
<button class="tablinks" data-target="budapest">Budapest</button>
<button class="tablinks" data-target="reykjavik">Reykjavik</button>
<button class="tablinks" data-target="jakarta">Jakarta</button>
<button class="tablinks" data-target="tehran">Tehran</button>
<button class="tablinks" data-target="baghdad">Baghdad</button>
<button class="tablinks" data-target="dublin">Dublin</button>
<button class="tablinks" data-target="rome">Rome</button>
<button class="tablinks" data-target="kingston">Kingston</button>
<button class="tablinks" data-target="tokyo">Tokyo</button>
<button class="tablinks" data-target="amman">Amman</button>
<button class="tablinks" data-target="nairobi">Nairobi</button>
<button class="tablinks" data-target="pristina">Pristina</button>
<button class="tablinks" data-target="bishkek">Bishkek</button>
<button class="tablinks" data-target="vientiane">Vientiane</button>
<button class="tablinks" data-target="riga">Riga</button>
<button class="tablinks" data-target="beirut">Beirut</button>
<button class="tablinks" data-target="maseru">Maseru</button>
<button class="tablinks" data-target="monrovia">Monrovia</button>
<button class="tablinks" data-target="tripoli">Tripoli</button>
<button class="tablinks" data-target="vaduz">Vaduz</button>
<button class="tablinks" data-target="vilnius">Vilnius</button>
<button class="tablinks" data-target="luxembourg">Luxembourg</button>
<button class="tablinks" data-target="antananarivo">Antananarivo</button>
<button class="tablinks" data-target="lilongwe">Lilongwe</button>
<button class="tablinks" data-target="male">Male</button>
<button class="tablinks" data-target="bamako">Bamako</button>
<button class="tablinks" data-target="valletta">Valletta</button>
<button class="tablinks" data-target="nouakchott">Nouakchott</button>
<button class="tablinks" data-target="chisinau">Chisinau</button>
<button class="tablinks" data-target="monaco">Monaco</button>
<button class="tablinks" data-target="ulaanbaatar">Ulaanbaatar</button>
<button class="tablinks" data-target="podgorica">Podgorica</button>
<button class="tablinks" data-target="rabat">Rabat</button>
<button class="tablinks" data-target="maputo">Maputo</button>
<button class="tablinks" data-target="windhoek">Windhoek</button>
<button class="tablinks" data-target="kathmandu">Kathmandu</button>
<button class="tablinks" data-target="managua">Managua</button>
<button class="tablinks" data-target="niamey">Niamey</button>
<button class="tablinks" data-target="abuja">Abuja</button>
<button class="tablinks" data-target="oslo">Oslo</button>
<button class="tablinks" data-target="muscat">Muscat</button>
<button class="tablinks" data-target="islamabad">Islamabad</button>
<button class="tablinks" data-target="melekeok">Melekeok</button>
<button class="tablinks" data-target="asuncion">Asuncion</button>
<button class="tablinks" data-target="lima">Lima</button>
<button class="tablinks" data-target="manila">Manila</button>
<button class="tablinks" data-target="warsaw">Warsaw</button>
<button class="tablinks" data-target="lisbon">Lisbon</button>
<button class="tablinks" data-target="doha">Doha</button>
<button class="tablinks" data-target="bucharest">Bucharest</button>
<button class="tablinks" data-target="moscow">Moscow</button>
<button class="tablinks" data-target="kigali">Kigali</button>
<button class="tablinks" data-target="apia">Apia</button>
<button class="tablinks" data-target="dakar">Dakar</button>
<button class="tablinks" data-target="belgrade">Belgrade</button>
<button class="tablinks" data-target="victoria">Victoria</button>
<button class="tablinks" data-target="singapore">Singapore</button>
<button class="tablinks" data-target="bratislava">Bratislava</button>
<button class="tablinks" data-target="ljubljana">Ljubljana</button>
<button class="tablinks" data-target="mogadishu">Mogadishu</button>
<button class="tablinks" data-target="madrid">Madrid</button>
<button class="tablinks" data-target="khartoum">Khartoum</button>
<button class="tablinks" data-target="paramaribo">Paramaribo</button>
<button class="tablinks" data-target="stockholm">Stockholm</button>
<button class="tablinks" data-target="bern">Bern</button>
<button class="tablinks" data-target="damascus">Damascus</button>
<button class="tablinks" data-target="dushanbe">Dushanbe</button>
<button class="tablinks" data-target="bangkok">Bangkok</button>
<button class="tablinks" data-target="lome">Lome</button>
<button class="tablinks" data-target="tunis">Tunis</button>
<button class="tablinks" data-target="ankara">Ankara</button>
<button class="tablinks" data-target="ashgabat">Ashgabat</button>
<button class="tablinks" data-target="kampala">Kampala</button>
<button class="tablinks" data-target="kiev">Kiev</button>
<button class="tablinks" data-target="montevideo">Montevideo</button>
<button class="tablinks" data-target="tashkent">Tashkent</button>
<button class="tablinks" data-target="caracas">Caracas</button>
<button class="tablinks" data-target="hanoi">Hanoi</button>
<button class="tablinks" data-target="lusaka">Lusaka</button>
<button class="tablinks" data-target="harare">Harare</button>
</div>

<!-- Tab content -->
<div id="kabul" class="tabcontent">
  <h3>Kabul</h3>
  <p>
    Kabul is the capital of Afghanistan.
  </p>
</div>
<div id="algiers" class="tabcontent">
  <h3>Algiers</h3>
  <p>
    Algiers is the capital of Algeria.
  </p>
</div>
<div id="luanda" class="tabcontent">
  <h3>Luanda</h3>
  <p>
    Luanda is the capital of Angola.
  </p>
</div>
<div id="yerevan" class="tabcontent">
  <h3>Yerevan</h3>
  <p>
    Yerevan is the capital of Armenia.
  </p>
</div>
<div id="canberra" class="tabcontent">
  <h3>Canberra</h3>
  <p>
    Canberra is the capital of Australia.
  </p>
</div>
<div id="vienna" class="tabcontent">
  <h3>Vienna</h3>
  <p>
    Vienna is the capital of Austria.
  </p>
</div>
<div id="baku" class="tabcontent">
  <h3>Baku</h3>
  <p>
    Baku is the capital of Azerbaijan.
  </p>
</div>
<div id="nassau" class="tabcontent">
  <h3>Nassau</h3>
  <p>
    Nassau is the capital of Bahamas.
  </p>
</div>
<div id="manama" class="tabcontent">
  <h3>Manama</h3>
  <p>
    Manama is the capital of Bahrain.
  </p>
</div>
<div id="dhaka" class="tabcontent">
  <h3>Dhaka</h3>
  <p>
    Dhaka is the capital of Bangladesh.
  </p>
</div>
<div id="bridgetown" class="tabcontent">
  <h3>Bridgetown</h3>
  <p>
    Bridgetown is the capital of Barbados.
  </p>
</div>
<div id="minsk" class="tabcontent">
  <h3>Minsk</h3>
  <p>
    Minsk is the capital of Belarus.
  </p>
</div>
<div id="brussels" class="tabcontent">
  <h3>Brussels</h3>
  <p>
    Brussels is the capital of Belgium.
  </p>
</div>
<div id="belmopan" class="tabcontent">
  <h3>Belmopan</h3>
  <p>
    Belmopan is the capital of Belize.
  </p>
</div>
<div id="thimphu" class="tabcontent">
  <h3>Thimphu</h3>
  <p>
    Thimphu is the capital of Bhutan.
  </p>
</div>
<div id="gaborone" class="tabcontent">
  <h3>Gaborone</h3>
  <p>
    Gaborone is the capital of Botswana.
  </p>
</div>
<div id="brasilia" class="tabcontent">
  <h3>Brasilia</h3>
  <p>
    Brasilia is the capital of Brazil.
  </p>
</div>
<div id="sofia" class="tabcontent">
  <h3>Sofia</h3>
  <p>
    Sofia is the capital of Bulgaria.
  </p>
</div>
<div id="yaounde" class="tabcontent">
  <h3>Yaounde</h3>
  <p>
    Yaounde is the capital of Cameroon.
  </p>
</div>
<div id="ottawa" class="tabcontent">
  <h3>Ottawa</h3>
  <p>
    Ottawa is the capital of Canada.
  </p>
</div>
<div id="santiago" class="tabcontent">
  <h3>Santiago</h3>
  <p>
    Santiago is the capital of Chile.
  </p>
</div>
<div id="beijing" class="tabcontent">
  <h3>Beijing</h3>
  <p>
    Beijing is the capital of China.
  </p>
</div>
<div id="bogota" class="tabcontent">
  <h3>Bogota</h3>
  <p>
    Bogota is the capital of Colombia.
  </p>
</div>
<div id="moroni" class="tabcontent">
  <h3>Moroni</h3>
  <p>
    Moroni is the capital of Comoros.
  </p>
</div>
<div id="zagreb" class="tabcontent">
  <h3>Zagreb</h3>
  <p>
    Zagreb is the capital of Croatia.
  </p>
</div>
<div id="havana" class="tabcontent">
  <h3>Havana</h3>
  <p>
    Havana is the capital of Cuba.
  </p>
</div>
<div id="nicosia" class="tabcontent">
  <h3>Nicosia</h3>
  <p>
    Nicosia is the capital of Cyprus.
  </p>
</div>
<div id="copenhagen" class="tabcontent">
  <h3>Copenhagen</h3>
  <p>
    Copenhagen is the capital of Denmark.
  </p>
</div>
<div id="djibouti" class="tabcontent">
  <h3>Djibouti</h3>
  <p>
    Djibouti is the capital of Djibouti.
  </p>
</div>
<div id="roseau" class="tabcontent">
  <h3>Roseau</h3>
  <p>
    Roseau is the capital of Dominica.
  </p>
</div>
<div id="quito" class="tabcontent">
  <h3>Quito</h3>
  <p>
    Quito is the capital of Ecuador.
  </p>
</div>
<div id="cairo" class="tabcontent">
  <h3>Cairo</h3>
  <p>
    Cairo is the capital of Egypt.
  </p>
</div>
<div id="asmara" class="tabcontent">
  <h3>Asmara</h3>
  <p>
    Asmara is the capital of Eritrea.
  </p>
</div>
<div id="tallinn" class="tabcontent">
  <h3>Tallinn</h3>
  <p>
    Tallinn is the capital of Estonia.
  </p>
</div>
<div id="suva" class="tabcontent">
  <h3>Suva</h3>
  <p>
    Suva is the capital of Fiji.
  </p>
</div>
<div id="helsinki" class="tabcontent">
  <h3>Helsinki</h3>
  <p>
    Helsinki is the capital of Finland.
  </p>
</div>
<div id="paris" class="tabcontent">
  <h3>Paris</h3>
  <p>
    Paris is the capital of France.
  </p>
</div>
<div id="libreville" class="tabcontent">
  <h3>Libreville</h3>
  <p>
    Libreville is the capital of Gabon.
  </p>
</div>
<div id="banjul" class="tabcontent">
  <h3>Banjul</h3>
  <p>
    Banjul is the capital of Gambia.
  </p>
</div>
<div id="tbilisi" class="tabcontent">
  <h3>Tbilisi</h3>
  <p>
    Tbilisi is the capital of Georgia.
  </p>
</div>
<div id="berlin" class="tabcontent">
  <h3>Berlin</h3>
  <p>
    Berlin is the capital of Germany.
  </p>
</div>
<div id="accra" class="tabcontent">
  <h3>Accra</h3>
  <p>
    Accra is the capital of Ghana.
  </p>
</div>
<div id="athens" class="tabcontent">
  <h3>Athens</h3>
  <p>
    Athens is the capital of Greece.
  </p>
</div>
<div id="conakry" class="tabcontent">
  <h3>Conakry</h3>
  <p>
    Conakry is the capital of Guinea.
  </p>
</div>
<div id="georgetown" class="tabcontent">
  <h3>Georgetown</h3>
  <p>
    Georgetown is the capital of Guyana.
  </p>
</div>
<div id="tegucigalpa" class="tabcontent">
  <h3>Tegucigalpa</h3>
  <p>
    Tegucigalpa is the capital of Honduras.
  </p>
</div>
<div id="budapest" class="tabcontent">
  <h3>Budapest</h3>
  <p>
    Budapest is the capital of Hungary.
  </p>
</div>
<div id="reykjavik" class="tabcontent">
  <h3>Reykjavik</h3>
  <p>
    Reykjavik is the capital of Iceland.
  </p>
</div>
<div id="jakarta" class="tabcontent">
  <h3>Jakarta</h3>
  <p>
    Jakarta is the capital of Indonesia.
  </p>
</div>
<div id="tehran" class="tabcontent">
  <h3>Tehran</h3>
  <p>
    Tehran is the capital of Iran.
  </p>
</div>
<div id="baghdad" class="tabcontent">
  <h3>Baghdad</h3>
  <p>
    Baghdad is the capital of Iraq.
  </p>
</div>
<div id="dublin" class="tabcontent">
  <h3>Dublin</h3>
  <p>
    Dublin is the capital of Ireland.
  </p>
</div>
<div id="rome" class="tabcontent">
  <h3>Rome</h3>
  <p>
    Rome is the capital of Italy.
  </p>
</div>
<div id="kingston" class="tabcontent">
  <h3>Kingston</h3>
  <p>
    Kingston is the capital of Jamaica.
  </p>
</div>
<div id="tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>
    Tokyo is the capital of Japan.
  </p>
</div>
<div id="amman" class="tabcontent">
  <h3>Amman</h3>
  <p>
    Amman is the capital of Jordan.
  </p>
</div>
<div id="nairobi" class="tabcontent">
  <h3>Nairobi</h3>
  <p>
    Nairobi is the capital of Kenya.
  </p>
</div>
<div id="pristina" class="tabcontent">
  <h3>Pristina</h3>
  <p>
    Pristina is the capital of Kosovo.
  </p>
</div>
<div id="bishkek" class="tabcontent">
  <h3>Bishkek</h3>
  <p>
    Bishkek is the capital of Kyrgyzstan.
  </p>
</div>
<div id="vientiane" class="tabcontent">
  <h3>Vientiane</h3>
  <p>
    Vientiane is the capital of Laos.
  </p>
</div>
<div id="riga" class="tabcontent">
  <h3>Riga</h3>
  <p>
    Riga is the capital of Latvia.
  </p>
</div>
<div id="beirut" class="tabcontent">
  <h3>Beirut</h3>
  <p>
    Beirut is the capital of Lebanon.
  </p>
</div>
<div id="maseru" class="tabcontent">
  <h3>Maseru</h3>
  <p>
    Maseru is the capital of Lesotho.
  </p>
</div>
<div id="monrovia" class="tabcontent">
  <h3>Monrovia</h3>
  <p>
    Monrovia is the capital of Liberia.
  </p>
</div>
<div id="tripoli" class="tabcontent">
  <h3>Tripoli</h3>
  <p>
    Tripoli is the capital of Libya.
  </p>
</div>
<div id="vaduz" class="tabcontent">
  <h3>Vaduz</h3>
  <p>
    Vaduz is the capital of Liechtenstein.
  </p>
</div>
<div id="vilnius" class="tabcontent">
  <h3>Vilnius</h3>
  <p>
    Vilnius is the capital of Lithuania.
  </p>
</div>
<div id="luxembourg" class="tabcontent">
  <h3>Luxembourg</h3>
  <p>
    Luxembourg is the capital of Luxembourg.
  </p>
</div>
<div id="antananarivo" class="tabcontent">
  <h3>Antananarivo</h3>
  <p>
    Antananarivo is the capital of Madagascar.
  </p>
</div>
<div id="lilongwe" class="tabcontent">
  <h3>Lilongwe</h3>
  <p>
    Lilongwe is the capital of Malawi.
  </p>
</div>
<div id="male" class="tabcontent">
  <h3>Male</h3>
  <p>
    Male is the capital of Maldives.
  </p>
</div>
<div id="bamako" class="tabcontent">
  <h3>Bamako</h3>
  <p>
    Bamako is the capital of Mali.
  </p>
</div>
<div id="valletta" class="tabcontent">
  <h3>Valletta</h3>
  <p>
    Valletta is the capital of Malta.
  </p>
</div>
<div id="nouakchott" class="tabcontent">
  <h3>Nouakchott</h3>
  <p>
    Nouakchott is the capital of Mauritania.
  </p>
</div>
<div id="chisinau" class="tabcontent">
  <h3>Chisinau</h3>
  <p>
    Chisinau is the capital of Moldova.
  </p>
</div>
<div id="monaco" class="tabcontent">
  <h3>Monaco</h3>
  <p>
    Monaco is the capital of Monaco.
  </p>
</div>
<div id="ulaanbaatar" class="tabcontent">
  <h3>Ulaanbaatar</h3>
  <p>
    Ulaanbaatar is the capital of Mongolia.
  </p>
</div>
<div id="podgorica" class="tabcontent">
  <h3>Podgorica</h3>
  <p>
    Podgorica is the capital of Montenegro.
  </p>
</div>
<div id="rabat" class="tabcontent">
  <h3>Rabat</h3>
  <p>
    Rabat is the capital of Morocco.
  </p>
</div>
<div id="maputo" class="tabcontent">
  <h3>Maputo</h3>
  <p>
    Maputo is the capital of Mozambique.
  </p>
</div>
<div id="windhoek" class="tabcontent">
  <h3>Windhoek</h3>
  <p>
    Windhoek is the capital of Namibia.
  </p>
</div>
<div id="kathmandu" class="tabcontent">
  <h3>Kathmandu</h3>
  <p>
    Kathmandu is the capital of Nepal.
  </p>
</div>
<div id="managua" class="tabcontent">
  <h3>Managua</h3>
  <p>
    Managua is the capital of Nicaragua.
  </p>
</div>
<div id="niamey" class="tabcontent">
  <h3>Niamey</h3>
  <p>
    Niamey is the capital of Niger.
  </p>
</div>
<div id="abuja" class="tabcontent">
  <h3>Abuja</h3>
  <p>
    Abuja is the capital of Nigeria.
  </p>
</div>
<div id="oslo" class="tabcontent">
  <h3>Oslo</h3>
  <p>
    Oslo is the capital of Norway.
  </p>
</div>
<div id="muscat" class="tabcontent">
  <h3>Muscat</h3>
  <p>
    Muscat is the capital of Oman.
  </p>
</div>
<div id="islamabad" class="tabcontent">
  <h3>Islamabad</h3>
  <p>
    Islamabad is the capital of Pakistan.
  </p>
</div>
<div id="melekeok" class="tabcontent">
  <h3>Melekeok</h3>
  <p>
    Melekeok is the capital of Palau.
  </p>
</div>
<div id="asuncion" class="tabcontent">
  <h3>Asuncion</h3>
  <p>
    Asuncion is the capital of Paraguay.
  </p>
</div>
<div id="lima" class="tabcontent">
  <h3>Lima</h3>
  <p>
    Lima is the capital of Peru.
  </p>
</div>
<div id="manila" class="tabcontent">
  <h3>Manila</h3>
  <p>
    Manila is the capital of Philippines.
  </p>
</div>
<div id="warsaw" class="tabcontent">
  <h3>Warsaw</h3>
  <p>
    Warsaw is the capital of Poland.
  </p>
</div>
<div id="lisbon" class="tabcontent">
  <h3>Lisbon</h3>
  <p>
    Lisbon is the capital of Portugal.
  </p>
</div>
<div id="doha" class="tabcontent">
  <h3>Doha</h3>
  <p>
    Doha is the capital of Qatar.
  </p>
</div>
<div id="bucharest" class="tabcontent">
  <h3>Bucharest</h3>
  <p>
    Bucharest is the capital of Romania.
  </p>
</div>
<div id="moscow" class="tabcontent">
  <h3>Moscow</h3>
  <p>
    Moscow is the capital of Russia.
  </p>
</div>
<div id="kigali" class="tabcontent">
  <h3>Kigali</h3>
  <p>
    Kigali is the capital of Rwanda.
  </p>
</div>
<div id="apia" class="tabcontent">
  <h3>Apia</h3>
  <p>
    Apia is the capital of Samoa.
  </p>
</div>
<div id="dakar" class="tabcontent">
  <h3>Dakar</h3>
  <p>
    Dakar is the capital of Senegal.
  </p>
</div>
<div id="belgrade" class="tabcontent">
  <h3>Belgrade</h3>
  <p>
    Belgrade is the capital of Serbia.
  </p>
</div>
<div id="victoria" class="tabcontent">
  <h3>Victoria</h3>
  <p>
    Victoria is the capital of Seychelles.
  </p>
</div>
<div id="singapore" class="tabcontent">
  <h3>Singapore</h3>
  <p>
    Singapore is the capital of Singapore.
  </p>
</div>
<div id="bratislava" class="tabcontent">
  <h3>Bratislava</h3>
  <p>
    Bratislava is the capital of Slovakia.
  </p>
</div>
<div id="ljubljana" class="tabcontent">
  <h3>Ljubljana</h3>
  <p>
    Ljubljana is the capital of Slovenia.
  </p>
</div>
<div id="mogadishu" class="tabcontent">
  <h3>Mogadishu</h3>
  <p>
    Mogadishu is the capital of Somalia.
  </p>
</div>
<div id="madrid" class="tabcontent">
  <h3>Madrid</h3>
  <p>
    Madrid is the capital of Spain.
  </p>
</div>
<div id="khartoum" class="tabcontent">
  <h3>Khartoum</h3>
  <p>
    Khartoum is the capital of Sudan.
  </p>
</div>
<div id="paramaribo" class="tabcontent">
  <h3>Paramaribo</h3>
  <p>
    Paramaribo is the capital of Suriname.
  </p>
</div>
<div id="stockholm" class="tabcontent">
  <h3>Stockholm</h3>
  <p>
    Stockholm is the capital of Sweden.
  </p>
</div>
<div id="bern" class="tabcontent">
  <h3>Bern</h3>
  <p>
    Bern is the capital of Switzerland.
  </p>
</div>
<div id="damascus" class="tabcontent">
  <h3>Damascus</h3>
  <p>
    Damascus is the capital of Syria.
  </p>
</div>
<div id="dushanbe" class="tabcontent">
  <h3>Dushanbe</h3>
  <p>
    Dushanbe is the capital of Tajikistan.
  </p>
</div>
<div id="bangkok" class="tabcontent">
  <h3>Bangkok</h3>
  <p>
    Bangkok is the capital of Thailand.
  </p>
</div>
<div id="lome" class="tabcontent">
  <h3>Lome</h3>
  <p>
    Lome is the capital of Togo.
  </p>
</div>
<div id="tunis" class="tabcontent">
  <h3>Tunis</h3>
  <p>
    Tunis is the capital of Tunisia.
  </p>
</div>
<div id="ankara" class="tabcontent">
  <h3>Ankara</h3>
  <p>
    Ankara is the capital of Turkey.
  </p>
</div>
<div id="ashgabat" class="tabcontent">
  <h3>Ashgabat</h3>
  <p>
    Ashgabat is the capital of Turkmenistan.
  </p>
</div>
<div id="kampala" class="tabcontent">
  <h3>Kampala</h3>
  <p>
    Kampala is the capital of Uganda.
  </p>
</div>
<div id="kiev" class="tabcontent">
  <h3>Kiev</h3>
  <p>
    Kiev is the capital of Ukraine.
  </p>
</div>
<div id="montevideo" class="tabcontent">
  <h3>Montevideo</h3>
  <p>
    Montevideo is the capital of Uruguay.
  </p>
</div>
<div id="tashkent" class="tabcontent">
  <h3>Tashkent</h3>
  <p>
    Tashkent is the capital of Uzbekistan.
  </p>
</div>
<div id="caracas" class="tabcontent">
  <h3>Caracas</h3>
  <p>
    Caracas is the capital of Venezuela.
  </p>
</div>
<div id="hanoi" class="tabcontent">
  <h3>Hanoi</h3>
  <p>
    Hanoi is the capital of Vietnam.
  </p>
</div>
<div id="lusaka" class="tabcontent">
  <h3>Lusaka</h3>
  <p>
    Lusaka is the capital of Zambia.
  </p>
</div>
<div id="harare" class="tabcontent">
  <h3>Harare</h3>
  <p>
    Harare is the capital of Zimbabwe.
  </p>
</div>
/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
.tabcontent.active {
  display: block;
}
document.addEventListener('click', function(e){
    if (e.target.classList.contains('tablinks') && !e.target.classList.contains('active')){
      if (target = document.querySelector('#'+e.target.dataset.target+'.tabcontent'))
        [target,e.target,...document.querySelectorAll('.tablinks.active,.tabcontent.active')].forEach(e => e.classList.toggle('active'))
      else {
        alert('Sorry, that link is unreachable now!')
        e.target.parentNode.removeChild(e.target)
      }
    }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.