Kişisel blogumda kullandığım açılır kapanır div şeklinde bi sistem vardı aynen vereyim sen düzenlersin.

Şu HTML



İş Türü (İletişim için sitenin sağ alt kısmına bakınız)







Firmanız için web sitesi ihtiyacınız varsa iletişime geçebilirsiniz.






Blog, video, galeri ve benzeri ihtiyaçlarınızı karşılayacak WordPress tabanlı web sitesi işleri için iletişime geçebilirsiniz.






Bilim, edebiyat, magazin veya herhangi bir konuda dergi projeniz varsa, tasarım işi için iletişime geçebilirsiniz. Ayrıca katalog, kartvizit ve diğer matbaa materyalleri ile alakalı da ulaşabilirsiniz.




<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
</script>






Şunlar CSS

button.accordion {
float: left;
background-color: #eee;
color: #444;
padding: 10px;
cursor: pointer;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}

button.accordion.active, button.accordion:hover {
background-color: #ddd;
}


div.panel {
padding: 10px 20px;
background-color: white;
display: none;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}

div.panel.show {
display: block !important;
}

div.panel {

background-color: #f8f8f8;
max-height: 0;
overflow: hidden;
transition: 0.6s ease-in-out;
opacity: 0;
}

div.panel.show {
opacity: 1;
max-height: 500px; /* Whatever you like, as long as its more than the height of the content (on all screen sizes) */
}


Bunları da üst kısımda bulundur (header) gerek olabilir
<script></script>
<script></script>
<script></script>