Develop Reference

Change div on each click using vanilla js

I have 2 divs div1 and div2. My goal is to make them change on each button click
<div>
<button onclick="changeText();" id="changeText" data-text="Enjoy!">Hello!</button>
<div id="div1" style="display:block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ipsum leo,
scelerisque at dapibus ac, consectetur vel ipsum.
</div>
<div id="div2" style="display:none">Cras suscipit ullamcorper elit vitae sodales. Sed euismod felis molestie lorem
gravida a venenatis risus sollicitudin. Proin accumsan lorem in est adipiscing faucibus.
</div>
</div>
My js-code that right now works but i can see that it is completely wrong written.
var button = document.getElementById("changeText");
button.addEventListener(
"click",
function () {
if (document.getElementById("div1").style.display == "block") {
document.getElementById("div1").style.display = "none";
document.getElementById("div2").style.display = "block";
} else {
document.getElementById("div2").style.display = "none";
document.getElementById("div1").style.display = "block"
}
},
false
);
What can I do to make this code look and work better?

It will at least look a little better if you create variables of the two divs;
const div1 = document.getElementById("div1");
const div2 = document.getElementById("div2");

If I understand your question correctly, you can achieve this by toggling between style.display: none and style.display: block on your elements with each click of the button. For example, something like:
function toggleDisplay(el) {
el.style.display = el.style.display === 'none' ? 'block' : 'none';
}
const divEl1 = document.querySelector('#div1');
const divEl2 = document.querySelector('#div2');
document.querySelector('div').addEventListener('click', event => {
if (event.target.tagName === 'BUTTON') {
toggleDisplay(divEl1);
toggleDisplay(divEl2);
}
});
<div>
<button id="changeText" data-text="Enjoy!">Hello!</button>
<div id="div1" style="display:block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ipsum leo, scelerisque at dapibus ac, consectetur vel ipsum.
</div>
<div id="div2" style="display:none">Cras suscipit ullamcorper elit vitae sodales. Sed euismod felis molestie lorem gravida a venenatis risus sollicitudin. Proin accumsan lorem in est adipiscing faucibus.
</div>
</div>

My suggestion:
var divs = document.querySelectorAll('.text');
changeText.onclick = () => divs.forEach(div => div.classList.toggle('hidden'));
.hidden {
display: none;
}
<div>
<button id="changeText" data-text="Enjoy!">Hello!</button>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ipsum leo, scelerisque at dapibus ac, consectetur vel ipsum.
</div>
<div class="text hidden">
Cras suscipit ullamcorper elit vitae sodales. Sed euismod felis molestie lorem gravida a venenatis risus sollicitudin. Proin accumsan lorem in est adipiscing faucibus.
</div>
</div>
Alternatively:
div_2.style.display = "none";
changeText.onclick = () => {
div_2.style.display == "none" ? (div_1.style.display = "none", div_2.style.display = "block") : (div_1.style.display = "block", div_2.style.display = "none")
};
<div>
<button id="changeText" data-text="Enjoy!">Hello!</button>
<div id="div_1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ipsum leo, scelerisque at dapibus ac, consectetur vel ipsum.
</div>
<div id="div_2">
Cras suscipit ullamcorper elit vitae sodales. Sed euismod felis molestie lorem gravida a venenatis risus sollicitudin. Proin accumsan lorem in est adipiscing faucibus.
</div>
</div>

Create a CSS class that hides content, and toggle that class:
let divs = document.querySelectorAll(".text");
document.getElementById("changeText").addEventListener("click", () => {
for (let div of divs) div.classList.toggle("hidden");
});
.hidden { display: none }
<div>
<button id="changeText">Hello!</button>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ipsum leo,
scelerisque at dapibus ac, consectetur vel ipsum.
</div>
<div class="text hidden">Cras suscipit ullamcorper elit vitae sodales. Sed euismod felis molestie lorem
gravida a venenatis risus sollicitudin. Proin accumsan lorem in est adipiscing faucibus.
</div>
</div>
Some comments on your code:
It defines two click handlers: one with addEventListener, but another one with the HTML attribute onclick. The latter references a function you did not provide.
data-text="Enjoy!" is not used
id="div1": don't create a sort of enumerated id attributes. This is almost always a wrong choice. Instead give such a group of elements a common CSS class, and then use a DOM method to get all of them in a node list.

