Adding a read more or less button

louis5 · July 26, 2024, 4:03am

i have a page with a lot of text. i want to add a read more or less button after first paragraph, but i don’t know how. i tried using W3School. but it did not work. Any help would be apreciated.

http://www.charismacommunications.ca/blog.html

<!DOCTYPE html>
<!-- Website template by freewebsitetemplates.com -->
<html>
<head>
	<meta charset="UTF-8">
	<title>Blog - Charisma Communications</title>
	<link rel="stylesheet" href="css/style.css" type="text/css">
	<!--[if IE]>
		<link rel="stylesheet" href="css/ie.css" type="text/css" charset="utf-8">
	<![endif]-->
	
</head>
<body>
	<div id="page">
		<div id="header">
			<a href="index.html" id="logo"><img src="images/logo.png" alt="LOGO"></a>
			<ul id="navigation">
				<li class="selected">
					<a href="index.html" title="Home"></a>
				</li>
				<li>
					<a href="thalidomide.html">Thalidomide</a>
				</li>
				<li>
					<a href="about.html">About</a>
				</li>
				<li>
					<a href="speaker.html">Speaker</a>
				</li>
				<li>
					<a href="blog.html">blog</a>
				</li>
				
				<li>
					<a href="gallery.html">Gallery</a>
				</li>
				<!---
				<li>
					<a href="news.html">News</a>
				</li>
				<li>
					<a href="blog.html">Blog</a>
				</li>
                 --->


				<li class="last-child">
					<a href="contact.html">Contact us</a>
				</li>
			</ul>
		</div>
		<div id="contents">
			<div class="background">
			  <div id="news">
					<h2>Why a Blog</h2>
					<br>
							
					<p>Starting a blog has been one of the most rewarding decisions I’ve made. It’s a platform where I can share my thoughts, ideas, and experiences with a wider audience. Here are some reasons why I decided to create this blog:</p>
				
 
                  <p><strong><u>1. Passion for Writing</u></strong></p>
 				 <p>I wanted to improve my writing. It’s a way for me to express my thoughts and creativity. Through this blog, I can refine my writing skills, explore different styles, and share my passion with others.</p>
					
				      <p><strong><u>2. Share my Knowledge</u></strong></p>	
					
					<p>I believe that knowledge is most valuable when shared. Whether it’s insights from lessons learned from personal experiences, or interesting facts about my hobbies, I love the idea of helping others by sharing what I know.</p>
					
					    <p><strong><u>3. Connecting with Like-minded Individuals</u></strong></p>
					
					<p>A blog is a great way to connect with people who share similar interests. It allows me to engage in meaningful conversations, exchange ideas, and build a community of like-minded individuals.</p>
					
					<p><strong><u>4. Documenting My Journey</u></strong></p>
					<p>Life is a journey filled with memorable moments and valuable lessons. This blog serves as a digital diary where I can document my experiences, reflect on my growth, and look back at how far I’ve come.</p>
					
					<p><strong><u>5. Inspiring and Motivating Others</u></strong></p>
					<p>I hope that by sharing my stories and insights, I can inspire and motivate others. Whether it’s overcoming challenges, pursuing dreams, or simply finding joy in everyday moments, I aim to provide content that resonates with and uplifts my readers.</p>
					
					<hr color="#f0e99a">
					<br><br>
					     
					     
		        <h2>First blog entry coming soon</h2>
              </div>
			</div>
		</div>
		<div id="footer">
			<div class="connect">
				<!---<a href="http://freewebsitetemplates.com/go/facebook/" target="_blank" class="facebook"></a> <a href="http://freewebsitetemplates.com/go/twitter/" target="_blank" class="twitter"></a> <a href="http://freewebsitetemplates.com/go/googleplus/" target="_blank" class="googleplus"></a>
--->
			</div>
			<p>
				Copyright &copy; 2024. Charisma Communications All Rights Reserved.
			</p>
		</div>
	</div>
</body>
</html>

hbar1st · July 26, 2024, 4:16am

This is something that can be easily done in JavaScript. Have you considered using it?

louis5 · July 26, 2024, 4:19am

in W3school the sample they it had javascript. didn’t work.

hbar1st · July 26, 2024, 4:26am

Okay, how can we help you?

louis5 · July 26, 2024, 6:56pm

This is what I have now and still doesn’t work.

http://www.charismacommunications.ca/blog.html

<!DOCTYPE html>
<!-- Website template by freewebsitetemplates.com -->
<html>
<head>
	<meta charset="UTF-8">
	<title>Blog - Charisma Communications</title>
	<link rel="stylesheet" href="css/style.css" type="text/css">
	<!--[if IE]>
		<link rel="stylesheet" href="css/ie.css" type="text/css" charset="utf-8">
	<![endif]-->
	<script>
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";
  }
}
</script>

