Develop Reference

Read more read less function

I have a read more read less function with html and js, function is working fine with one paragraph when I use again for another paragraph then second function not working, I would like to multiple use in same page, please check
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, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<span id="dots">...</span><span id="more"> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</span></p>
<div class="col-md-12">
<button onclick="myFunction()" id="myBtn" class="rm">READ MORE</button>
</div>

You can try to find out various element with relation to button which was clicked. You can also use class name instead of Id to select elements.
function myFunction(event) {
const parentSibling = event.target.parentElement.previousElementSibling;
const dots = parentSibling.querySelector(".dots");
const moreElement = parentSibling.querySelector(".more");
const btnElement = event.target;
if (dots.style.display === "none") {
dots.style.display = "inline";
btnElement.innerHTML = "READ MORE";
moreElement.style.display = "none";
} else {
dots.style.display = "none";
btnElement.innerHTML = "READ LESS";
moreElement.style.display = "inline";
}
}
<p>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<span class="dots">...</span><span class="more" style="display: none"> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</span></p>
<div class="col-md-12">
<button onclick="myFunction(event)" class="myBtn" class="rm">READ MORE</button>
</div>
<p>2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<span class="dots">...</span><span class="more" style="display: none"> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</span></p>
<div class="col-md-12">
<button onclick="myFunction(event)" class="myBtn" class="rm">READ MORE</button>
</div>
You can also use a single handler in the parent, which will execute the logic based on the clicked element myBtn.
function myFunction(event) {
event.preventDefault();
if(!event.target.classList.contains('myBtn')) {
return;
}
const parentSibling = event.target.parentElement.previousElementSibling;
const dots = parentSibling.querySelector(".dots");
const moreElement = parentSibling.querySelector(".more");
const btnElement = event.target;
if (dots.style.display === "none") {
dots.style.display = "inline";
btnElement.innerHTML = "READ MORE";
moreElement.style.display = "none";
} else {
dots.style.display = "none";
btnElement.innerHTML = "READ LESS";
moreElement.style.display = "inline";
}
}
<div onclick="myFunction(event)">
<p>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<span class="dots">...</span><span class="more" style="display: none"> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</span></p>
<div class="col-md-12">
<button class="myBtn" class="rm">READ MORE</button>
</div>
<p>2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<span class="dots">...</span><span class="more" style="display: none"> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</span></p>
<div class="col-md-12">
<button class="myBtn" class="rm">READ MORE</button>
</div>
</div>

You can add read more read less functionality with pure JavaScript using only 10 lines code. More details here https://developer.wikimint.com/2022/07/read-more-read-less-using-javascript.html
<script type="text/javascript">
var show = document.querySelectorAll('[role="show"]');
for (var i = 0; i < show.length; i++) {
show[i].addEventListener("click", function() {
this.nextElementSibling.style.display = 'contents';
this.style.display = 'none';
});
}
var hide = document.querySelectorAll('[role="hide"]');
for (var i = 0; i < hide.length; i++) {
hide[i].addEventListener("click", function() {
this.parentElement.style.display = 'none';
this.parentElement.previousElementSibling.style.display = 'contents';
});
}
</script>
Using the above JavaScript, you can add read more read less functionality to any number of elements.
No need to add onClick attributes or id attributes.

You can do this without javascript all together, just by using a checkbox and the sibling selector (~).
section .section-toggler,
section .more {
display: none;
}
section .section-toggler:checked ~ p > .more {
display: inline;
}
section .section-toggler:checked ~ p > .dots {
display: none;
}
section > label {
cursor: pointer;
color: #71acbf;
}
<section>
<input class="section-toggler" id="section-1" type="checkbox" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<span class="dots">...</span>
<span class="more">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</span>
</p>
<label for="section-1">Read more...</label>
</section>

Hover over one element to make a different element visible

I have been told that this isn't possible via CSS alone and so have turned to javascript.
Using onmouseover but I cannot get the hidden element to appear. I want it so that when hovering over element with ID #a, element with class .excerpt-box appears and then disappears when the mouse is moved away.
Does anyone know where I am going wrong? Thanks
Here's the code I've written so far:
The CSS includes visibility hidden for .excerpt-box.
<div class="ind-circle" id="a" onmouseover="showExcerpt()">
<p class="circle-title"> Read more</p>
</div>
<div class="excerpt-box" id="b">
<h1 class="excerpts-title">This is an example excerpt title...</h1>
<img class="excerpts-fi" src="<?php echo BASE_URL . '/assets/images/water.jpg'; ?>" alt="">
<p class="excerpts-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
function showExcerpt() {
document.getElementByClass('excerpt-box').style.visibility = 'visible';
}