I recommend saving the elements in variables and using classes to hide the element using the classList.toggle () method.
CSS
.hidden{display:none;}
HTML
<div>
<button onclick="changeText();" id="changeText" data-text="Enjoy!">Hello!</button>
<div id="div1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ipsum leo, scelerisque at dapibus ac, consectetur vel ipsum.
</div>
<div id="div2" class="hidden">
Cras suscipit ullamcorper elit vitae sodales. Sed euismod felis molestie lorem gravida a venenatis risus sollicitudin. Proin accumsan lorem in est adipiscing faucibus.
</div>
</div>
JS
var button = document.getElementById("changeText");
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
button.addEventListener("click",function () {
div1.classList.toggle('hidden');
div2.classList.toggle('hidden');
});

occurrences of any letters / javascript

I am playing around with dom manipulation and js and I am running into a problem.
Let's say I have <p id = "description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras facilisis, felis et sagittis eleifend, justo ante maximus augue, id porta massa elit a ligula. </p>
and I want to write a function that counts a number of repeated letters in a paragraph. I figured out how to do that with a string but not with paragraphs.
function recurringLetters() {
var myParagraph = document.getElementById("description").innerHTML;
}
}
Any thoughts?
This is how far I have gotten.

Hope This Answers your Question.
Just Copy & Paste into an HTML file for testing.
function WORD_COUNT( _THIS_ , _WORD_ ){
var TEMP = _THIS_.innerHTML;
var COUNT= 0;
// IF TEMP search result finds nothing, return is -1, so -1 is our stopping point
while(TEMP.search(_WORD_)>-1){
TEMP = TEMP.replace(_WORD_,'');
COUNT++;
document.getElementById('output').innerHTML=COUNT;
}}
<p onmouseover=WORD_COUNT(this,'us');>PUT YOUR MOUSE OVER ME.<BR> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras facilisis, felis et sagittis eleifend, justo ante maximus augue, id porta massa elit a ligula. </p>
<p ID=output>Output area<p>

Multiple Click jQuery

I am trying to show/hide content on a page that contains the same class on multiple HTML elements. However, when I click on one of the anchor links, it opens BOTH paragraphs, rather than only the paragraph that I am trying to open. How do I fix this so that the Read more only toggles the intended paragraph?
JS:
$('.show-more').click(function(e) {
e.preventDefault();
if($('.show-more-snippet').css('height') != '96px'){
$('.show-more-snippet').stop().animate({height: '96px'}, 200);
$(this).text('Read more');
}else{
$('.show-more-snippet').css({height:'100%'});
var xx = $('.show-more-snippet').height();
$('.show-more-snippet').css({height:'96px'});
$('.show-more-snippet').stop().animate({height: xx}, 400);
$(this).text('Read less');
} }); });
HTML:
<div><p class="show-more-snippet"> Some first paragraph text</p>
<a class="show-more" href="#">Read more</a> </div>
<div><p class="show-more-snippet"> Some second paragraph text</p>
<a class="show-more" href="#">Read more</a> </div>
CSS:
.show-more-snippet {
height:16px;
overflow:hidden;
}

All you need is to change all of $('.show-more-snippet') with $(this).prev(). This will give you the access to the p that is just before the button clicked.

Try using this: http://jsfiddle.net/6jnwmkp4/
$('.show-more').click(function(e) {
e.preventDefault();
if($(this).siblings('.show-more-snippet').css('height') != '96px'){
$(this).siblings('.show-more-snippet').stop().animate({height: '96px'}, 200);
$(this).text('Read more');
}else{
$(this).siblings('.show-more-snippet').css({height:'100%'});
var xx = $(this).siblings('.show-more-snippet').height();
$(this).siblings('.show-more-snippet').css({height:'96px'});
$(this).siblings('.show-more-snippet').stop().animate({height: xx}, 400);
$(this).text('Read less');
}
});

Inside your callback you are using a class show-more-snippet which is used by both paragraph elements. That's why both of them are getting affected.

$('.show-more').click(function(e) {
e.preventDefault();
//write closing logic to close all if you want to close other tab on class name
$('.show-more-snippet').css({height:'100%'});
//Then open this tab .
if($(this).css('height') != '96px'){
$(this).stop().animate({height: '96px'}, 200);
$(this).text('Read more');
}else{
$(this).css({height:'100%'});
var xx = $(this).height();
$(this).css({height:'96px'});
$(this).stop().animate({height: xx}, 400);
$(this).text('Read less');
} }); });

