< yerine & l t ;
> yerine & g t ;( Boşluk yok )
> yerine & g t ;( Boşluk yok )
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.accordion {
background-color: #1e729d;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active, .accordion:hover {
background-color: #2395c5;
}
.panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}
</style>
</head>
<body>
<button class="accordion"><font color="white"><i class="ri-arrow-up-down-line"></i> 8. SINIF</font></button>
<div class="panel">
<div class="alert-message alert"><a href="#"><i class="ri-links-line"></i> SÖZCÜKTE ANLAM</a></div>
<div class="alert-message success"><a href="#"><i class="ri-links-line"></i> CÜMLEDE ANLAM</a></div>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
</script>
</body>
</html>
<details>Açıklama. <summary style="cursor: pointer; font-weight: bold; padding: 10px; background: #f1f9f7; border-radius: 5px;"> BAŞLIK </summary>
MAVİ: #2b469c
TURKUAZ: #1ceff6
TURKUAZ: #1ceff6
<div class="alert-message alert"><a href="LİNK" target="_blank"><i class="ri-links-line"></i>YAZI</a></div>
<div class="alert-message success"><a href="LİNK"><i class="ri-links-line"></i>YAZI</a></div>
<script type="text/javascript"> var password = 'BloggerSpice' password=prompt('AÇIKLAMA VE UYARI BURAYA ',''); if (password != 'ŞİFRE BURAYA') { location.href='SAYFA LINKI'; } </script>
<img src="LİNK" alt="YAZI/>
<a href="LİNK" target="_blank">YAZI</a>
<font color="red">YAZI</font>
<img alt="" border="0" data-original-height="000" data-original-width="000" src="RESİM.JPG" width="00" /><span></span><span>
<a class="button is-default">İNDİR</a>
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Yan Yana Açılır Menü</title>
<style>
body {
font-family: Arial, sans-serif;
}
.menu {
display: flex;
gap: 10px;
}
.menu-item {
border: 1px solid #ccc;
width: 180px;
}
.menu-header {
background: #2b469c;
color: white;
padding: 10px;
cursor: pointer;
font-weight: bold;
text-align: center;
}
.menu-content {
display: none;
padding: 10px;
background: #f2f2f2;
}
.menu-content a {
display: block;
margin: 5px 0;
text-decoration: none;
color: #333;
}
</style>
</head>
<body>
<div class="menu">
<div class="menu-item">
<div class="menu-header" onclick="toggleMenu(0)">Menü 1</div>
<div class="menu-content">
<a href="#">Alt Menü 1</a>
<a href="#">Alt Menü 2</a>
<a href="#">Alt Menü 3</a>
</div>
</div>
<div class="menu-item">
<div class="menu-header" onclick="toggleMenu(1)">Menü 2</div>
<div class="menu-content">
<a href="#">Alt Menü A</a>
<a href="#">Alt Menü B</a>
<a href="#">Alt Menü C</a>
</div>
</div>
<div class="menu-item">
<div class="menu-header" onclick="toggleMenu(2)">Menü 3</div>
<div class="menu-content">
<a href="#">Link X</a>
<a href="#">Link Y</a>
<a href="#">Link Z</a>
</div>
</div>
<div class="menu-item">
<div class="menu-header" onclick="toggleMenu(3)">Menü 4</div>
<div class="menu-content">
<a href="#">A</a>
<a href="#">B</a>
<a href="#">C</a>
</div>
</div>
</div>
<script>
function toggleMenu(index) {
const contents = document.querySelectorAll('.menu-content');
contents.forEach((content, i) => {
if (i === index) {
content.style.display =
content.style.display === 'block' ? 'none' : 'block';
} else {
content.style.display = 'none';
}
});
}
</script>
</body>
</html>