First, the function you are looking for is document.getElementsByClassName.
After this you have to select a particular element by index. See this link.
Better would be this solution:
Grab the id of the div (id='b') and set display to block.
As you can see, the div is display:none; at startup.
function showExcerpt() {
document.getElementById('b').style.display = 'block';
}
.excerpt-box {
display: none;
}
<div class="ind-circle" id="a" onmouseover="showExcerpt()">
<p class="circle-title"> Read more</p>
</div>
<div class="excerpt-box" id="b">
<h1 class="excerpts-title">This is an example excerpt title...</h1>
<img class="excerpts-fi" src="<?php echo BASE_URL . '/assets/images/water.jpg'; ?>" alt="">
<p class="excerpts-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Your HTML structure allows to do the same via CSS as well.
.excerpt-box goes right after the .ind-circle and can be targeted via adjacent sibling combinator.
.excerpt-box {
display: none;
}
.ind-circle:hover + .excerpt-box {
display: block;
}

Highlighting text based on its match with another string

I'm trying to highlight text based on whether it's matched with a string recieved from a database or not. To show the problem, here's an example.
Given this text:
<div class='text'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
And this text:
<div id='matchingHighlight'>
Lorem ipsum <!-- Highlight this text within <div id='text'></div> !-->
</div>
How would I highlight the text within .text that matches with the text from #matchingHighlight (Lorem ipsum)?

To 'highlight' the keyword / phrases, you will need to wrap it around any inline element. I'm suggesting you use <span> tag.
The following logic will replace the text with the same text wrapped inside a span tag with a class of .highlight
$(document).ready(function() {
var $text = $('.text');
var textToHighlight = $('#matchingHighlight').text().trim();
var textCurrent = $text.html().trim();
var isTextExists = textCurrent.indexOf(textToHighlight) > -1;
if(isTextExists) {
textCurrent = textCurrent.replace(textToHighlight, "<span class='highlight'>" + textToHighlight + "</span>");
$text.html(textCurrent);
}
});
You can then style it using css, for example
.highlight {
background: yellow;
}
https://pastebin.com/vaB3wa96

Making the p element show in upper case using the toUpperCase method

As you can tell from my code. I am very new to this so, please try to keep your answers simple.
The assignment was to make the whatever name is entered comes back in uppercase which I did.
But I want everything to show in uppercase, both the name and paragraph. I have tried everything that I can think of, I feel like it's something simple.
This is what I have so far:
$(document).ready(function() {
$("#letter form").submit(function(event) {
var nameInput = $("input#name").val().toUpperCase();
$(".name1").text(nameInput);
$("#response").show();
event.preventDefault();
});
});
#response {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!--link href="css/styles.css" rel="stylesheet" type="text/css"-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!--script src="js/scripts.js"></script-->
<div class="container">
<h1>Fill in the blanks to write your story!</h1>
<div id="letter">
<form>
<div class="form-group">
<label for="name">A name</label>
<input id="name" class="form-control" type="text">
</div>
<button type="submit" class="btn">Show me the response</button>
</form>
</div>
<div id="response">
<h1>A fantastical adventure</h1>
<blockquote>
<p><span class="name1"></span>, Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</blockquote>
</div>
</div>

