Tıklandığında Açılan Alanlar Oluştur - CSS

Tıklanacak alana tıklandığında gösterilecek alanı açan CSS örneğidir.

Dosyalar

style.css


.tiklanacak-alan {
   background-color:yellow;
   padding: 5px;
   border: 1px solid #222;
}

.gosterilecek-alan {
   position:relative;
   display:none;
   background-color: pink;
   padding: 5px;
   margin-top:10px;
   border: 1px solid #222;
}

a.tiklanacak-alan:focus + .gosterilecek-alan {
   display:block;
}

index.html


<!DOCTYPE html>
<html>
<head>
	<title>CSS Tıklanınca Açılan Alanlar Oluştur</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<a tabindex="0" class="tiklanacak-alan">
	    Bu sorunun cevabı nedir? (Öğrenmek için tıkla!)
	</a>
	<div class="gosterilecek-alan">
	   <p>Bilmiyorum.</p>
	</div>
</body>
</html>

İndirme Bağlantısı

Konu ile ilgili örnek dosyayı bu bağlantıdan indirebilirsiniz: İndir

Yararlanılan Kaynaklar

jsfiddle.net/y2C98/ stackoverflow.com/questions/4112289/what-is-the-html-tabindex-attribute

Etiketler

css