</head>
<body>
	<div id="page">
		<div id="header">
			<a href="index.html" id="logo"><img src="images/logo.png" alt="LOGO"></a>
			<ul id="navigation">
				<li class="selected">
					<a href="index.html" title="Home"></a>
				</li>
				<li>
					<a href="thalidomide.html">Thalidomide</a>
				</li>
				<li>
					<a href="about.html">About</a>
				</li>
				<li>
					<a href="speaker.html">Speaker</a>
				</li>
				<li>
					<a href="blog.html">blog</a>
				</li>
				
				<li>
					<a href="gallery.html">Gallery</a>
				</li>
				<!---
				<li>
					<a href="news.html">News</a>
				</li>
				<li>
					<a href="blog.html">Blog</a>
				</li>
                 --->


				<li class="last-child">
					<a href="contact.html">Contact us</a>
				</li>
			</ul>
		</div>
		<div id="contents">
			<div class="background">
			  <div id="news">
					<h2>Why a Blog</h2>
					<br>
							
					<p>Starting a blog has been one of the most rewarding decisions I’ve made. It’s a platform where I can share my thoughts, ideas, and experiences with a wider audience. Here are some reasons why I decided to create this blog:</p>
				
				  <span id="dots">Read more...</span><span id="more">
 
                  <p><strong><u>1. Passion for Writing</u></strong></p>
 				 <p>I wanted to improve my writing. It’s a way for me to express my thoughts and creativity. Through this blog, I can refine my writing skills, explore different styles, and share my passion with others.</p>
					
				      <p><strong><u>2. Share my Knowledge</u></strong></p>	
					
					<p>I believe that knowledge is most valuable when shared. Whether it’s insights from lessons learned from personal experiences, or interesting facts about my hobbies, I love the idea of helping others by sharing what I know.</p>
					
					    <p><strong><u>3. Connecting with Like-minded Individuals</u></strong></p>
					
					<p>A blog is a great way to connect with people who share similar interests. It allows me to engage in meaningful conversations, exchange ideas, and build a community of like-minded individuals.</p>
					
					<p><strong><u>4. Documenting My Journey</u></strong></p>
					<p>Life is a journey filled with memorable moments and valuable lessons. This blog serves as a digital diary where I can document my experiences, reflect on my growth, and look back at how far I’ve come.</p>
					
					<p><strong><u>5. Inspiring and Motivating Others</u></strong></p>
					<p>I hope that by sharing my stories and insights, I can inspire and motivate others. Whether it’s overcoming challenges, pursuing dreams, or simply finding joy in everyday moments, I aim to provide content that resonates with and uplifts my readers.</span></p>
					
				<button onclick="myFunction()" id="myBtn">Read more</button>

				
					<hr color="#f0e99a">
					<br><br>
					     
					     
		        <h2>First blog entry coming soon</h2>
              </div>
			</div>
		</div>
		<div id="footer">
			<div class="connect">
				<!---<a href="http://freewebsitetemplates.com/go/facebook/" target="_blank" class="facebook"></a> <a href="http://freewebsitetemplates.com/go/twitter/" target="_blank" class="twitter"></a> <a href="http://freewebsitetemplates.com/go/googleplus/" target="_blank" class="googleplus"></a>
--->
			</div>
			<p>
				Copyright &copy; 2024. Charisma Communications All Rights Reserved.
			</p>
		</div>
	</div>
</body>
</html>

hbar1st · July 26, 2024, 7:04pm

can you describe what it is that is not working?

louis5 · July 26, 2024, 7:08pm

the read more button and read less button. theres a link in my post you can try.

hbar1st · July 26, 2024, 7:21pm

I’m not sure what is not working though? Can you describe more?
To me everything looks okay.

louis5 · July 26, 2024, 8:57pm

when i click on read more. nothing happens.

hbar1st · July 26, 2024, 9:09pm

When I load your page up locally, there’s a button at the bottom of the page.
It says Read More on it.
I click it once, and it changes to Read Less.
Then I click Read Less button and it hides all the text above it.
The button is also hidden.

Isn’t that what you wanted?

louis5 · July 27, 2024, 3:14am

no not at all. it should show some text. theclick and show more.

hbar1st · July 27, 2024, 3:20am

Try to break up the problem into parts. You probably already know how to fix it but you haven’t done so in an organized way yet.

First issue:
Move the script code to the last line of your body tag. I forgot to tell you that I did that before testing your code.

Second issue:
Should the page initially have a Read More button nested inside the #dots element?
When you hide this element, the button will also be hidden if that is where you decide to keep it based on your current code right?

Try to solve one problem at a time. You don’t really need my help as you already have code that does one thing. You just need to align the code to the behaviour you want from it.

louis5 · July 27, 2024, 4:08am

i’ll try again tommorow . not making sense right now.

louis5 · July 27, 2024, 6:39pm

i found some different code to do what i want .but the buttons seem backwards.

http://www.charismacommunications.ca/blog.html

<!DOCTYPE html>
<!-- Website template by freewebsitetemplates.com -->
<html>
<head>
	<meta charset="UTF-8">
	<title>Blog - Charisma Communications</title>
	<link rel="stylesheet" href="css/style.css" type="text/css">
	<!--[if IE]>
		<link rel="stylesheet" href="css/ie.css" type="text/css" charset="utf-8">
	<![endif]-->
	

