I want to be able to collapse each "read-more" for its own section. The code is borrowed from w3schools and trying to modify by adding a second section. But the second button expands s the first text. I understand (from reading on other sections) I will have to modify the id for elements so that each section is self-contained. What do I need to modify this behavior? This is a new area for me, be gentle ...
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#more {display: none;}
</style>
</head>
<body>
<h2>One</h2>
<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>
<h2>Two</h2>
<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>
<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>
</body>
</html>
You have to change all your IDs with classes, for example, 'cause IDs must be unique in a page.
After that, a solution could be to insert the 2 texts in 2 divs, passing this element to the myFunction to select the right parent box to work on.
function myFunction(elmnt) {
var myID = elmnt.parentNode;
var dots = myID.getElementsByClassName("dots")[0];
var moreText = myID.getElementsByClassName("more")[0];
var btnText = myID.getElementsByClassName("myBtn")[0];
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";
}
}
.more {display: none;}
<div>
<h2>One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="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(this)" class="myBtn">Read more</button>
</div>
<div>
<h2>Two</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="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(this)" class="myBtn">Read more</button>
</div>
EDIT 1
You have to change all IDs 'cause they must be unique in a page. You can't use them for another textbox. So if you want to use 2,3,4... several textboxes, you have to transform all IDs in classes.
In my example, I changed a little the script to manage those classes, not IDs. Copy and paste my code in w3school snippet, click "Run" and you'll see it work. I changed the name of variable myID in parentElement so maybe it is more clear to you.
The script var dots = parentElement.getElementsByClassName("dots")[0]; means find first element that has a class named "dots" in my parentElement (i.e. the external div that I added)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.more {display: none;}
</style>
</head>
<body>
<div>
<h2>One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="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(this)" class="myBtn">Read more</button>
</div>
<div>
<h2>Two</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="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(this)" class="myBtn">Read more</button>
</div>
<script>
function myFunction(elmnt) {
var parentElement = elmnt.parentNode;
var dots = parentElement.getElementsByClassName("dots")[0];
var moreText = parentElement.getElementsByClassName("more")[0];
var btnText = parentElement.getElementsByClassName("myBtn")[0];
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>
</body>
</html>
Related
I have this simple read more JS function. I want to reuse it, what's the best practice for this? For example, below, I have two read more buttons but I have to copy paste the function and some number to it to use it. Not the cleanest way, what's a better way around this?
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";
}
}
function myFunction2() {
var dots = document.getElementById("dots2");
var moreText = document.getElementById("more2");
var btnText = document.getElementById("myBtn2");
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";
}
}
#more {display: none;}
#more2 {display: none;}
<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>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, naliquet. 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 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 isi lorem egestas vitae scel<span id="dots2">...</span><span id="more2">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="myFunction2()" id="myBtn2">Read more</button>
First, when repeating behavior you should refrain from attempting to use id attributes since (as you know) they must be unique. Additionally, it leads to naming things without much meaning (thing1, thing2 etc).
One technique is to use the class attribute.
Each event allows access to the target of the event. We can find the paragraph to effect using the previousElementSibling to find the <p>.
From there, we can use that node to query for the .dots and .more classes and change them as needed.
Since the button is the target of the event, we just change the button text directly.
EDIT: Thanks #Carston for the previousElementSibling hint.
function myFunction(e) {
const paragraph = e.target.previousElementSibling;
var dots = paragraph.querySelector('.dots');
var moreText = paragraph.querySelector(".more");
if (dots.style.display === "none") {
dots.style.display = "inline";
e.target.innerHTML = "Read more";
moreText.style.display = "none";
} else {
dots.style.display = "none";
e.target.innerHTML = "Read less";
moreText.style.display = "inline";
}
}
.more {display: none;}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="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(event)">Read more</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, naliquet. 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 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 isi lorem egestas vitae scel<span class="dots">...</span><span class="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(event)">Read more</button>
You could use a function parameter to dynamically add a suffix to your ids :
function myFunction(suffix) {
var dots = document.getElementById("dots" + suffix);
var moreText = document.getElementById("more" + suffix);
var btnText = document.getElementById("myBtn" + suffix);
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";
}
}
#more {display: none;}
#more2 {display: none;}
<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>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, naliquet. 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 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 isi lorem egestas vitae scel<span id="dots2">...</span><span id="more2">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('2')" id="myBtn2">Read more</button>
Or 3 parameters corresponding to the ids :
function myFunction(dotsId, moreTextId, btnTextId) {
var dots = document.getElementById(dotsId);
var moreText = document.getElementById(moreTextId);
var btnText = document.getElementById(btnTextId);
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";
}
}
#more {display: none;}
#more2 {display: none;}
<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('dots','more','myBtn')" id="myBtn">Read more</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, naliquet. 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 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 isi lorem egestas vitae scel<span id="dots2">...</span><span id="more2">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('dots2','more2','myBtn2')" id="myBtn2">Read more</button>
use template literals like this:
function myFunction(number) {
var dots = document.getElementById(`dots${number}`);
var moreText = document.getElementById(`more${number}`);
var btnText = document.getElementById(`myBtn${number}`);
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";
}
}
<button onclick="myFunction('')" id="myBtn">Read more</button>
<button onclick="myFunction2('2')" id="myBtn2">Read more</button>
I guess this answer was not really called for. In my opinion #RandyCasburn already nailed it. However, here is another version that works with even less html to put in place to create unfoldable sections.
By placing a <span class="more"></span> within a paragraph this section is marked to be "unfoldable". The first part of my script adds the three dots and a "Read more" button and makes the span's original content invisible.
The delegated click event handler then does all the work:
// prepare document once (put "..." and buttons in place):
document.querySelectorAll(".more").forEach(el=>{
el.dataset.html=el.innerHTML;
el.textContent="...";
const btn=document.createElement("button");
btn.className="morebtn";
btn.textContent="Read more";
el.closest("p").after(btn);
})
// delegated event attachment:
document.body.onclick=e=>{
if (e.target.className==="morebtn"){
const mor = e.target.previousElementSibling.querySelector(".more");
[mor.innerHTML,mor.dataset.html]=[mor.dataset.html,mor.innerHTML];
e.target.innerHTML = mor.textContent==="..."?"Read more":"Read less";
}
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="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>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, naliquet. 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 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 isi lorem egestas vitae scel<span class="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>
<p>And another paragraph with more nonsensical text that will only <span class="more">be shown completely, once the "Read more" button was hit.</span></div>
I have provided the javascript code that I have used to apply to hide and appear the read more text on clicking the button and it is working very fine but now the client wants that the text should appear and hide with any animation. I don't know what should I apply fade or slide or something else to show it to the client. I don't know how to do that.
function ReadmoreFunction() {
var dots = document.getElementById("dots");
var moreText = document.getElementById("more-text");
var btnText = document.getElementById("readMoreBtn");
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";
}
}
#more-text{
display: none;
transition: 2s;
}
#readMoreBtn{
background: #ff963b;
color: #fff;
border:1px solid #ff963b;
border-radius: 5px;
padding: 7px 5px;
}
<div class="category-description std">
<h2 style="text-align:=justify;"><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</strong></h2>
<p style="text-align:=justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur efficitur sodales erat luctus blandit. Vestibulum rutrum tellus fermentum massa pharetra maximus. Morbi sit amet metus vel massa tempus iaculis. Ut sit amet ligula dolor. Nam a sem at est sagittis volutpat. Vestibulum dapibus et orci eu placerat. Suspendisse placerat quis elit sed fringilla. Praesent finibus vestibulum augue in auctor. Etiam interdum dolor mi, ut facilisis magna malesuada ut. Fusce sed eros nibh.</p><span id="dots"></span>
<span id="more-text">
<h2 style="text-align:=justify;"><strong>**Get best quality art and craft supplies within your budget**</strong></h2>
<p style="text-align:=justify;">Integer hendrerit suscipit quam ultrices tristique. Integer vel tortor vel risus ultrices tempus tempor a mauris. Etiam venenatis, elit non aliquam sollicitudin, diam tellus dictum lacus, ac scelerisque metus purus nec quam. Donec elementum vitae erat sed condimentum. Aliquam at lorem mollis, porttitor dui at, finibus magna. Aliquam id efficitur lectus, eu ultricies nibh. Nam et posuere mauris, eget hendrerit nisi. Curabitur non tortor enim.</p>
<h2 style="text-align:=justify;"><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </strong></h2>
<p style="text-align:=justify;">Integer hendrerit suscipit quam ultrices tristique. Integer vel tortor vel risus ultrices tempus tempor a mauris. Etiam venenatis, elit non aliquam sollicitudin, diam tellus dictum lacus, ac scelerisque metus purus nec quam. Donec elementum vitae erat sed condimentum. Aliquam at lorem mollis, porttitor dui at, finibus magna. Aliquam id efficitur lectus, eu ultricies nibh. Nam et posuere mauris, eget hendrerit nisi. Curabitur non tortor enim.</p></span>
</div>
<center><button onclick="ReadmoreFunction()" id="readMoreBtn">Read more</button></center>
Ok here I made some changes to your code to use font-size instead of display, to apply transition effect
function ReadmoreFunction() {
var dots = document.getElementById("dots");
var moreText = document.getElementById("more-text");
var btnText = document.getElementById("readMoreBtn");
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.fontSize = "0";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less";
moreText.style.fontSize = "initial";
}
}
#more-text{
font-size: 0;
transition: 1s font-size;
}
#readMoreBtn {
background: #ff963b;
color: #fff;
border:1px solid #ff963b;
border-radius: 5px;
padding: 7px 5px;
}
<div class="category-description std">
<h2 style="text-align:=justify;"><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</strong></h2>
<p style="text-align:=justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur efficitur sodales erat luctus blandit. Vestibulum rutrum tellus fermentum massa pharetra maximus. Morbi sit amet metus vel massa tempus iaculis. Ut sit amet ligula dolor. Nam a sem at est sagittis volutpat. Vestibulum dapibus et orci eu placerat. Suspendisse placerat quis elit sed fringilla. Praesent finibus vestibulum augue in auctor. Etiam interdum dolor mi, ut facilisis magna malesuada ut. Fusce sed eros nibh.</p><span id="dots"></span>
<span id="more-text">
<h2 style="text-align:=justify;"><strong>**Get best quality art and craft supplies within your budget**</strong></h2>
<p style="text-align:=justify;">Integer hendrerit suscipit quam ultrices tristique. Integer vel tortor vel risus ultrices tempus tempor a mauris. Etiam venenatis, elit non aliquam sollicitudin, diam tellus dictum lacus, ac scelerisque metus purus nec quam. Donec elementum vitae erat sed condimentum. Aliquam at lorem mollis, porttitor dui at, finibus magna. Aliquam id efficitur lectus, eu ultricies nibh. Nam et posuere mauris, eget hendrerit nisi. Curabitur non tortor enim.</p>
<h2 style="text-align:=justify;"><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </strong></h2>
<p style="text-align:=justify;">Integer hendrerit suscipit quam ultrices tristique. Integer vel tortor vel risus ultrices tempus tempor a mauris. Etiam venenatis, elit non aliquam sollicitudin, diam tellus dictum lacus, ac scelerisque metus purus nec quam. Donec elementum vitae erat sed condimentum. Aliquam at lorem mollis, porttitor dui at, finibus magna. Aliquam id efficitur lectus, eu ultricies nibh. Nam et posuere mauris, eget hendrerit nisi. Curabitur non tortor enim.</p>
</span>
<center><button onclick="ReadmoreFunction()" id="readMoreBtn">Read more</button></center>
</div>
I just can't seem to figure out how to make this work. I have tried to look and try several solutions from threads of other people but they just have a totally different code. I tried changing the id's into classes and I tried adding numbers like for example "dots2" - > "dots3" but that wouldn't work either.
As you can see, all the buttons link to the first button when I press 'Read more' or 'Read less'. Only the first text opens.
I know the basics of HTML and CSS but I'm not good with JSS at all so it doesn't make sense right now. Help is very much appreciated.
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";
}
}
#more {display: none;}
<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>
<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>
<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>
<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>
<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>
Following should work fine with multiple buttons.
<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="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 class="buttonTxt">Read more</button>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="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 class="buttonTxt">Read more</button>
</div>
<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="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 class="buttonTxt">Read more</button>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="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 class="buttonTxt">Read more</button>
</div>
<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="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 class="buttonTxt">Read more</button>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="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 class="buttonTxt">Read more</button>
</div>
<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="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 class="buttonTxt">Read more</button>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="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 class="buttonTxt">Read more</button>
</div>
<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="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 class="buttonTxt">Read more</button>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="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 class="buttonTxt">Read more</button>
</div>
var buttons = document.getElementsByClassName("buttonTxt");
for(var i= 0; i< buttons.length; i++) {
buttons[i].addEventListener("click", myFunction)
}
function myFunction(evt) {
var btnText = evt.target;
var dots = btnText.parentNode.getElementsByClassName("dots")[0];
var moreText = btnText.parentNode.getElementsByClassName("more")[0];
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";
}
}
The attribute id must be unique in a document, use class instead.
Please notice the changes in the function to match the right element with the index of the currently clicked button.
Try the following way:
var allButtons = document.querySelectorAll('.myBtn');
allButtons.forEach(function(btn){
btn.addEventListener('click', myFunction);
});
function myFunction() {
var allBtns = document.querySelectorAll(".myBtn");
var allDots = document.querySelectorAll(".dots");
var allMore = document.querySelectorAll(".more");
var btnText = allBtns[[...allBtns].indexOf(this)];
var dots = allDots[[...allBtns].indexOf(this)];
var moreText = allMore[[...allBtns].indexOf(this)];
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";
}
}
.more {display: none;}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="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 class="myBtn">Read more</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="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 class="myBtn">Read more</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="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 class="myBtn">Read more</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="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 class="myBtn">Read more</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="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 class="myBtn">Read more</button>
You have to use just 1 id per tag and also the #dots display like block.
So this solution works. You have to work on ids when click. Use maybe the function in script tags in your html. Or import it correctly
function myFunction() {
var dots = document.getElementById("dots");
var moreText = document.getElementById("more");
var btnText = document.getElementById("myBtn");
if (dots.style.display === "none") {
console.log('ok');
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";
}
}
#more {display: none;}
#dots{display:block;}
<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>
<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="myBtn1">Read more</button>
<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="myBtn2">Read more</button>
<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="myBtn3">Read more</button>
<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="myBtn4">Read more</button>
<script>
</script>
Create a JavaScript class "ModifyParagraph", here constructor accepts paragraph element. inside the constructor, create 4 buttons (which change the paragraph, Bold, color, size, position) using document.createElement and add click event handler on each. Click handler on bold button will turn on/off the boldness.
My code:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Question-2</title>
<meta charset="UTF-8">
<script src="q2.js"></script>
<link rel="stylesheet" href="q2.css" />
</head>
<body>
<div id="myDIV" style="width:500px; ">Lorem ipsum dolor sit amet, porttitor ut donec ut egestas, purus urna consectetuer, arcu et vitae elementum nulla etiam in, sit leo lacus. Ligula cras tortor dignissim laoreet ut, nonummy hendrerit mauris, vitae augue congue congue, vel et augue, eros at. Fringilla id donec libero mauris eleifend. Nulla nunc sit. Consequat sodales placerat faucibus mauris, urna lectus vitae, sit nisl laoreet libero at suscipit ut, neque laoreet dapibus sapien. Sodales sit ut metus commodo tellus, ultricies cursus, et faucibus vitae quam, sit ultrices rhoncus. Massa duis mauris arcu vulputate, iste orci porttitor a ac, quisque venenatis pellentesque in in velit sed, repellat lorem consectetur vero, urna tellus donec. Suscipit in, donec beatae, lectus bibendum morbi justo consectetuer ac, facilisis metus vel non sapien vel. Magna congue vitae quia nulla nulla, lorem enim urna augue et et, sem morbi lorem ornare velit neque morbi, erat id et blandit iaculis.</div>
</body>
</ul>
</html>
JavaScript
class ModifyParagraph{
constructor(myDIV){
this.myDIV = myDIV;
function myFunction(){
var btn = document.createElement("BUTTON");
var bold = document.getElementById(myDIV);
btn.addEventListener('click', function(){
if (bold.style['font-weight']) {
bold.style.removeProperty('font-weight');
} else {
bold.style['font-weight'] = "800";
}
}
}
}
}
In my code, I have a problem in creating a button inside the constructor and adding click handlers on each button. Please let me know how to proceed
Apart from your syntax mistakes(I'll cover them later in the answer), your main issue is that you missed to append the created button to the DOM.
Here's a working demo:
class ModifyParagraph {
constructor(div) {
this.myDIV = div;
}
toggleBoldStyle() {
// create the button.
var btn = document.createElement('button');
// give it some text/value.
btn.textContent = 'toggle Bold styling';
// add click event listener to the button.
btn.addEventListener('click', function() {
// if the font-weight is 800 make it 'normal' else if it's other than 800 make it 800'
// add the 'this' keyword in the addEventListener method references the button, to get the member myDIV we'll just call it without preceding it by 'this'(myDIV in place of this.myDIV).
myDIV.style.fontWeight = (myDIV.style.fontWeight === '800') ? 'normal':'800';
});
// append the button to the DOM
this.myDIV.appendChild(btn);
}
}
// testing...
var p = new ModifyParagraph(document.getElementById('myDIV'));
p.toggleBoldStyle();
<div id="myDIV" style="width:500px; ">Lorem ipsum dolor sit amet, porttitor ut donec ut egestas, purus urna consectetuer, arcu et vitae elementum nulla etiam in, sit leo lacus. Ligula cras tortor dignissim laoreet ut, nonummy hendrerit mauris, vitae augue congue congue, vel et augue, eros at. Fringilla id donec libero mauris eleifend. Nulla nunc sit. Consequat sodales placerat faucibus mauris, urna lectus vitae, sit nisl laoreet libero at suscipit ut, neque laoreet dapibus sapien. Sodales sit ut metus commodo tellus, ultricies cursus, et faucibus vitae quam, sit ultrices rhoncus. Massa duis mauris arcu vulputate, iste orci porttitor a ac, quisque venenatis pellentesque in in velit sed, repellat lorem consectetur vero, urna tellus donec. Suscipit in, donec beatae, lectus bibendum morbi justo consectetuer ac, facilisis metus vel non sapien vel. Magna congue vitae quia nulla nulla, lorem enim urna augue et et, sem morbi lorem ornare velit neque morbi, erat id et blandit iaculis.</div>
Apart from missing to append the button to the DOM, you had some mistakes:
Class methods doesn't require the 'function' keyword, you have to just write the method name.
You missed a closing parenthesis of the addEventListener method.
Why you're trying to get the element that you just saaved in the muyDIV member. Better, you have two choices: send the element itself to the constructor or send it's ID and in the assignment to the myDIV member you fetch the element by the getElementById method. In my demo I sent the element itself to the constructor. But, you can make things more complicated to allow sending the ID or the element itself possible, innthe constructor you have to check the type of the incoming argument.
Finally, here's the link of the MDN documentation of the ECMAScript 5 classes.
Hope I pushed you further.
My code,
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Question-2</title>
<meta charset="UTF-8">
<script src="q2.js"></script>
</head>
<body>
<div id="myDIV" style="width:500px; ">Lorem ipsum dolor sit amet, porttitor ut donec ut egestas, purus urna consectetuer, arcu et vitae elementum nulla etiam in, sit leo lacus. Ligula cras tortor dignissim laoreet ut, nonummy hendrerit mauris, vitae augue congue congue, vel et augue, eros at. Fringilla id donec libero mauris eleifend. Nulla nunc sit. Consequat sodales placerat faucibus mauris, urna lectus vitae, sit nisl laoreet libero at suscipit ut, neque laoreet dapibus sapien. Sodales sit ut metus commodo tellus, ultricies cursus, et faucibus vitae quam, sit ultrices rhoncus. Massa duis mauris arcu vulputate, iste orci porttitor a ac, quisque venenatis pellentesque in in velit sed, repellat lorem consectetur vero, urna tellus donec. Suscipit in, donec beatae, lectus bibendum morbi justo consectetuer ac, facilisis metus vel non sapien vel. Magna congue vitae quia nulla nulla, lorem enim urna augue et et, sem morbi lorem ornare velit neque morbi, erat id et blandit iaculis.</div>
</body>
</ul>
</html>
JavaScript
class ModifyParagraph {
constructor(div) {
this.myDIV = div;
}
toggleBoldStyle() {
// create the button.
var btn = document.createElement('button');
// give it some text/value.
btn.textContent = 'toggle Bold styling';
// add click event listener to the button.
btn.addEventListener('click', function() {
// if the font-weight is 800 make it 'normal' else if it's other than 800 make it 800'
// add the 'this' keyword in the addEventListener method references the button, to get the member myDIV we'll just call it without preceding it by 'this'(myDIV in place of this.myDIV).
myDIV.style.fontWeight = (myDIV.style.fontWeight === '800') ? 'normal':'800';
});
// append the button to the DOM
this.myDIV.appendChild(btn);
}
}
// testing...
var p = new ModifyParagraph(document.getElementById('myDIV'));
p.toggleBoldStyle();
I just started JS and trying to get a button which opens a block of text and with this same button you can close the block. All works fine but the first click is doing the focus and second click is opening the block of text. Block of text needs to open on the first click.
Hope you can help me out with plain JS...Thanks!
document.getElementById("homeBtn").addEventListener("click", function(){
var x = document.getElementById("parText");
var y = document.getElementById("homeBtn");
if (x.style.display === "none") {
x.style.display = "block";
y.innerHTML = "Sluiten";
} else {
x.style.display = "none";
y.innerHTML = "Lees verder...";
}
});
HTML:
<div>
<button type="button" id="homeBtn">Lees verder...</button>
</div>
<div id="parText">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Etiam sed leo felis. Maecenas tincidunt orci id orci vulputate congue.
Aliquam in molestie tortor. Sed erat felis, tincidunt id commodo sit amet,
dignissim fringilla metus. Proin porta, justo eget sollicitudin hendrerit,
sapien ligula imperdiet erat, vel hendrerit odio quam ut mauris.
Etiam laoreet justo massa, ac pretium sem pharetra at. Nullam ut felis orci.
Duis faucibus mauris libero, at semper nulla finibus vitae. In ut ex justo.
</p>
</div>
You need to set the display to none first. When your code is running it goes to the else part and then it is setting the display to none, so nothing is happening. When you click again the if statement is now true as the display is set to none and the code works. I have fixed your code. Check the snippet.
var y = document.getElementById("homeBtn");
var x = document.getElementById("parText");
x.style.display = "none";
y.addEventListener("click", function(){
if (x.style.display === "none") {
x.style.display = "block";
y.innerHTML = "Sluiten";
} else {
x.style.display = "none";
y.innerHTML = "Lees verder...";
}
});
<button type="button" id="homeBtn">Lees verder...</button>
<div id="parText">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Etiam sed leo felis. Maecenas tincidunt orci id orci vulputate congue.
Aliquam in molestie tortor. Sed erat felis, tincidunt id commodo sit amet,
dignissim fringilla metus. Proin porta, justo eget sollicitudin hendrerit,
sapien ligula imperdiet erat, vel hendrerit odio quam ut mauris.
Etiam laoreet justo massa, ac pretium sem pharetra at. Nullam ut felis orci.
Duis faucibus mauris libero, at semper nulla finibus vitae. In ut ex justo.
</p>
</div>