Bymega | Jquery ile daha fazlasını göster ve gizle uygulaması yapmak

Jquery bana göre javascript üzerine geliştirilmiş en büyük nimetlerden biri diyebilirim. Gerek kullanım kolaylığı gerekse evrenselliği ile çoğu webmasterın baş tacıdır. Bu yazımızda sizlere birçok yerde işinize yarayacak bir uygulamadan bahsedeceğim. Bu uygulama ile cümlenin bir yerinden kesip daha fazlası linkini göstereceğiz. Daha fazlası linkine tıklandığı zaman yazının tamamını açıp gizle linkini göstereceğiz. Ardından gizle linkine tıklanması sonucunda yazımızı yine ilk durumuna yani sınırladığımız karaktere getireceğiz. Oldukça kullanışlı bir uygulamayı beraber kodlamaya başlayalım.

İlk olarak uygulamamızın cümleyi kesecek olarak php ve html kısmını yazalım.

<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<title>Bymega.com daha fazlasını göster</title>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
 
<?php
$text = 'Lorem Ipsum pasajlarının birçok çeşitlemesi vardır. Ancak bunların büyük bir çoğunluğu mizah katılarak veya rastgele sözcükler eklenerek değiştirilmişlerdir. Eğer bir Lorem Ipsum pasajı kullanacaksanız, metin aralarına utandırıcı sözcükler gizlenmediğinden emin olmanız gerekir. İnternetteki tüm Lorem Ipsum üreteçleri önceden belirlenmiş metin bloklarını yineler. Bu da, bu üreteci İnternet üzerindeki gerçek Lorem Ipsum üreteci yapar.';
 
// Metni 25 karakter olarak kesiyoruz
$value = mb_substr($text,0,'25','UTF-8');
 
echo '<div id="kisaAciklama">'.$value.'</div>';
echo '<div id="tamamiAciklama" style="display:none;">'.$text.'</div>';
?>
 
<a href="javascript:void(0);" id="devamAciklama">Daha fazla…</a>
<a href="javascript:void(0);" id="gizleAciklama" style="display:none;">Gizle...</a>
 
</body>
</html>

Şimdi daha fazlasına ve gizleye tıkladıktan sonra yapılacak işlemleri gerçekleştirecek olan jquery fonksiyonunu yazalım.

$(document).ready(function () {
 
   $(‘#devamAciklama’).on(‘click’,function(){
      $(‘#tamamiAciklama’).show();
      $(‘#kisaAciklama’).hide();
 
      $(‘#devamAciklama’).hide();
      $(‘#gizleAciklama’).show();
   });
 
   $(‘#gizleAciklama’).on(‘click’,function(){
      $(‘#tamamiAciklama’).hide();
      $(‘#kisaAciklama’).show();
 
      $(‘#devamAciklama’).show();
      $(‘#gizleAciklama’).hide();
 
      $(window.document.body).scrollTop(10);
   });
 
});

Github Gist Linki

DEMO

See the Pen GABEm by Tahsin Gungordu (@bymega) on CodePen.

2 Yorum

maksy says:

2016-05-28T14:42:27+00:00

jquery de Toggle metodu işini görür. bu kadar kod yazmana gerek yok
Yusuf SEZER says:

2017-03-23T13:49:02+00:00

Güzel bir uygulama olmuş teşekkürler.

Yorum yaz