<!-- 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)
}
}
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.