Given your HTML structure, you need to use .parent().find() in your jQuery. This will target the clicked elements sibling rather than all elements with the .show-more-snippet class.
eg.
if($(this).parent().find('.show-more-snippet').css('height') != '96px')...
and
$(this).parent().find('.show-more-snippet').stop().animate({height: '96px'}, 200);
etc.
EDIT: A better way to do it would be to use .siblings() like so:
eg.
if($(this).siblings('.show-more-snippet').css('height') != '96px')...
and
$(this).siblings('.show-more-snippet').stop().animate({height: '96px'}, 200);
etc.

You have to use prev for that. see below code shipment.
Jquery
$(document).ready(function(){
$('.show-more').click(function(e) {
e.preventDefault();
if($(this).prev('.show-more-snippet').css('height') != '96px'){
$(this).prev('.show-more-snippet').stop().animate({height: '96px'}, 200);
$(this).text('Read more');
}else{
$(this).prev('.show-more-snippet').css({height:'100%'});
var xx = $(this).prev('.show-more-snippet').height();
$(this).prev('.show-more-snippet').css({height:'96px'});
$(this).prev('.show-more-snippet').stop().animate({height: xx}, 400);
$(this).text('Read less');
}
});
});
HTML
<div>
<p class="show-more-snippet"> Some first paragraph text</p>
<a class="show-more" href="#">Read more</a>
</div>
<div>
<p class="show-more-snippet"> Some second paragraph text</p>
<a class="show-more" href="#">Read more</a>
</div>

Just select particular prev div.
$('.show-more').click(function(e) {
e.preventDefault();
if($(this).prev('.show-more-snippet').css('height') != '96px'){
$(this).prev('.show-more-snippet').stop().animate({height: '96px'}, 200);
$(this).text('Read more');
}else{
$(this).prev('.show-more-snippet').css({height:'100%'});
var xx = $('.show-more-snippet').height();
$(this).prev('.show-more-snippet').css({height:'96px'});
$(this).prev('.show-more-snippet').stop().animate({height: xx}, 400);
$(this).text('Read less');
} });

The issue is that you are not specifying which of the <p class=".show-more-snippet"></p> to use. This should be the one you clicked the "show more" button for.
You can solve this using the e value in your click listener. See below for var paragraph which gets the proper <p> element which you can use for what you need to do.
Just replace $('.show-more-snippet') with $(paragraph) in your code.
Solution:
$('.show-more').click(function (e) {
e.preventDefault();
// get the correct paragraph
var paragraph = e.target.parentNode.querySelector('.show-more-snippet');
if ($(paragraph).css('height') != '96px') {
$(paragraph).stop().animate({height: '96px'}, 200);
// ... etc ...
}
});

Add active class on the div parent of the anchor you click, other divs remove active class. This way will simplify your code.
in code
$('.show-more').click(function(e) {
e.preventDefault();
$('.show-more-snippet.active').removeClass('active');
$(this).closest('.show-more-snippet').addClass('active');
});
In css
.show-more-snippet.active {
height:96px;
overflow:hidden;
}

