Daha fazla / Daha az

by ismailkose

HTML

<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 -->

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)...

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');                
            });
        });
    });