Zaloguj | Zarejestruj | FAQ
Anonymous

Como por um link em um post que mostre o texto oculto?

+ Odpowiedz

Posty: 2 Strona 1 z 1


Como por um link em um post que mostre o texto oculto?

przez lucasrenato » So lip 20, 2013 9:21 pm

HTML - Como por um link em um post que quando clicado mostre o texto da postagem?
Olá, vou explicar melhor: Quero fazer um post assim: por um vídeo e abaixo a descrição do mesmo, porém como a descrição é loooonga demais e a maioria dos meus posts são dessa forma (vídeo com texto em baixo) queria criar um link que tivesse o nome "Descrição", e que ao ser clicado mostrasse o texto que está em baixo (e que foi ocultado para só aparecer ao ser clicado).
Por favor, se alguém de vocês souber explicar eu ficarei muito agradecido e avaliarei bem a resposta ;)
1 hora atrás - 4 dias restante
Avatar użytkownika

lucasrenato

  • Posty: 1
  • Dołączył(a): So lip 20, 2013 9:10 pm

Re: Como por um link em um post que mostre o texto oculto?

przez XainPro » Cz lip 25, 2013 10:51 am

check this

Kod: Zaznacz cały
<HTML>
<HEAD>
   <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
   <TITLE>Dynamically shortened Text with Show More link using jQuery</TITLE>
<STYLE>
body, input{
   font-family: Calibri, Arial;
   margin: 0px;
   padding: 0px;
}
a {
   color: #0254EB
}
a:visited {
   color: #0254EB
}
#header h2 {
   color: white;
   background-color: #00A1E6;
   margin:0px;
   padding: 5px;
}
.comment {
   width: 400px;
   background-color: #f0f0f0;
   margin: 10px;
}
a.morelink {
   text-decoration:none;
   outline: none;
}
.morecontent span {
   display: none;

}
</STYLE>
</HEAD>
<BODY>
<div id="header">
<H2>
   Dynamically shortened Text with Show More link using jQuery
</H2>
</div>
<p>Click here to view the Tutorial: <a href="http://viralpatel.net/blogs/2010/12/dynamically-shortened-text-show-more-link-jquery.html">Shortened Text with Show More link</a></p>

<br/>
<div class="comment more">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   Vestibulum laoreet, nunc eget laoreet sagittis,
   quam ligula sodales orci, congue imperdiet eros tortor ac lectus.
   Duis eget nisl orci. Aliquam mattis purus non mauris
   blandit id luctus felis convallis.
   Integer varius egestas vestibulum.
   Nullam a dolor arcu, ac tempor elit. Donec.
</div>
<div class="comment more">
   Duis nisl nibh, egestas at fermentum at, viverra et purus.
   Maecenas lobortis odio id sapien facilisis elementum.
   Curabitur et magna justo, et gravida augue.
   Sed tristique pellentesque arcu quis tempor.
</div>
<div class="comment more">
   consectetur adipiscing elit. Proin blandit nunc sed sem dictum id feugiat quam blandit.
   Donec nec sem sed arcu interdum commodo ac ac diam. Donec consequat semper rutrum.
   Vestibulum et mauris elit. Vestibulum mauris lacus, ultricies.
</div>

</BODY>
<SCRIPT>
$(document).ready(function() {
   var showChar = 100;
   var ellipsestext = "...";
   var moretext = "more";
   var lesstext = "less";
   $('.more').each(function() {
      var content = $(this).html();

      if(content.length > showChar) {

         var c = content.substr(0, showChar);
         var h = content.substr(showChar-1, content.length - showChar);

         var html = c + '<span class="moreelipses">'+ellipsestext+'</span>&nbsp;<span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">'+moretext+'</a></span>';

         $(this).html(html);
      }

   });

   $(".morelink").click(function(){
      if($(this).hasClass("less")) {
         $(this).removeClass("less");
         $(this).html(moretext);
      } else {
         $(this).addClass("less");
         $(this).html(lesstext);
      }
      $(this).parent().prev().toggle();
      $(this).prev().toggle();
      return false;
   });
});
</SCRIPT>
</HTML>


http://viralpatel.net/blogs/demo/jquery ... d-content/
Avatar użytkownika

XainPro

  • Posty: 3933
  • Dołączył(a): Pt lut 17, 2012 8:10 pm


+ Odpowiedz

Strona 1 z 1