Youtube’daki uzun açıklamalarda kullanılan Show more / Show less mantığında çalışan Daha fazla / Daha az butonu.
İsterseniz jsFiddle üzerinden deneyebilirsiniz.
Üstünde çalışırak (zaman ayırabilirsem) Youtube’daki gibi CSS’leri düzenlemeyi düşünüyorum.
HTML, CSS ve JavaScript
<!doctype html>
<html>
<head>
<style type="text/css">
h1{
font-size:24px;
font-weight:bold;
}
p{
margin:16px 0;
}
.description {
position: relative;
}
.description .description-text {
height: 70px;
overflow: hidden;
}
.description.expanded .description-text {
height: auto;
}
.description .showhide {
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(239,239,239,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(239,239,239,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#EFEFEF',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 100%); /* W3C */
border: solid #ccc;
border-radius: 0 0 5px 5px;
border-width: 0 0 1px 0;
cursor: pointer; /* If not in your css reset already */
font-size: 12px;
height: 16px;
padding: 0;
position: absolute;
bottom: 0;
vertical-align: middle;
width: 100%;
}
.description .showhide:hover, .description .showhide:focus {
outline: 0;
}
.description .showhide:hover {
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(234,242,253,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(234,242,253,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(234,242,253,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(234,242,253,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(234,242,253,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#EAF2FD',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(234,242,253,1) 100%); /* W3C */
color: #669acc;
}
.description-fadeout {
display: block;
height: 8px;
margin: 0;
position: absolute;
bottom: 16px;
width: 100%;
z-index: 999;
background-image: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background-image: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Opera11.10+ */
background-image: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
background-image: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C */
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.description .showhide').each(function() {
var showHideButton = $(this), description = showHideButton.parent(), showHideText = showHideButton.children('span');
showHideButton.click(function() {
description.toggleClass('expanded');
showHideText.text(showHideText.text() == 'Devamını göster' ? 'Küçült' : 'Devamını göster');
});
});
});
</script>
</head>
<body>
<div id="page-wrap" style="margin: 20px auto; width: 510px;">
<h1>Daha fazla / Daha az</h1>
<div class="description">
<div class="description-text">
<p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır.</p>
<p>Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir. Lorem Ipsum kullanmanın amacı, sürekli 'buraya metin gelecek, buraya metin gelecek' yazmaya kıyasla daha dengeli bir harf dağılımı sağlayarak okunurluğu artırmasıdır. Şu anda birçok masaüstü yayıncılık paketi ve web sayfa düzenleyicisi, varsayılan mıgır metinler olarak Lorem Ipsum kullanmaktadır. Ayrıca arama motorlarında 'lorem ipsum' anahtar sözcükleri ile arama yapıldığında henüz tasarım aşamasında olan çok sayıda site listelenir. Yıllar içinde, bazen kazara, bazen bilinçli olarak (örneğin mizah katılarak), çeşitli sürümleri geliştirilmiştir.</p>
</div> <!-- description-text -->
<div class="description-fadeout"></div>
<button class="showhide" type="button" onClick="return false;" role="button"><span class="showhide-text">Devamını göster</span></button>
</div> <!-- description -->
</div> <!-- page-wrap -->
</body>
</html>
Ismail Kose 
js dosyaları antmam münkün mü ?