you have got too many answers for your problem above but If you want a clean solution using some external js then you can use expander.
main source:here
$(document).ready(function(){
$('div.show-more-snippet').expander({
slicePoint: 280, //It is the number of characters at which the contents will be sliced into two parts.
widow: 2,
expandSpeed: 0, // It is the time in second to show and hide the content.
userCollapseText: 'Read Less (-)' // Specify your desired word default is Less.
});
$('div.show-more-snippet').expander();
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://www.discussdesk.com/online_demo/read-more-less-content-in-jquery-expander-plugin/jquery.expander.js"></script>
<div class="show-more-snippet">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce auctor pulvinar mi in pellentesque. In et faucibus nisi. Vivamus nec bibendum eros. Ut in augue ac leo facilisis lobortis. Cras sit amet pulvinar massa. Donec sed tempus velit. Praesent dignissim iaculis pretium.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce auctor pulvinar mi in pellentesque. In et faucibus nisi. Vivamus nec bibendum eros. Ut in augue ac leo facilisis lobortis. Cras sit amet pulvinar massa. Donec sed tempus velit. Praesent dignissim iaculis pretium.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce auctor pulvinar mi in pellentesque. In et faucibus nisi. Vivamus nec bibendum eros. Ut in augue ac leo facilisis lobortis. Cras sit amet pulvinar massa. Donec sed tempus velit. Praesent dignissim iaculis pretium.</p>
</div>
<div class="show-more-snippet">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce auctor pulvinar mi in pellentesque. In et faucibus nisi. Vivamus nec bibendum eros. Ut in augue ac leo facilisis lobortis. Cras sit amet pulvinar massa. Donec sed tempus velit. Praesent dignissim iaculis pretium.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce auctor pulvinar mi in pellentesque. In et faucibus nisi. Vivamus nec bibendum eros. Ut in augue ac leo facilisis lobortis. Cras sit amet pulvinar massa. Donec sed tempus velit. Praesent dignissim iaculis pretium.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce auctor pulvinar mi in pellentesque. In et faucibus nisi. Vivamus nec bibendum eros. Ut in augue ac leo facilisis lobortis. Cras sit amet pulvinar massa. Donec sed tempus velit. Praesent dignissim iaculis pretium.</p>
</div>

How to wrap inner content of a paragraph after specific child element?

I have several bios that all look like this:
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
</p>
Not the prettiest text blocks, but they're auto-generated by the system. I need to iterate through each <p> and take everything after the first set of break tags and wrap that in something like a <div>.
The end result would be:
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.</p>
<div class="theRest">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
</div>
</p>

Try this (inspired of #dave answer):
$("p").each(function(){
// Add a div after the second <br /> (in the current <p>)
$("br:eq(1)", this).after('<div class="theRest"> </ div>');
// Split each "child" in an array
$(this).contents().filter(function(index, elem){
// Keep only children after the <div />
return index > 3;
// Remove and put them into the <div />
}).detach().appendTo($(".theRest", this));
});
Fiddle

Try this:
$('p').each(function() {
$(this).contents(':gt(2)').wrap('<div class="theRest"></div>');
});
But it's not a good enough solution.
For prevent your other p element be wrapped, You should find from any parent element like below:
$('.father').find('p').each(function() {
$(this).contents(':gt(2)').wrap('<div class="theRest"></div>');
});

Try this:
$($("p").contents().get(2)).after('<div class="theRest"></div>');
$("p").contents().filter(function(index, element) {
return index > 3;
}).detach().appendTo(".theRest");
Fiddle

Even though the format returned from server is bad from my standards as it complicates things for the given purpose. However, with some tricks there is still a way to do it.
Explanation: select all nodes, discard the first node because that happens to be the text node, then use jquery wrapAll method to take everything after that node and wrap it up in new div.
Demo: http://jsfiddle.net/qe3bm92e/3/
var txt = $('.txt').contents();
txt.splice(0,1);
txt.wrapAll($("<div>").addClass('red'));
You can replace '.txt' with 'p' but it's not a good practice for very obvious reason.

Flexible Font Size for fixed width and height

I need to make each of my <p> have flexible font size with fixed width and height.
Current code
CSS
p{
width:500px;
height:100px;
background-color:#F0F0F0;
margin:10px;
padding:5px;
font-size:24px;
}
HTML
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra quis dui a laoreet. Proin nibh dolor, faucibus sit amet aliquet ac, varius id eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra quis dui a laoreet. Proin nibh dolor, faucibus sit amet aliquet ac, varius id eros. consectetur adipiscing elit. Duis pharetra quis dui a laoreet. Proin nibh dolor, faucibus sit amet aliquet ac, varius id eros.</p>
<br><br><br>
<br><br><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra quis dui a laoreet. Proin nibh dolor, faucibus sit amet aliquet ac, varius id eros, faucibus sit amet aliquet ac, varius id eros.</p>
<br><br><br>
<!-- This one is perfect -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra quis dui a laoreet. Proin nibh dolor, faucibus sit amet aliquet ac, varius id eros.</p>
Check and try the code in jsfiddle
http://jsfiddle.net/8GNAV/
And this the output I want to reach
http://jsfiddle.net/8GNAV/1/

The general idea is to get overflow:hidden, then keep shrinking the text until the scrollHeight is less than the offsetHeight. Like so:
[].forEach.call(document.getElementsByTagName('p'),function(p) {
p.style.overflow = "hidden";
var f = 24;
while(f > 6 && p.scrollHeight > p.offsetHeight) {
f--;
p.style.fontSize = f+"px";
}
});
Demo