Hocam css tanımlarını kullanacağınız yere ve zevkinize göre kendiniz düzenlersiniz. Ben bikaç satır bişeyler karaladım umarım işinizi görür.
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<style type="text/css">
#sorucevap{text-align:center;}
#sorucevap .s{border-bottom:2px solid #000;
font:bold 13px Arial; padding:10px; cursor:pointer; color:#fff;
background-image: -ms-linear-gradient(top left, #091421 0%, #75A1C7 100%);
background-image: -moz-linear-gradient(top left, #091421 0%, #75A1C7 100%);
background-image: -o-linear-gradient(top left, #091421 0%, #75A1C7 100%);
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #091421), color-stop(1, #75A1C7));
background-image: -webkit-linear-gradient(top left, #091421 0%, #75A1C7 100%);
background-image: linear-gradient(to bottom right, #091421 0%, #75A1C7 100%);
}
#sorucevap .c{display:none; background:#eee; border:1px solid #aaa; border-top:none;}
</style>
</head><body>
<div id="sorucevap">
<div class="s">Soru</div><div class="c">Cevap</div>
<div class="s">Soru</div><div class="c">Cevap</div>
<div class="s">Soru</div><div class="c">Cevap</div>
<div class="s">Soru</div><div class="c">Cevap</div>
<div class="s">Soru</div><div class="c">Cevap</div>
</div>
<script type="text/javascript">
$('#sorucevap .s').click(function(){
$(this).next().slideToggle(500).siblings('.c').slideUp(500);
});
</script>
</body></html>İyi çalışmalar