Spoilerlı içerik nasıl paylaşılır? R10+

By ChatGPT ;

Bir web sitesinde "spoiler" niteliğinde içerikleri bu tarz bir şekilde yayınlamak için birkaç basit adım izleyebilirsin. "Görmek için tıklayın" gibi bir yazı ekleyerek kullanıcıların içeriği kendi istekleriyle görmesini sağlayabilirsin. İşte bu tip bir spoiler gösterimini nasıl yapabileceğinle ilgili HTML ve CSS örneği:

1. HTML Kodu

HTML yapısında, spoiler içeriği gizlemek için bir div veya span etiketini kullanabilirsin:

<div class="spoiler">
  <div class="spoiler-content" style="display:none;">
    <!-- Spoiler içeriği burada yer alacak, örneğin bir resim -->
    <img src="your_image_url.jpg" alt="Spoiler Image">
  </div>
  <button class="spoiler-button">Görmek için tıklayın</button>
</div>

2. CSS Kodu

CSS ile spoiler içeriğini başlangıçta gizleyebilir ve kullanıcı tıkladığında görünmesini sağlayabilirsin:

.spoiler-content {
  display: none;
}

.spoiler-button {
  cursor: pointer;
  background-color: #333;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 5px;
}

3. JavaScript Kodu

Kullanıcı "Görmek için tıklayın" butonuna bastığında, içerik görünür hale gelir:

document.querySelector('.spoiler-button').addEventListener('click', function() {
  var content = document.querySelector('.spoiler-content');
  content.style.display = 'block'; // İçeriği görünür yapar
  this.style.display = 'none'; // Butonu gizler
});

Bu şekilde, spoiler içeriğini gizleyebilir ve kullanıcılar tıkladığında açılan bir spoiler alanı oluşturabilirsin. Buton "Görmek için tıklayın" şeklinde olur ve tıklandığında içerik (örneğin bir resim, metin veya video) görünür hale gelir.