</head>
<body>
	<div id="page">
		<div id="header">
			<a href="index.html" id="logo"><img src="images/logo.png" alt="LOGO"></a>
			<ul id="navigation">
				<li class="selected">
					<a href="index.html" title="Home"></a>
				</li>
				<li>
					<a href="thalidomide.html">Thalidomide</a>
				</li>
				<li>
					<a href="about.html">About</a>
				</li>
				<li>
					<a href="speaker.html">Speaker</a>
				</li>
				<li>
					<a href="blog.html">blog</a>
				</li>
				
				<li>
					<a href="gallery.html">Gallery</a>
				</li>
				<!---
				<li>
					<a href="news.html">News</a>
				</li>
				<li>
					<a href="blog.html">Blog</a>
				</li>
                 --->


				<li class="last-child">
					<a href="contact.html">Contact us</a>
				</li>
			</ul>
		</div>
		<div id="contents">
			<div class="background">
			  <div id="news">
					<h2>Why a Blog</h2>
					<br>
							
					
				
		<span id="moreContent" class="more-content"><p>Starting a blog has been one of the most rewarding decisions I’ve made. It’s a platform where I can share my thoughts, ideas, and experiences with a wider audience. Here are some reasons why I decided to create this blog:</p></span></p>
<span id="readMoreBtn" class="read-more-btn" onclick="toggleReadMore()">Read More</span>
 
                  <p><strong><u>1. Passion for Writing</u></strong></p>
 				 <p>I wanted to improve my writing. It’s a way for me to express my thoughts and creativity. Through this blog, I can refine my writing skills, explore different styles, and share my passion with others.</p>
					
				      <p><strong><u>2. Share my Knowledge</u></strong></p>	
					
					<p>I believe that knowledge is most valuable when shared. Whether it’s insights from lessons learned from personal experiences, or interesting facts about my hobbies, I love the idea of helping others by sharing what I know.</p>
					
					    <p><strong><u>3. Connecting with Like-minded Individuals</u></strong></p>
					
					<p>A blog is a great way to connect with people who share similar interests. It allows me to engage in meaningful conversations, exchange ideas, and build a community of like-minded individuals.</p>
					
					<p><strong><u>4. Documenting My Journey</u></strong></p>
					<p>Life is a journey filled with memorable moments and valuable lessons. This blog serves as a digital diary where I can document my experiences, reflect on my growth, and look back at how far I’ve come.</p>
					
					<p><strong><u>5. Inspiring and Motivating Others</u></strong></p>
					<p>I hope that by sharing my stories and insights, I can inspire and motivate others. Whether it’s overcoming challenges, pursuing dreams, or simply finding joy in everyday moments, I aim to provide content that resonates with and uplifts my readers.</p></span>
					
				

				
					<hr color="#f0e99a">
					<br><br>
					     
					     
		        <h2>First blog entry coming soon</h2>
              </div>
			</div>
		</div>
		<div id="footer">
			<div class="connect">
				<!---<a href="http://freewebsitetemplates.com/go/facebook/" target="_blank" class="facebook"></a> <a href="http://freewebsitetemplates.com/go/twitter/" target="_blank" class="twitter"></a> <a href="http://freewebsitetemplates.com/go/googleplus/" target="_blank" class="googleplus"></a>
--->
			</div>
			<p>
				Copyright &copy; 2024. Charisma Communications All Rights Reserved.
			</p>
		</div>
	</div>
	<script>
        function toggleReadMore() {
            var moreContent = document.getElementById("moreContent");
            var btn = document.getElementById("readMoreBtn");

            if (moreContent.style.display === "none") {
                moreContent.style.display = "block";
                btn.innerHTML = "Read Less";
            } else {
                moreContent.style.display = "none";
                btn.innerHTML = "Read More";
            }
        }
    </script>
	
</body>
</html>

JeremyLT · July 27, 2024, 6:41pm

Trying to glue together snippits you copy from online is risky. That’s how you get spaghetti code that doesn’t work together

louis5 · July 27, 2024, 7:06pm

I understand what your saying. i just don’t know how to add a read more or less button.

hbar1st · July 27, 2024, 7:11pm

can I ask you if you would like to learn how?
Or you just want to get this to work?

louis5 · July 27, 2024, 7:13pm

i’ve done some reading on it and it seems straight forward. but for me it doesn’t work. love to get it to work.

hbar1st · July 27, 2024, 7:21pm

right now, the Read more and Read less are toggling a single paragraph on and off.
Can you identify why that is not what you want?
what should happen instead (in terms of: which paragraphs need to shift off/on if not the one currently doing that)

louis5 · July 27, 2024, 7:24pm

when people lad on this page. i want them to see the first paragraph. the click more to see the rest.

Topic		Replies	Views
Learn HTML by Building a Cat Photo App - Step 12 HTML-CSS	2	32	February 18, 2025
Add a Submit Button to a Form😭 HTML-CSS	3	719	January 17, 2021
Beginner on step 12 HTML-CSS	13	89	January 22, 2025
Learn HTML by Building a Cat Photo App - Step 12 HTML-CSS	1	20	January 25, 2025
Another Beginner's Question HTML-CSS	9	1442	March 9, 2021

Adding a read more or less button

Related topics