SORU!! Bu yapıyı nasıl oluşturabilirim?

15-05-2023, 15:26:26

Html'de bu yapıyı nasıl oluşturabilirim yardımcı olabilecek var mıdır? Sadece fikir vermesi yada örnek bir kod paylaşması yeterli? Cevaplarınız için teşekkürler

15-05-2023, 15:31:51

#2

TahaKocak

Saf html, css ve javascript kullanarak bu şekilde tasarlayabilirsiniz. Geliştirilebilir, sadece fikir vermesi açısından paylaştım.

<div class="card">
  <h2 class="card-title" onclick="toggleContent()">Başlık</h2>
 <div class="card-content" id="content">    İçerik burada.  </div>
</div>

.card {  background-color: #f0f0f0;  padding: 10px;  border-radius: 5px;  width: 300px; }
 .card-title {  cursor: pointer; }
 .card-content {  display: none;  margin-top: 10px; }

function toggleContent() {
 let content = document.getElementById("content");
  if (content.style.display === "none") {  
   content.style.display = "block";
  } else {
   content.style.display = "none";  
  }
 }

15-05-2023, 15:33:43

#3

bilalaydemir

TahaKocak adlı üyeden alıntı: mesajı görüntüle

Saf html, css ve javascript kullanarak bu şekilde tasarlayabilirsiniz. Geliştirilebilir, sadece fikir vermesi açısından paylaştım.

<div class="card">
  <h2 class="card-title" onclick="toggleContent()">Başlık</h2>
 <div class="card-content" id="content">    İçerik burada.  </div>
</div>

.card {  background-color: #f0f0f0;  padding: 10px;  border-radius: 5px;  width: 300px; }
 .card-title {  cursor: pointer; }
 .card-content {  display: none;  margin-top: 10px; }

function toggleContent() {
 let content = document.getElementById("content");
  if (content.style.display === "none") {  
   content.style.display = "block";
  } else {
   content.style.display = "none";  
  }
 }

Çok teşekkürler hocam