CODEWITHSUNDEEP
javascriptphpjqueryhtml
Philippos Slicher
Philippos Slicher

Reputation: 395

HTML - How to make a "Read More" button

On my website, I have my blog and I want each card to have a read more button. I specifically want it to only show x words (NOT characters) when collapsed, and then show the whole text when expanded. I do not want to have a button that takes to another page that has the full content, as I am using my own built CMS which automatically adds posts from a form.

I have tried readmore.js but that doesnt seem to work at all. It does nothing. I have also tried jQuery.dotdotdot, which also seems to not work

This is a very strange thing that I have not been able to figure out. None other SO Q & A's have helped that I have seen.

Upvotes: 3

Views: 74728

Answers (3)

Rahul Chandankeri
Rahul Chandankeri

Reputation: 1

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.loader1 {
position: inherit;
top:inherit;
left: 0;
  right:0;
 text-align: center;
  z-index: 1;
  width: 50px;
  height: 50px;
 margin: auto;
}

.loader1:before {
  content: '';
  display: block;
  padding-top: 200%;
}

.circular1{
  -webkit-animation: rotate 2s linear infinite;
  animation: rotate 2s linear infinite;
  height: 100%;
  -webkit-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin: center center;
  width: 100%;
  position: inherit;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.path1{
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  stroke-linecap: round;
}
 @-webkit-keyframes 
rotate {  100% {
 -webkit-transform: rotate(360deg);
 transform: rotate(360deg);
}
}
 @keyframes 
rotate {  100% {
 -webkit-transform: rotate(360deg);
 transform: rotate(360deg);
}
}
@-webkit-keyframes 
dash {  0% {
 stroke-dasharray: 1, 200;
 stroke-dashoffset: 0;
}
 50% {
 stroke-dasharray: 89, 200;
 stroke-dashoffset: -35;
}
 100% {
 stroke-dasharray: 89, 200;
 stroke-dashoffset: -124;
}
}
@keyframes 
dash {  0% {
 stroke-dasharray: 1, 200;
 stroke-dashoffset: 0;
}
 50% {
 stroke-dasharray: 89, 200;
 stroke-dashoffset: -35;
}
 100% {
 stroke-dasharray: 89, 200;
 stroke-dashoffset: -124;
}
}
@-webkit-keyframes 
color {  100%, 0% {
 stroke: #d62d20;
}
 40% {
 stroke: #0057e7;
}
 66% {
 stroke: #008744;
}
 80%, 90% {
 stroke: #ffa700;
}
}
@keyframes 
color {  100%, 0% {
 stroke: #d62d20;
}
 40% {
 stroke: #0057e7;
}
 66% {
 stroke: #008744;
}
 80%, 90% {
 stroke: #ffa700;
}


.myDiv1 {
  display: none; 

}
  </style> 

  <style>
.loadmorex {
 position: absolute;
left: 0;
  right:0;
  text-align: center;
  z-index: 1;
   margin: auto;
 color: #fff !important;
letter-spacing:04px;
text-decoration: none;
background: #00aeef;
padding: 10px;
width:15%;
border-radius: 5px;
display: inline-block;
border: none;
transition: all 0.4s ease 0s;
}

.loadmorex:hover {
background: #434343;
letter-spacing: 1px;
-webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
-moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
box-shadow: 5px 40px -10px rgba(0,0,0,0.57);
transition: all 0.4s ease 0s;
}
</style>

<!-- loader 2 -->

</head>
<!-- By Suntrident.com-->

 <h2>Hello We Have Loaded Part 1</h2>
<p> A paragraph is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose. Wikipedia</p><p><b>Note:</b>This Lines are Used for demonstration</p> <h2>Hello We Have Loaded Part 1</h2>
<p> A paragraph is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose. Wikipedia</p><p><b>Note:</b>This Lines are Used for demonstration</p> 


<!--For Loading Part 1-->
<div id="loader1" class="loader1" style="display:none;" > 
<svg class="circular1" viewBox="25 25 50 50">
    <circle class="path1" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
   </svg><strong>Loading..</strong></div>
<div style="display:none;" id="myDiv1" class="animate-bottom">

  <h2>Hello We Have Loaded Part 1</h2>
<p> A paragraph is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose. Wikipedia</p><p><b>Note:</b>This Lines are Used for demonstration</p><h2>Hello We Have Loaded Part 1</h2>
<p> A paragraph is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose. Wikipedia</p><p><b>Note:</b>This Lines are Used for demonstration</p>
</div>
 <button class="loadmorex" id="hideme" onclick="myFunction()" type="button">Load more</button>

<!--TIP : CHECK ALL ID NAME MATCH-->
<!-- By Suntrident.com-->

<br><br><br><br><br><br>


<script>
var myVar;

function myFunction() {
 // on button click below line displays loader :
 document.getElementById("loader1").style.display = "block";
 
 // on button click below line hides button:
        document.getElementById("hideme").style.display = "none";
        
// set on-timeout display content in below line:
  myVar = setTimeout(showPage, 2000);
}

function showPage() {
  document.getElementById("loader1").style.display = "none";
    document.getElementById("myDiv1").style.display = "block";
      
}
</script>
<!-- By Suntrident.com-->

</body>
</html>

Upvotes: 0

Jassy Ume
Jassy Ume

Reputation: 1

function myFunction() {
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("myBtn");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more";
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Read less";
    moreText.style.display = "inline";
  }
}
 
 
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>

<button onclick="myFunction()" id="myBtn">Read more</button>

Upvotes: 0

user10028511
user10028511

Reputation: 

<p><a onclick="javascript:ShowHide('HiddenDiv')">read more</a></p>
<div class="mid" id="HiddenDiv" style="display: none;"><font face="Arial" size="+2" 

color="#306Eff" align="right">put the rest of the text here
</div>
<script type="text/javascript">// <![CDATA[
function ShowHide(divId)
{
if(document.getElementById(divId).style.display == 'none')
{
document.getElementById(divId).style.display='block';
}
else
{
document.getElementById(divId).style.display = 'none';
}
}
// ]]></script>

Upvotes: 3

Related Questions