Assuming that you want it for ALL your <p> tags, you jQuery selectors follow the same rules as CSS selectors. With this in mind you can get the innerText with jQuery .text():
// Select ALL p tags, and set their text to upper case
$('p').text($('p').text().toUpperCase());
If you want it specifically for the first parent paragraph that contains a child with the class name1 we can use a similar idea with jQuery .closest():
// Split into a var to help readability
// Grab the "closest ancestor" (get the first parent that is a p)
var closestP = $('.name1').closest('p');
closestP.text(closestP.text().toUpperCase());
I hope this is what you're looking for!
Edit: Another way that requires editing the html for that specificp:
HTML
<div id="response">
<h1>A fantastical adventure</h1>
<blockquote>
<p id="toCapital"><span class="name1"></span>, Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</blockquote>
</div>
jQuery
$('#toCapital').text($('#toCapital').text().toUpperCase());
Here I used a similar idea to the first example, except instead of selecting ALL paragraph tags, I added an id to the existing one, selected that, and then modified the text.
You could also do a little more advanced selection, but this will not select the same paragraph that you want to capitalize if you add any more beforehand:
var first = $('p').first();
first.text(first.text().toUpperCase());
I'm sure you can see where I'm going with these, the key is to think about how you can identify what you want to change, it's tricky at first but it gets easier as you start to understand the differences between name, class, id, as well as the other attributes and how you can combine them to create unique combinations.

To make ALL the response to uppercase:
$("#response").html($("#response").html().toUpperCase());
.html() sets and returns all the text and markup of the element selected...
It's on the biggest container $("#response") that you have to apply the toUpperCase() method.
See below:
$(document).ready(function() {
$("#letter form").submit(function(event) {
event.preventDefault();
var nameInput = $("input#name").val().toUpperCase();
$(".name1").text(nameInput);
$("#response").html($("#response").html().toUpperCase());
$("#response").show();
});
});
#response {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!--link href="css/styles.css" rel="stylesheet" type="text/css"-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--script src="js/scripts.js"></script-->
<div class="container">
<h1>Fill in the blanks to write your story!</h1>
<div id="letter">
<form>
<div class="form-group">
<label for="name">A name</label>
<input id="name" class="form-control" type="text">
</div>
<button type="submit" class="btn">Show me the response</button>
</form>
</div>
<div id="response">
<h1>A fantastical adventure</h1>
<blockquote>
<p><span class="name1"></span>, Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</blockquote>
</div>
</div>

how can I do to use slideToggle between display:none and display:inline?

I'm trying to use slideToggle() function to apply "less and more" behavior to a paragraph which contain a ".more" class:
html code:
<p class="more">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut...
<span class="HiddenText" style="display: none;">
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
id est laborum.
</span>
<a class="readmore" href="" style="display: block;">show more</a>
</p>
here is my JS code:
$(document).ready(function() {
$('.readmore').click(function(){
var text = $(this).text() == 'show more' ? 'show less' : 'show less';
$(this).text(text);
$(this).prev().slidetoggle();
// here the problem
// $(this).prev() eq $('.hiddenText')
// slideToglle transforme "display:none" property to "display:inline-block"
return false;
});
});
I apply the slideToggle function to span.hiddenText element, but this function transform "display: none" to "display: inline-block", I want to toggle between "display: none" and "display: inline".
onclick behavior : using slideToggle() function:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
onclick behavior : using toggle() function:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
problem: slideToggle function create a return line in the paragraph.
normally, since I used a span which the display property is an inline, slideToggle must use a display:inline instead of display:inline-block.
Note: when I use toggle() in place of slideToggle() it work perfectly (display:none to display:inline)
how can I do to use slideToggle between display:none and display:inline?

You can use callback function for changing the style.
$('.readmore').click(function(){
$(this).prev().slideToggle("fast", function()
{
if(this.style.display !== "none")
this.style.display = "inline";
});
});
I hope it helps.

Give this a shot:
HTML:
<p>Lorem ipsum dolor sit amet, has at tractatos voluptaria. Pri ne ipsum primis apeirian, mel an menandri instructior. <span class="hide"> Cum quando nominati iracundia te. His tollit eripuit lucilius at, mei quis volutpat deseruisse ex, dicunt habemus iudicabit et qui. Ad voluptua insolens mel, ei enim esse tamquam nam.</span><a id="clickme" href="#">Read more...</a>
</p>
jQuery:
$(function () {
$("#clickme").click(function () {
$(".hide").slideToggle("slow", function () {
$('span.hide').toggleClass('show');
});
});
});
CSS:
.hide {
display: none;
}
.show {
display: inline;
}
The read more link is just a generic placeholder link that goes nowhere, but clicking it fires the jQuery, which slideToggles the text, which then fires a function to replace the class with the show class, thus the display should be set to inline instead of inline-block.
I have a working fiddle, but the site won't let me save it to share at the moment.