Question posted in 
When clicked on first Read more button it works but Read less does not show up, however even on clicking rest Read more still the first one works.
function myFunction(id) {
alert(id);
var dots = document.getElementById("dots");
var moreText = document.getElementById("more");
if (dots.style.display === "none") {
dots.style.display = "inline";
id.innerHTML = "Read more";
moreText.style.display = "none";
} else {
dots.style.display = "none";
id.innerHTML = "Read less";
moreText.style.display = "inline";
}
}<!-- Services Section -->
<div id="services" class="section page-split">
<div class="section-wrapper block content-1170 center-relative">
<div class="bg-holder float-left">
<img src="images/left_obj_01.png" alt="">
</div>
<div class="section-title-holder float-left" data-background="#a13dd7">
<div class="section-num">
<span class="current-section-num">
01
</span>
<span class="total-section-num">
/ 04
</span>
</div>
<h2 class="entry-title">
Services
</h2>
<p class="page-desc">
Permanence of the stars hundreds of thousands
</p>
</div>
</p>
</div>
<div class="section-content-holder float-right" style="margin-bottom: 30px;">
<div class="content-wrapper">
<div class="one_third animate wait-07s">
<div class="service-item">
<img class="service-icon" src="images/webdesign.png" alt="">
<p class="service-title"><strong>Web Designing Services</strong></p>
<p>
Our Web Design Team consists of Professionals who have been designing websites for decades. With a wealth of experience and knowledge, we aim to provide.our clients with engaging interactive .
<span id="dots">...</span>
<span id="more">
lightning .and speed websites.Our Web Design Services in Portland, USA will surely improve your website ranking as well as traffic.Contact us today for a free consultation.
</span>
</p>
<button onclick="myFunction(this.id);" id="myBtn1" class="btn">Read More</button>
</div>
</div>
</div>
<div class="one_third animate wait-05s">
<div class="service-item">
<img class="service-icon" src="images/webdev.png" alt="">
<p class="service-title"><strong>Web Development Services</strong></p>
<p>
Searching for quality Web Development Services in Portland, USA? If yes, then are experts are here to offer you the best web development services.
<span id="dots">...</span>
<span id="more">
Our team consists of skilled and experienced full stack designers and developers. We have the expertise to provide high-end web solutions. Each and every website developed by us is tailored as per the requirements of your business and also as per the requirements in the market.
</span>
</span>
</p>
<button onclick="myFunction(this.id);" id="myBtn2" class="btn">Read More</button>
</div>
</div>
<div class="one_third last animate wait-04s">
<div class="service-item">
<img class="service-icon" src="images/ecomm.png" alt="">
<p class="service-title"><strong>E-commerce Website Development</strong></p>
<p>
Codevelop has been operating in the digital marketing sector for several years.We have been fortunate enough to have worked with several clients..
<span id="dots">...</span>
<span id="more">
from all around the world who are now successfully commencing business in the Ecommerce world..The primary objective of our company is to meet all your Ecommerce website development requirements so that you can attract more customers and simultaneously maximize your sales in the long run.Codevelop is the best Ecommerce website developer in all of Portland, USA as our company now aims to give you the best possible digital marketing solutions at affordable pricing points.
</span>
</span>
</p>
<button onclick="myFunction(this.id);" id="myBtn3" class="btn">Read More</button>
</div>
</div>
<div class="clear"></div>
<div class="one_third animate wait-07s">
<div class="service-item">
<img class="service-icon" src="images/file.png" alt="">
<p class="service-title"><strong>Graphic Designing</strong></p>
<p>Build a stronger brand with the help of our Graphic Designing Services
<span class="para4" style="display:none;">
With the ever-growing demand in the digital world, the level of competition is also increasing at
a rate of knots. Therefore, companies must rely on impressive graphic designs in order to
attract the attention of the target audience. Avail the services of Codevelop today and build a
competitive advantage in favor of your brand within your target market.
Our team of experts possesses the skills to meet all your requirements. Complete customer
satisfaction is the sole objective of our company and we aim to achieve it at any cost.
</span>
</span>
</p>
<button onclick="myFunction(this.id);" id="myBtn4" class="btn">Read More</button>
</div>
</div>
<div class="one_third animate wait-05s">
<div class="service-item">
<img class="service-icon" src="images/seo.png" alt="">
<p class="service-title"><strong>SEO Services</strong></p>
<p>
Dominate all Search Engine Platforms by joining hands with Codevelop. Search
<span class="para5" style="display:none;">Engine Optimization or SEO is perhaps the most powerful tool that exists in the digital
world today. If SEO strategies are correctly applied,
</span>
</span>
</p>
<button onclick="myFunction(this.id);" id="myBtn5" class="btn">Read More</button>
</div>
</div>
<div class="one_third last animate wait-04s">
<div class="service-item">
<img class="service-icon" src="images/wordpress.png" alt="">
<p class="service-title"><strong>Word Press Services</strong></p>
<p>
Want more stability for your business? Hire the experts at Codevelop. In order to
<span class="para6" style="display:none;">
be relevant in the present market, it is essential that you have a website that is user-friendly, easily accessible, and can be adequately navigated. All these aspects and more can be achieved with the help of our services. Here at Codevelop, we possess a dedicated team of individuals who specialize in various fields of study. This is precisely why we are able to cater to the various digital marketing needs of our customers.
</span>
</span>
</p>
<button onclick="myFunction(this.id);" id="myBtn6" class="btn">Read more</button>
</div>
</div>
</div>
</div>
2
Answers
As your code is incomplete but i think you want to do that
HTML
CSS
JS
Before telling you what is the issue, let me give you some tips that in my opinion will help you with your code:
1. There are extra
HTMLtags:Proper indentation and formatting of the code will help you to avoid mistakes like this one:
2. Avoid using
JavaScriptinHTMLproperties:It will add another layer of complexity and your code will be more error prone, because if you delete a function, you need to remove it from the
HTMLcode and linters will not warn you about this.3. Instead adding
displayproperties withJavaScriptit is better to work with classes and add or remove them:If you don’t need to support Internet Explorer 9, you can use Element.classList property to add or remove a class from the elements. In the final snippet you’ll see an example of its use.
4. Don’t add the same
idto multiple elements:Idsare intended to be unique in your page, if you need to access to multiple elements, use aclassinstead.5. And your main issue is this one:
As
idsshould be unique in the page, document.getElementById will return the first element in theDOMwith thatid. So your function is trying to show and hide only the first elements in the document with theidsdotsandmore.Here you have your code using the previous recommendations: