Develop Reference

Using one function for multiple html classes in javascript (expanding text via read more button)

First post on stack overflow:)
I'm trying to put one certain function on all of my HTML-buttons, so far I haven't found anything that worked after 2 days of trying out(new to coding).
What I'm basically trying to do is a 'read more' button that displays a text on click. Neither .getElementsByClassName nor .querySelectorAll have worked so far. If I use my code with just an #id it works fine, but I know there must be a better way of using one function for multiple elements instead of having multiple ids and using the function for each id individually . I've also tried a forEach() loop but it didn't do anything. Additionally I've tried readMoreBtn[length].addEventListener('click', () => {}), but that also didn't work.
As I said, it works with the .getElementById and querySelector, but not with .getElementsByClassName or .querySelectorAll. If I use querySelectorAll, the first button works but the others don't.
Since I'm interested in making it work with classes and not ids, I've removed the id-attributes from the HTML.
I won't post my full HTML since it's quite long but the container with the button looks like the following:
<div class="main-container">
<h6 class="main-artist"><em class="main-emph">content</em>content</h6>
<p class="main-p"><span class="moreText"> Lorem ipsum </span></p>
<button class="readMore">read more</button>
</div>
And JS:
const readMoreBtn = document.getElementsByClassName('.readMore');
const text = document.querySelector('.main-p');
readMoreBtn.addEventListener('click', () => {
text.classList.toggle('show-more');
if(readMoreBtn.innerHTML === "read more") {
readMoreBtn.innerHTML = "read less"
} else {
readMoreBtn.innerHTML = "read more"
}
})
Thank you for your help and if you have any suggestions of how to improve my way of asking questions, shoot.
EDIT: I have multiple buttons, and all of them have a unique text. My goal is it to have the buttons display their unique text below them somehow. Here's another HTML to show what I mean:
<div class="main-container">
<h6 class="main-artist"><em class="main-emph">content</em>content</h6>
<p class="main-p"><span class="moreText"> Lorem ipsum </span></p>
<button class="readMore">read more</button>
</div>
<div class="main-container">
<h6 class="main-artist"><em class="main-emph">content</em>content</h6>
<p class="main-p"><span class="moreText"> Messi GOAT </span></p>
<button class="readMore">read more</button>
</div>
<div class="main-container">
<h6 class="main-artist"><em class="main-emph">content</em>content</h6>
<p class="main-p"><span class="moreText"> Ipsum Lorem </span></p>
<button class="readMore">read more</button>
</div>
With this JS Code I'm able to expand the first main-p only, but not the others.
const yourFunction = (e)=>{
const text = document.querySelector('.main-p');
text.classList.toggle('show-more');
if(e.target.innerHTML === "read more") {
e.target.innerHTML = "read less"
} else {
e.target.innerHTML = "read more"
}
}
In my head there are two solutions that might work:
I would have to connect each button to their main-p somehow in HTML? I've tried it but it didn't work.
Working with loops in JS.
Is one of those two possible? TIA

There are many ways to do this.
Try this one.
const yourFunction = (e) => {
const text = document.querySelector('.main-p');
text.classList.toggle('show-more');
if (e.target.innerHTML === "read more") {
e.target.innerHTML = "read less"
} else {
e.target.innerHTML = "read more"
}
}
<div class="main-container">
<h6 class="main-artist"><em class="main-emph">content</em>content</h6>
<p class="main-p"><span class="moreText"> Lorem ipsum </span></p>
<button class="readMore" onclick="yourFunction(event)">read more</button>
</div>

getElementsByClassName() returns an HTMLCollection.
And querySelectorAll() returns a NodeList.
By contrast querySelector() and getElementById() return a DOM Element.
Each of these types are accessed and manipulated differently. You are treating the HTMLCollection and the NodeList as an Element.
One way to access every item in an HTMLCollection and NodeList is to first convert them to an array using Array.from(), then use forEach() on the resulting array to iterate each Element, in this case adding a click event handler to the element:
const readMoreBtn = document.getElementsByClassName('readMore');
const text = document.querySelectorAll('.main-p');
console.log(Array.from(text));
Array.from(readMoreBtn).forEach(function(elem) {
elem.addEventListener('click', ({target}) => {
target.textContent = ('read more' === target.textContent) ? 'read less' : 'read more';
});
});
<p class="main-p"><span class="moreText"> Lorem ipsum 1</span></p>
<button class="readMore">read more</button>
<p class="main-p"><span class="moreText"> Lorem ipsum 2</span></p>
<button class="readMore">read more</button>
<p class="main-p"><span class="moreText"> Lorem ipsum 3</span></p>
<button class="readMore">read more</button>

I prefer to use less JS, but more CSS. (more flexible)
Example, just add .is-acitve in container (parent) so just styling in CSS
const buttons = document.querySelectorAll('.main-container .readMore');
const setContainerActive = (el) => {
el.target.closest('.main-container').classList.toggle('is-active')
}
Array.from(buttons).forEach((el) => {
el.addEventListener('click', setContainerActive)
});
.main-container {
/* Defaults */
}
.main-container.is-active {
/* Active */
background: red;
}
/* Example */
.main-container .show-is-active { display:none; }
.main-container.is-active .show-is-active { display: block; }
.main-container .hide-is-active { display:block; }
.main-container.is-active .show-hide-active { display: none; }
<div class="main-container">
<h6 class="main-artist"><em class="main-emph">content</em>content</h6>
<p class="main-p"><span class="moreText"> Lorem ipsum </span></p>
<button class="readMore"><span class="show-is-active">read less</span><span class="show-hide-active">read more</span></button>
</div>

HTML:
<div class="main-container">
<h6 class="main-artist">
<em class="main-emph">content</em> content
</h6>
<p class="main-p">
<span class="moreText"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora aliquid at, provident molestiae necessitatibus ullam culpa debitis, dolorum quas accusamus quidem iusto eaque omnis veniam. Delectus quo saepe enim voluptatum! </span>
</p>
<button class="readmore">Read more</button>
</div>
<div class="main-container">
<h6 class="main-artist">
<em class="main-emph">content</em>content
</h6>
<p class="main-p">
<span class="moreText"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora aliquid at, provident molestiae necessitatibus ullam culpa debitis! </span>
</p>
<button class="readmore">Read more</button>
</div>
<div class="main-container">
<h6 class="main-artist">
<em class="main-emph">content</em>content
</h6>
<p class="main-p">
<span class="moreText"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora aliquid at, provident molestiae necessitatibus ullam culpa debitis, dolorum quas accusamus quidem iusto eaque omnis veniam. Delectus quo saepe enim voluptatum! </span>
</p>
<button class="readmore">Read more</button>
</div>
JS File locations:
If your js file is in the <head></head> you must have it wait for the document to load or the document.querySelectAll(); will not work if the js file is executed before the document is fully loaded. You will get a console error. Defer the js file in the head
<head>
<script src="your-js-file-name.js" defer></script>
</head>
or place js file at the end of the document before the </body> close tag.
<body>
<scrpit src="your-js-file-name.js"></script>
</body>
JS:
let btn = document.querySelectorAll('.readmore');
let mainText = document.querySelectorAll('.main-p');
let container = document.querySelectorAll('.main-container');
// console.log(btn);
// console.log(mainText);
// console.log(container);
btn.forEach((i) => {
i.addEventListener('click', (evt) => {
// console.log(evt.target.previousElementSibling);
let moreContent = evt.target.previousElementSibling;
let button = evt.target;
// console.log(button);
// console.log(moreContent);
if (moreContent.style.visibility != 'visible') {
console.log("Style not present. Running code block below");
moreContent.style.visibility = 'visible';
evt.target.innerHTML = 'Read less';
} else {
console.log('Style present. Removing and replacing with default style with code block below');
moreContent.style.visibility = 'hidden';
evt.target.innerHTML = 'Read mess';
}
})
});
CSS:
The visibility: hidden; will still allow the element to take up the space it occupies in the document. If this is not ideal then switch the css and js to use display: none; and display: block;. Other ways to approach it as well if a smooth transition is needed on the .main-p element.
.main-container {
border-bottom: 1.5px solid blue;
padding-bottom: 10px;
}
.main-p {
color: white;
background-color: #333;
padding: 15px;
visibility: hidden;
}
let btn = document.querySelectorAll('.readmore');
let mainText = document.querySelectorAll('.main-p');
let container = document.querySelectorAll('.main-container');
// console.log(btn);
// console.log(mainText);
// console.log(container);
btn.forEach((i) => {
i.addEventListener('click', (evt) => {
// console.log(evt.target.previousElementSibling);
let moreContent = evt.target.previousElementSibling;
let button = evt.target;
// console.log(button);
// console.log(moreContent);
if (moreContent.style.visibility != 'visible') {
console.log("Style not present. Running code block below");
moreContent.style.visibility = 'visible';
evt.target.innerHTML = 'Read less';
} else {
console.log('Style present. Removing and replacing with default style with code block below');
moreContent.style.visibility = 'hidden';
evt.target.innerHTML = 'Read more';
}
})
});
.main-container {
border-bottom: 1.5px solid blue;
padding-bottom: 10px;
}
.main-p {
color: white;
background-color: #333;
padding: 15px;
visibility: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="app.js" defer></script>
<title>Document</title>
</head>
<body>
<div class="main-container">
<h6 class="main-artist">
<em class="main-emph">content</em> content
</h6>
<p class="main-p">
<span class="moreText"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora aliquid at, provident molestiae necessitatibus ullam culpa debitis, dolorum quas accusamus quidem iusto eaque omnis veniam. Delectus quo saepe enim voluptatum! </span>
</p>
<button class="readmore">read more</button>
</div>
<div class="main-container">
<h6 class="main-artist">
<em class="main-emph">content</em>content
</h6>
<p class="main-p">
<span class="moreText"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora aliquid at, provident molestiae necessitatibus ullam culpa debitis! </span>
</p>
<button class="readmore">read more</button>
</div>
<div class="main-container">
<h6 class="main-artist">
<em class="main-emph">content</em>content
</h6>
<p class="main-p">
<span class="moreText"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora aliquid at, provident molestiae necessitatibus ullam culpa debitis, dolorum quas accusamus quidem iusto eaque omnis veniam. Delectus quo saepe enim voluptatum! </span>
</p>
<button class="readmore">read more</button>
</div>
</body>
</html>
Hope this helps you out and anyone else having a similar problem to solve. :)

onclick zoom image in full screen

I have slider wth product image, there is a button view more. I want that when someone clicks on that button then image of that product should be visible/zoomed to full screen with animation. Just like this:
https://dribbble.com/shots/6347184-Better-Hero -- Example link
My header screenshot:
My code:
<div class="projectSlider"> // slider
<div class="projectSlider--item"> // slider item 1
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="projectSlider--text">
<div class="projectSlider--subTitle">An Inspirational Collection Of</div>
<div class="projectSlider--title"><span>Creative Designs</span></div>
<p class="projectSlider--description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
</p>
<a href="#" class="btn secondary projectSlider--view" data-quickview="quickView">View
More</a>
</div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="projectSlider--img">
<img src="img/template.jpg" alt="template"> // slider image
</div>
</div>
</div>
</div>
// slider items, so on....
</div>
I don't know how to do that kind of image zoom effect. Can you please help me with this? I m stuck

You can do this by creating a simple animation which increases the image size, and after, creating a click listener on that image.
Take a look at the following example, which increases the image size by clicking on it.
const image = document.querySelector(".clickable-image");
image.addEventListener("click", () =>{
image.classList.add("image-open");
})
.clickable-image{
width:50vw;
}
.image-open{
animation: scaleUp 2s forwards linear;
}
.clickable-image:hover{
cursor: pointer;
}
#keyframes scaleUp{
from{
width:50vw;
}to{
width:100vw;
}
}
<img class="clickable-image" src="https://i.pinimg.com/originals/ea/e4/a5/eae4a5191fafae3979ea975d206fcd0b.jpg" alt="image">

Z-index not displaying properly

I've placed 3 images in a row and I need the bottom of the first image to overlap the row beneath it. While in mobile view, I need the first image to overlap the second one. My problem is that even placing the z-index "properly" as I read in so many topics, I still don't get the desired outcome. I've changed the margins, placed the z-index value, gave the proper positioning to the images but still nothing happens.
Image 1 displays how is the current view,plus how it looks on mobile and image 2 how it should look if it works correctly.
Image 1
Image 2
Here is the HTML, I'm using for this specific part of the website:
<div class="container-fluid">
<div class="row ">
<div class = "three-images">
<div class="col-md-4 col-sm-4">
<img src = "image/sox.png" class = "img-responsive" id ="first-image">
<div class="carousel-caption">
<div class ="text-one">
<span><h1>About<br>ShortsTV<br>Oscars<br></h1></span>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 ">
<img src = "image/2.jpg" class = "img-responsive" id ="second-image">
<div class="carousel-caption">
<div class = "text-two">
<div class ="who">WHO ARE WE</div>
<span1><h3>Lorem ipsum dolor sit amet<br>adipiscing elit<br></h3></span1>
<div class = "who">Lorem ipsum dolor sit amet, consectetur<br>adipiscing elit. Nulla quam velit, vulputate eu<br>
pharetna nec, mattis ac neque. Duis vulputate</div>
</div>
<a class="btn btn-primary" href="#" role="button">Watch Trailer</a>
</div>
</div>
<div class="col-md-4 col-sm-4">
<img src ="image/3.jpg" class ="img-responsive" id ="third-image">
<div class="carousel-caption">
<div class = "text-three">
<span><h1>How to get
ShortsHD (US) or
ShortsTV (Europe)
</h1></span>
</div>
</div>
</div>
</div>
</div>
<div class= "row">
<div class ="big-image">
<img src = "image/4.jpg" class= "img-responsive">
</div>
</div>
Here is the CSS I used to edit the images:
#first-image{
height: 500px;
position:absolute;
z-index:30;
margin-bottom: -30px;
}
#second-image{
height: 440px;
filter: brightness(50%);
z-index:10;
}
.big-image{
position:relative;
z-index:20;
}

use this
#first-image{
height: 500px;
position:absolute;
z-index:30 !important;
margin-bottom: -30px;
}
#second-image{
height: 440px;
filter: brightness(50%);
z-index:10 !important;
}
.big-image{
position:relative;
z-index:20 !important;
}

Using Javascript to create a test environment on live website

I'm currently working in the backend of a Salesforce Desk platform, trying to code dependent dropdown menus. They use what are called Case-Themes which basically renders the layout for a client-interfacing page. The problem is, when I create my own Test Case-Theme, I can't preview it without publishing it and making it live.
My question is, if I were to use Javascript to create a conditional based on parameter values, is this a valid way to publish a live theme without messing up the front-end view/functionality.
<body>
<!-- Okay to Edit - Test Area -->
<div class="test_wrapper">
<div class="test_header">
<h1>DEVELOPMENT MODE</h1>
</div>
<hr>
<div class="test_body">
<h2>Development Header</h2>
<p>Lorem ipsum dolor sit amet, consectetur </p>
</div>
<hr>
<div class="test_footer">
<h2>Development Header</h2>
<p>Voluptate necessitatibus inventore explicabo blanditiis veniam odio.</p>
<div id="test_button">Click</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elitinventore eligendi.</p>
<br>
<h2>Development SubSubHeading</h2>
<p>Lorem ipsum dolor sit amet, consectetur quis veritatis.</p>
</div>
<script>
$('#test_button').click(function(){
alert('You are currently in Test Mode');
});
</script>
</div>
<!-- End Test Area -->
<!-- Don't Touch - Live Area -->
<div class="live_wrapper">
<div class="live_header">
<h1>Live Mode</h1>
</div>
<hr>
<div class="live_body">
<h2>Live Subheading </h2>
<p>Lorem nis placeat vitae in qui iste laborum sequi ea.</p>
<p>Lorem delectus possimus ipsam ex, doloribus placeat. Perspiciatis.</p>
</div>
<hr>
<div class="live_footer">
<h2>Live Subheading </h2>
<p>Lorem veniam tempore provident minima, consequuntur. Qui iure blanditiis veniam odio.</p>
<div id="live_button">Click</div>
<p>Lorem vero illum necessitatibus iste rem pariatur quos autem inventore eligendi.</p>
<br>
<h2>Live SubSubHeading </h2>
<p>Lorem tus porro eligendi autem optio facilis quis veritatis.</p>
</div>
<script>
$('#live_button').click(function(){
alert('You are currently in Live Mode');
});
</script>
</div>
<!-- End Live Area -->
<script>
$(document).ready(function(){
if (window.location.search.indexOf('mode=test') > -1) {
$('.live_wrapper').hide();
$('.test_wrapper').css('display', 'block');
} else {
$('.test_wrapper').hide();
$('.live_wrapper').css('display', 'block');
}
});
</script>
As you already know, unless the URL has ?mode=test the live code should render. Can someone please point out the dangers/drawbacks of doing something like this?

As Dark Falcon said in a comment, it will show briefly while it waits for the JavaScript to fire. I would suggest adding a class to the body tag that JS adds in test mode and then you can do something like this:
body.test .live_wrapper {
display: none;
}
body.test .test_wrapper {
display: block;
}
body .live_wrapper {
display: block;
}
body .test_wrapper {
display: none;
}
This will basically set the live mode as the default until you set the class of the body to "test"
if (window.location.search.indexOf('mode=test') > -1) {
$('body').addClass('test');
}
Of course unless you're planning on changing between these on the fly, it would probably be better to turn these on or off with server-side code, assuming you are using one.

I would just use CSS for this (using display:none on the containers you want to hide).
The only drawback for using a query parameter is that if users try, they can view your test-HTML. If that is not a problem then go for it.
Just make sure you dont expose any API's that someone can exploit.

jQuery plugin cycle2 caption is not animating up and down during slideshow

I cant get the animation of the caption / overlay to work. I want the caption to slide up and down from the bottom as the slides go in and out. I tried a bunch of things and I couldn't get it to work. My slides are made up of divs not images. Not sure if I put the HTML for the captions in the right place. I included the caption2 plugin.
Jsfiddle
<div class="cycle-slideshow slider"
data-cycle-slides = "> div"
data-cycle-fx="scrollHorz"
data-cycle-timeout="3000"
data-cycle-caption-plugin="caption2"
data-cycle-caption-fx-out="slideUp"
data-cycle-caption-fx-in="slideDown"
>
<div class="slide1 slide">
<div class= "innerWrapper" data-cycle-title="Spring">
<p class ="slide1text">This is a great div Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, unde, vel ratione nulla illum libero fuga placeat corporis molestias quisquam.</p> <img class ="slide1img" src="http://dummyimage.com/300x150/000/fff&text=slide1" alt=""/>
<br>
Click More
</div>
<div class="cycle-overlay">The Redwoods 1</div>
</div>
<div class="slide2 slide">
<div class = "innerWrapper" data-cycle-title="Spring" data-cycle-desc="Sonnenberg Gardens">
<img class ="slide2img" src="http://dummyimage.com/250x150/000/fff&text=slide2" alt=""/>
<p class ="slide2text">Text for slide 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, molestias incidunt ab voluptatibus id nemo error delectus sunt impedit illum.</p>
</div>
<div class="cycle-caption">Test</div>
<div class="cycle-overlay"></div>
</div>
</div>
Jsfiddle
Thank you for your help in advance.

Remove the "test" text from cycle-caption and put it into cycle-overlay so it is consistant with the other slides. then this javascript should get you started:
$( '.cycle-slideshow' ).on( 'cycle-after', function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
$(incomingSlideEl).find('.cycle-overlay').slideDown();
$(outgoingSlideEl).find('.cycle-overlay').slideUp();
});
you may have to play around with it a bit.
http://jsfiddle.net/w95ya/1/
Check this link to see what events you can listen for: http://jquery.malsup.com/cycle2/api/