CODEWITHSUNDEEP
jqueryhtmlcssbuttonexpand
Mister Babu
Mister Babu

Reputation: 109

I am trying to do a Read More button, but I just started using javascript/jquery

I want to do a Read More button, which will expand the page and the text will appear with a nice animation. I tried doing a jquery code but I realised that it was not going to work and I deleted it. The Read More button will appear if the text is bigger than 200 characters. I only have something basic like this.

Javascript code:

$("#clickme").click(function() {
 $("#hidden").show();
});

Upvotes: 0

Views: 140

Answers (6)

user9961607
user9961607

Reputation: 37

<!DOCTYPE html>
<html>

<head>
  <style>
    a {
      color: #0254EB
    }

    a:visited {
      color: #0254EB
    }

    a.morelink {
      text-decoration: none;
      outline: none;
    }

    .morecontent span {
      display: none;
    }

    .comment {
      width: 400px;
      background-color: #f0f0f0;
      margin: 10px;
    }
  </style>
</head>

<body>
  <div class="comment more">
    <a href="http://eqlits.com">When a text is too long to fit, We can cut it short and add a "Read More" OR "Link" button.
       Clicking on this button will show the Next Page.</a>
    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">
      <a href="http://eqlits.com">When a text is too long to fit, We can cut it short and add a "Read More" OR "Link" button.
        Clicking on this button will show the Next Page.</a>
    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">
      <a href="http://eqlits.com">When a text is too long to fit, We can cut it short and add a "Read More" OR "Link" button.
        Clicking on this button will show the Next Page.</a>
    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>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script>
    'use strict';
    function truncate(str, maxlength) {
      return (str.length > maxlength) ?
        str.slice(0, maxlength - 1) + `<input type='button' id='more' class="btnmore" value='Link'/>   ` : str;
    }

    let data = document.getElementsByClassName("more");
    for (let i = 0; i < data.length; i++) {
      let str = data[i].innerHTML;

      document.getElementsByClassName("more")[i].innerHTML = truncate(str, 300);
      document.getElementsByClassName("btnmore")[i].addEventListener("click", function () {
        document.getElementsByClassName("more")[i].innerHTML = str;
      })
    }




  </script>
</body>

</html>

Upvotes: 0

Debakant Mohanty
Debakant Mohanty

Reputation: 825

So basically you need to write a logic like: 1: Check the string length if you are using PHP then a login could be something like the below:

 <?php $str = "I am in love with PHP";
if(strlen($str) > 10)
{
  $showten = substr($str, 0, 10);
echo $showten . "<a href="#" class='readmore'>Readmore</a>";
}
 ?>



<div class="all-content"><?php echo $str; ?></div>

Now comes the Jquery into action:

<script>
$(document).ready(function()
{
$('.readmore').click(function()
{
    $(this).closest("div").find(".all-content").toggle();
});
});
</script>

This is a sample code, you need to make minor modifcations as per your requirement!!

Upvotes: 0

Jasim
Jasim

Reputation: 60

Please try this:

$("#clickme").click(function() {
    $("#hidden").fadeIn("slow");
});

Upvotes: 0

abhishek gohar
abhishek gohar

Reputation: 21

You can find different jquery animation here.

http://api.jquery.com/animate/

Upvotes: 1

vipin sharma
vipin sharma

Reputation: 156

Try to use this :

$("#clickme").click(function() {
    $("#hidden").fadeIn("slow");
});

Upvotes: 2

madalinivascu
madalinivascu

Reputation: 32364

You can use many jquery functions like show(),fadeIn(),slideDown(),animate() you can even use css transitions

Upvotes: 1

Related Questions