We Keep Coding

Accordion using javscript

I'm trying to create an accordion,it is almost fine but what i cant acheive that everytime when i reload the page the first accordion should be open by default.
second is that im using ajax,after ajax what do i need that the same accordion that i click before the ajax accordion also stay open
Now the first accordion is open what i wanna acheive that when i click the second or any other accordion it should close.
const acc_btns = document.querySelectorAll(".accordion-header");
const acc_contents = document.querySelectorAll(".accordion-body");
acc_btns.forEach((btn) => {
btn.addEventListener("click", (e) => {
acc_contents.forEach((acc) => {
if (
e.target.nextElementSibling !== acc &&
acc.classList.contains("active")
) {
acc.classList.remove("active");
acc_btns.forEach((btn) => btn.classList.remove("active"));
}
});
const panel = btn.nextElementSibling;
panel.classList.toggle("active");
btn.classList.toggle("active");
});
});
window.onclick = (e) => {
if (!e.target.matches(".accordion-header")) {
acc_btns.forEach((btn) => btn.classList.remove("active"));
acc_contents.forEach((acc) => acc.classList.remove("active"));
}
};
.accordion {
width: 450px;
margin: 0 auto;
overflow: hidden;
border-radius: 4px;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.accordion-header {
display: flex;
justify-content: space-between;
padding: 0.75rem 1rem;
width: 100%;
background: #1f8dd6;
border: none;
outline: none;
border-bottom: 1px solid #54a0ff;
color: #f3f3f3;
cursor: pointer;
}
.accordion-header.active {
background-color: #1070b1;
}
.accordion-header.active i {
transform: rotate(180deg);
transition: all 0.3s ease-in-out;
}
.accordion-body {
padding: 0 1rem;
background-color: #f3f3f3;
max-height: 0;
overflow: hidden;
transition: all 0.3s ease-in-out;
}
.accordion-body.active {
max-height: 10rem;
padding: 1rem;
}
.accordion-body.open {
max-height: 10rem;
padding: 1rem;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
<div class="accordion">
<div class="accordion-item">
<button class="accordion-header">
<strong>Accordion 1</strong><i class="fas fa-angle-down"></i>
</button>
<div class="accordion-body open">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis atque, voluptates minima quod quisquam et quasi debitis officia non illo harum iure eos reprehenderit quaerat, veritatis asperiores facilis qui neque.
</div>
</div>
<div class="accordion-item">
<button class="accordion-header">
<strong>Accordion 2</strong><i class="fas fa-angle-down"></i>
</button>
<div class="accordion-body">
Dignissimos perspiciatis amet, qui soluta aliquid, ipsa ea alias quidem officiis vel, inventore quod labore aspernatur exercitationem fugit explicabo rerum dolores quo unde assumenda reprehenderit vero temporibus? Magni, nesciunt vero?
</div>
</div>
<div class="accordion-item">
<button class="accordion-header">
<strong>Accordion 3</strong><i class="fas fa-angle-down"></i>
</button>
<div class="accordion-body">
Amet fuga ipsum velit, quae illo doloremque? Id quidem harum placeat porro ipsam, animi voluptatem vel mollitia, quae rerum suscipit modi at consequatur ipsum vitae cum aspernatur itaque non quam?
</div>
</div>
<div class="accordion-item">
<button class="accordion-header">
<strong>Accordion 4</strong><i class="fas fa-angle-down"></i>
</button>
<div class="accordion-body">
Nihil consectetur ipsum nobis eligendi facilis sed corrupti, ab fugit ducimus dolorem rem nulla excepturi impedit sint ea, eveniet provident quos repudiandae a quas reiciendis aut, incidunt corporis? Laboriosam, labore.
</div>
</div>
</div>

Somehow i ll be able to figure it out.
const accordionItemHeaders = document.querySelectorAll(".accordion-item-header");
accordionItemHeaders.forEach(accordionItemHeader => {
accordionItemHeader.addEventListener("click", event => {
// Uncomment in case you only want to allow for the display of only one collapsed item at a time!
const currentlyActiveAccordionItemHeader = document.querySelector(".accordion-item-header.active");
if(currentlyActiveAccordionItemHeader && currentlyActiveAccordionItemHeader!==accordionItemHeader) {
currentlyActiveAccordionItemHeader.classList.toggle("active");
currentlyActiveAccordionItemHeader.nextElementSibling.style.maxHeight = 0;
}
accordionItemHeader.classList.toggle("active");
const accordionItemBody = accordionItemHeader.nextElementSibling;
if(accordionItemHeader.classList.contains("active")) {
accordionItemBody.style.maxHeight = accordionItemBody.scrollHeight + "px";
}
else {
accordionItemBody.style.maxHeight = 0;
}
});
});
accordionItemHeaders[0].click();
#import url('https://fonts.googleapis.com/css?family=Montserrat');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Montserrat', sans-serif;
background-color: #34495e;
color: #fff;
}
h1 {
text-align: center;
margin: 2rem 0;
font-size: 2.5rem;
}
.accordion {
width: 90%;
max-width: 1000px;
margin: 2rem auto;
}
.accordion-item {
background-color: #fff;
color: #111;
margin: 1rem 0;
border-radius: 0.5rem;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.25);
}
.accordion-item-header {
padding: 0.5rem 3rem 0.5rem 1rem;
min-height: 3.5rem;
line-height: 1.25rem;
font-weight: bold;
display: flex;
align-items: center;
position: relative;
cursor: pointer;
}
.accordion-item-header::after {
content: "\002B";
font-size: 2rem;
position: absolute;
right: 1rem;
}
.accordion-item-header.active::after {
content: "\2212";
}
.accordion-item-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.accordion-item-body-content {
padding: 1rem;
line-height: 1.5rem;
border-top: 1px solid;
border-image: linear-gradient(to right, transparent, #34495e, transparent) 1;
}
#media(max-width:767px) {
html {
font-size: 14px;
}
}
<h1>FAQ</h1>
<div class="accordion">
<div class="accordion-item">
<div class="accordion-item-header">
What is Web Development?
</div>
<div class="accordion-item-body">
<div class="accordion-item-body-content">
Web Development broadly refers to the tasks associated with developing functional websites and applications for the Internet. The web development process includes web design, web content development, client-side/server-side scripting and network security configuration, among other tasks.
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-item-header">
What is HTML?
</div>
<div class="accordion-item-body">
<div class="accordion-item-body-content">
HTML, aka HyperText Markup Language, is the dominant markup language for creating websites and anything that can be viewed in a web browser.
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-item-header">
What are some basic technical skills of a Front-End developer?
</div>
<div class="accordion-item-body">
<div class="accordion-item-body-content">
<ul style="padding-left: 1rem;">
<li>HTML, CSS, JavaScript</li>
<li>Frameworks (CSS and JavaScript frameworks)</li>
<li>Responsive Design</li>
<li>Version Control/Git</li>
<li>Testing/Debugging</li>
<li>Browser Developer Tools</li>
<li>Web Performance</li>
<li>SEO (Search Engine Optimization)</li>
<!-- <li>CSS Preprocessing</li> -->
<li>Command Line</li>
<li>CMS (Content Management System)</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-item-header">
What is HTTP?
</div>
<div class="accordion-item-body">
<div class="accordion-item-body-content">
HTTP, aka HyperText Transfer Protocol, is the underlying protocol used by the World Wide Web and this protocol defines how messages are formatted and transmitted, and what actions Web servers and browsers should take in response to various commands.
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-item-header">
What is CORS?
</div>
<div class="accordion-item-body">
<div class="accordion-item-body-content">
CORS, aka Cross-Origin Resource Sharing, is a mechanism that enables many resources (e.g. images, stylesheets, scripts, fonts) on a web page to be requested from another domain outside the domain from which the resource originated.
</div>
</div>
</div>
</div>

How can I change the opacity of my background (which is an image?) [duplicate]

This question already has answers here:
Set opacity of background image without affecting child elements
(15 answers)
Can I set an opacity only to the background image of a div?
(8 answers)
Closed 2 years ago.
How can I change the opacity of my background that's an image?
Below is my code... I could be writing it improperly, I've tried messing around with a pseudo-class but it did not work... Below is my original code. **When I change the opacity for HTML in CSS it makes everything transparent... not just the background... So how can I avoid this?
html {
background-image: url("https://images.unsplash.com/photo-1579954115545-a95591f28bfc?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#title {
text-align: center;
}
#description {
line-height: 1.5;
text-align: center;
}
p {
text-align: center;
}
#name-label {
width: 50px;
display: inline-block;
line-height: 40px
}
#email-label {
width: 50px;
display: inline-block;
line-height: 40px
}
#number-label {
width: 50px;
display: inline-block;
line-height: 40px;
}
#Yes {
text-align:center;
margin: 0px 3px 0px 0px;
}
#No {
text-align:center;
margin: 0px 3px 0px 12px;
}
#Maybe {
text-align:center;
margin: 0px 3px 0px 12px;
}
#Email {
text-align:center;
margin: 0px 3px 0px 0px;
}
#Mail {
text-align:center;
margin: 0px 3px 0px 12px;
}
#Text {
text-align:center;
margin: 0px 3px 0px 12px;
}
html {
background-color: #78C7C7;
}
<html lang="en">
<head>
<title>Smoothie Bar Experience Survey</title>
</head>
<body>
<main>
<h1 id="title">Smoothie Bar experience Survey</h1>
<p id="description">Dear valued Customer, please complete this survey and tell us about your experience at Smoothie Bar. Your feedback will be used to improve our business and environment. Thank you so much!
<form id="survey-form">
<div>
<center>
<label id="name-label"><b> Name</b></label>
<input type="name" id="name" placeholder="Enter your Name..." required>
<center>
</div>
<div>
<center>
<label id="email-label"><b>Email</b></label>
<input type="email" id="email" placeholder="Enter your email..." required>
</center>
</div>
<div>
<center>
<label id="number-label"><b>Age</b></label>
<input type="number" id="number" min="0" max="150" placeholder="Age...">
</center>
</div>
<p><b>Select your favorite smoothie or the smoothie you got</b></p>
<center>
<form>
<select name="Smoothie" id="dropdown">
<option value="" selected disabled hidden id="dropdown">Select Smoothie</option>
<option value="Chocolate">Chocolate</option>
<option value="Raspberry">Raspberry</option>
<option value="Vanilla">Vanilla</option>
<option value="Blueberry">Blueberry</option>
</select>
<p><b>After your experience at Smoothie Bar, would you ever come back?</b></p>
<label for="Yes">
<input id="Yes" type="radio" name="yes-no-maybe" value="Yes"> Yes</label>
<label for="No">
<input id="No" type="radio" name="yes-no-maybe" value="No"> No</label>
<label for="Maybe">
<input id="Maybe" type="radio" name="yes-no-maybe" value="Maybe"> Maybe</label>
<p><b>Tell us your preferred method of communication for events in the future</b></p>
<label for="Email"><input id="Email" value="Email" type="checkbox" name="communication" class="checkbox"> Email</label>
<label for="Mail"><input id="Mail" value="Mail" type="checkbox" name="communication" class="checkbox"> Mail</label>
<label for="Text"><input id="Text" value="Text" type="checkbox" name="communication" class="checkbox"> Text</label>
<p><b>Leave a comment</b></p>
<textarea id="Comments" name="Comments" rows="8" cols="50"></textarea>
<div>
<input type="submit" value="Submit" id="submit">
</center>
</div>
<form action="mailto:dchirila6#gmail.com">
</form>
</select>
</main>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"</script>
</body>
</html>
**
Thank you all!

You would change the opacity of the element containing the background image. Below is an example:
.main-page {
position: relative;
height: 100%;
}
.example-background-image {
position: absolute;
height: 100%;
left: 0;
top: 0;
width: 100%;
opacity: 0.2;
background: url(https://placeimg.com/640/480/arch);
}
<div class="main-page">
<div class="example-background-image"></div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur exercitationem non, recusandae accusantium, tenetur nam laudantium quia dolorem iure aspernatur quasi commodi temporibus impedit sed debitis esse laborum, tempore aut?
Rem asperiores dolore debitis, laudantium, suscipit consequatur neque minima perspiciatis eaque, atque autem odit esse. Necessitatibus est totam mollitia commodi recusandae molestiae nam repellat repellendus, dignissimos possimus, ullam veniam molestias!
Repellat voluptatum veniam nobis at suscipit quos, voluptas, hic tempore autem temporibus, quod minima iure ut animi dicta. Veniam nihil voluptatum quae molestiae, fugiat quia vel quidem eos possimus facere?
Explicabo quo, minus accusamus cum sint odio nemo est. Libero facilis corporis ab odio obcaecati perferendis odit totam maxime adipisci ducimus nisi, aut, ut vel, quod consectetur ea sunt unde.</p>
</div>

Accordion component hide on initial state with CSS + Javascript

So i have been trying to build this accordion component for a review section for a couple of days...I'm really new to javascript and have figured it out mostly except the review section that collapses out is being shown in the initial state so on a page reload you see the section expanded right away, and only is hidden when you click the expand arrow. I would rather it be hidden on the initial state so it only is shown after the user clicks the expand arrow.
I have a div with the class="reviewsHide" as a wrapper and another div with the class="reviewsActive" as a wrapper. Its written in sass and any solution i try to come up with in targeting the wrapper with javascript doesn't apply its children class styles so it ends up not looking right. Inside the main container wrappers i have 3 more container sections each is its own container. with a couple of classes inside each of those containers.
<div class="reviewsHide">
<div class="reviewsActive">
<div class="reviewsActive__top">
<button href="#" class="reviewsActive__top-smallTxt">Write A Review →</button>
<span class="reviewsActive__top-largeTxt">Reviews(10)</span>
<button href="#" class="reviewsActive__top-smallTxt">More Reviews →</button>
</div>
<div class="reviewsActive__bottomL">
<div class="reviewsActive__bottomL-title">
<img class="starSmall"src="img/main/StarRating.svg" alt="Star Rating"> Title
</div>
<p class="reviewsActive__bottomL-reviewP">
&nbsp Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, dolorem quae! Quidem officiis rerum nam, veritatis ullam, placeat est doloremque exercitationem, a quis sequi tempora blanditiis eligendi consequuntur. Ipsam a hic eligendi? Facilis vero fugit omnis ducimus inventore ipsam libero ad expedita numquam, ullam delectus ratione modi, atque esse veritatis.
</p>
</div>
<div class="reviewsActive__bottomR">
<div class="reviewsActive__bottomR-title">
<img class="starSmall"src="img/main/StarRating.svg" alt="Star Rating"> Title
</div>
<p class="reviewsActive__bottomR-reviewP">
&nbsp Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, dolorem quae! Quidem officiis rerum nam, veritatis ullam, placeat est doloremque exercitationem, a quis sequi tempora blanditiis eligendi consequuntur.
</p>
</div>
</div>
</div>
.reviewsHide.show {
height: 15rem;
display: none;
}
.reviewsActive {
display: flex;
flex-direction: row;
flex-wrap: wrap;
background-color: white;
height: 22.5rem;
font-family: 'Montserrat Alternates', sans-serif;
&__top {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
height: 3rem;
width: 100%;
&-smallTxt {
cursor: pointer;
font-size: 1.05rem;
}
&-largeTxt {
font-size: 2rem;
}
}
&__bottomL {
#include reviewsBottom;
margin: auto 1rem .75rem 1rem;
&-title {
#include reviewsTitle;
}
&-reviewP {
#include reviewsParagraph;
}
}
&__bottomR {
#include reviewsBottom;
margin: 1rem 1rem .75rem auto;
&-title {
#include reviewsTitle;
}
&-reviewP {
#include reviewsParagraph;
}
}
}
// Get the button, and when the user clicks on it, execute myFunction
document.querySelector(".span").onclick = function() {myFunction()};
/* myFunction toggles between adding and removing the show class, which is used to hide and show the dropdown content */
function myFunction() {
document.querySelector(".reviewsHide").classList.toggle("show");
/* This selector below is for the arrow animation to rotate on click */
document.querySelector(".span").classList.toggle("spanshow");
}

Re-wrote my javascript to this and its working as intended
const reviewsOpen = () => {
var expandArrow = document.querySelector(".span");
var hide = document.querySelector(".reviewsHide");
expandArrow.addEventListener('click', () => {
hide.classList.toggle("reviewsHide");
expandArrow.classList.toggle("spanshow")
});
}
reviewsOpen();

Text slider increases offset from the left after each iteration

I am basically transferring existing slider from existing site to a new one, and I didn't want to waste additional time by figuring out how to create a text slider from scratch, since the client wants the same thing on his new site.
I found the code and modified it a bit to work on the new site. Except it doesn't really works as it should. The slider looks like this:
var counter = 1;
var total_width = 0;
function slider_total_width() {
$('.items a').each(function() {
total_width += parseInt($(this).width(), 10);
});
$('.items').width(total_width);
}
slider_total_width();
function job_slider(wrapper) {
var first_link = $('#active');
var width = first_link.width();
$(wrapper + ' a').each(function() {
total_width += $(this).width() + 50;
});
first_link.removeAttr('id');
$(wrapper).animate({
left: '-=' + width
}, 1000, function() {
$(first_link).clone().appendTo(wrapper);
$(first_link).css('color', 'transparent');
var links = $(wrapper + ' a');
var new_first_link = links[counter];
counter++;
$(new_first_link).attr('id', 'active');
$(wrapper).width(total_width);
total_width = 0;
});
}
var activate = function() {
job_slider('.items');
};
var interval = setInterval(activate, 5000);
$('.items').hover(function() {
clearInterval(interval);
}, function() {
interval = setInterval(activate, 5000);
});
.container {
margin: 0 auto;
width: 700px;
}
a {
text-decoration: none;
}
#ads_scroller .container {
font-size: 0;
position: relative;
}
#ads_scroller .icon_holder {
display: inline-block;
width: 3%;
margin-top: 8px;
}
#ads_scroller .icon_holder i {
font-size: 22px;
color: #fe9700;
}
#ads_scroller .scroller_container {
display: inline-block;
overflow: hidden;
vertical-align: top;
width: 97%;
height: 31px;
position: relative;
}
#ads_scroller .scroller_container .items {
position: relative;
display: block;
}
#ads_scroller .scrollable_title {
position: relative;
color: #727272;
font-size: 14px;
font-weight: 400;
line-height: 41px;
display: inline;
white-space: nowrap;
padding: 0 0 0 2px;
box-sizing: border-box;
}
#ads_scroller .scrollable_title:last-of-type {
margin-right: 0;
}
#ads_scroller #active.scrollable_title {
color: #1a171b;
}
#ads_scroller .scrollable_title:hover {
color: #555;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div id="ads_scroller">
<div class="container">
<div class="icon_holder"><i class="fa fa-bell-o"></i>
</div>
<div class="scroller_container">
<div class="items" style="width: 2642px;">
Lorem ipsum dolor sit amet –
Consectetur adipisicing elit –
Incidunt tempore explicabo ea autem, eligendi excepturi –
Sapiente sint officiis non minima ex –
Tenetur provident, ipsum dignissimos autem earum nobis dolor –
Obcaecati iste animi cumque culpa –
Vero asperiores illum rerum –
Test to see how announcements look –
</div>
</div>
</div>
</div>
Now I think I know what the issue is, but I don't know how to fix it. For some reason, my .items wrapper, if it doesn't have set width, won't have all the links in one line, so after a while I won't have any links inside to scroll.
Strangely this isn't set on the client side and I couldn't figure out what css rule they used that will allow this (move to left infinitely without width being set). So to circumvent this I'm calculating total width, and then setting it each time the slider clones the element that passed.
But what this does (at least that's my guess) is that after a while the gap between the .items wrapper start on the left (where the icon is), and the link that slides in, becomes progressively bigger. After a minute or so the gap becomes really big.
So is there a way to prevent this? What am I doing wrong here? :\

Hi try this sample i hope it help you
<html>
<head>
<title>Demo Slider</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.1/css/bootstrap.min.css" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<div class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="item active" >
<div class="caption">
Lorem ipsum dolor sit amet –
Consectetur adipisicing elit –
Incidunt tempore explicabo ea autem, eligendi excepturi –
Sapiente sint officiis non minima ex –
Tenetur provident, ipsum dignissimos autem earum nobis dolor –
Obcaecati iste animi cumque culpa –
Vero asperiores illum rerum –
Test to see how announcements look –
</div>
</div>
<div class="item " >
<div class="caption">
Lorem ipsum dolor sit amet –
Consectetur adipisicing elit –
Incidunt tempore explicabo ea autem, eligendi excepturi –
Sapiente sint officiis non minima ex –
Tenetur provident, ipsum dignissimos autem earum nobis dolor –
Obcaecati iste animi cumque culpa –
Vero asperiores illum rerum –
Test to see how announcements look –
</div>
</div>
<div class="item" >
<div class="caption">
Lorem ipsum dolor sit amet –
Consectetur adipisicing elit –
Incidunt tempore explicabo ea autem, eligendi excepturi –
Sapiente sint officiis non minima ex –
Tenetur provident, ipsum dignissimos autem earum nobis dolor –
Obcaecati iste animi cumque culpa –
Vero asperiores illum rerum –
Test to see how announcements look –
</div>
</div>
</div>
</div>
</div>
</body>
</html>

You can try outerwidth() instead of width() as I think the solution is to add +2px to the width which is actually the padding-left of each anchor item.
var counter = 1;
var total_width = 0;
function slider_total_width() {
$('.items a').each(function() {
total_width += parseInt($(this).outerWidth(), 10);
});
$('.items').width(total_width);
}
slider_total_width();
function job_slider(wrapper) {
var first_link = $('#active');
var width = first_link.outerWidth();
$(wrapper + ' a').each(function() {
total_width += $(this).width() + 50;
});
first_link.removeAttr('id');
$(wrapper).animate({
left: '-=' + width
}, 1000, function() {
$(first_link).clone().appendTo(wrapper);
$(first_link).css('color', 'transparent');
var links = $(wrapper + ' a');
var new_first_link = links[counter];
counter++;
$(new_first_link).attr('id', 'active');
$(wrapper).width(total_width);
total_width = 0;
});
}
var activate = function() {
job_slider('.items');
};
var interval = setInterval(activate, 5000);
$('.items').hover(function() {
clearInterval(interval);
}, function() {
interval = setInterval(activate, 5000);
});
.container {
margin: 0 auto;
width: 700px;
}
a {
text-decoration: none;
}
#ads_scroller .container {
font-size: 0;
position: relative;
}
#ads_scroller .icon_holder {
display: inline-block;
width: 3%;
margin-top: 8px;
}
#ads_scroller .icon_holder i {
font-size: 22px;
color: #fe9700;
}
#ads_scroller .scroller_container {
display: inline-block;
overflow: hidden;
vertical-align: top;
width: 97%;
height: 31px;
position: relative;
}
#ads_scroller .scroller_container .items {
position: relative;
display: block;
}
#ads_scroller .scrollable_title {
position: relative;
color: #727272;
font-size: 14px;
font-weight: 400;
line-height: 41px;
display: inline;
white-space: nowrap;
padding: 0 0 0 2px;
box-sizing: border-box;
}
#ads_scroller .scrollable_title:last-of-type {
margin-right: 0;
}
#ads_scroller #active.scrollable_title {
color: #1a171b;
}
#ads_scroller .scrollable_title:hover {
color: #555;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div id="ads_scroller">
<div class="container">
<div class="icon_holder"><i class="fa fa-bell-o"></i>
</div>
<div class="scroller_container">
<div class="items" style="width: 2642px;">
Lorem ipsum dolor sit amet –
Consectetur adipisicing elit –
Incidunt tempore explicabo ea autem, eligendi excepturi –
Sapiente sint officiis non minima ex –
Tenetur provident, ipsum dignissimos autem earum nobis dolor –
Obcaecati iste animi cumque culpa –
Vero asperiores illum rerum –
Test to see how announcements look –
</div>
</div>
</div>
</div>

Collapsing Content - Javascript CSS

I am looking for help in modifying the code I have cobbled together to expand a panel to show full details for an item.
The code works fine for a single element on the page. However, I want to change it so I can have multiple items listed. However, at present when I add additional panels they do not collapse and expand only the first instance works.
I assume I need to adjust the Javascript in some way so it can link to each unique instance.
I know there are existing packages available from jquery and bootstrap but for reasons I won't go into these are difficult for me to implement so I am hoping someone can help me modify this code to work.
window.onload=function(){
var tagList = document.getElementById('tagList')
var style = window.getComputedStyle(tagList)
var display = String(style.getPropertyValue('display'));
tagList.style.display = 'none';
document.getElementById('clearance-item-header').addEventListener('click',function(){
var tagList = document.getElementById('tagList')
var style = window.getComputedStyle(tagList)
var display = String(style.getPropertyValue('display'));
if (display == 'none') {
tagList.style.display = 'inline';
document.getElementById('toggleExpandBtn').textContent = '[-]';
} else {
//style.setProperty('height',lineheight*3+'px');
tagList.style.display = 'none';
document.getElementById('toggleExpandBtn').textContent = '[+]';
}
});
}
<style type='text/css'>
#tagList { overflow: hidden; }
.clearance-item {border:2px solid #C00;border-radius:4px;background: #FFF; padding:10px; width: 675px; margin-left:auto; margin-right:auto; position:relative;}
.clearance-item-image {width:200px; height:100px; float:left; padding-right: 10px;}
.clearance-item-image img {display: block; margin-left: auto; margin-right: auto; height: 100px;}
.clearance-item-title {width:450px; float:left;}
.clearance-item-title h2 {margin-bottom:7px; padding-top: 3px; color:#C00; font-size:24px; font-weight:bold;}
.clearance-item-detail {width:300px; float:left;}
.clearance-item-detail p {margin-bottom:7px; color:#000; font-size:16px; font-weight:bold;}
.clearance-item-price {width:105px; float:left; padding-right: 60px;}
.clearance-item-price > div {margin-bottom:7px; color:#C00; font-size:18px; font-weight:bold; text-align:right;}
#toggleExpandBtn {width: 30px; position:absolute; right: 8px; bottom: 8px; font-size:24px; font-weight:bold; color:#C00; z-index:9999;}
#clearance-item-header {cursor:pointer;}
#buylink {width:250px; position:relative; overflow:hidden; float:right; margin-top: 5px; margin-left: 10px;}
.buylink-product select {max-width:200px !important;}
.clearance-item-content { padding-top:10px; }
.clearance-item-content h3 { margin-bottom:8px; color:#000; font-size:16px; font-weight:bold;}
.clearance-item-content p { margin-bottom:6px; text-align:justify; }
</style>
<div class="clearance-item">
<div id="clearance-item-header">
<div class="clearance-item-image">
<img src="images/clearance-item.jpg" width="100" height="100" />
</div>
<div class="clearance-item-title">
<h2>Product Full Title</h2>
</div>
<div class="clearance-item-detail">
<p>Condition: New/Used/Other</p>
<p>Location: Brighton</p>
</div>
<div class="clearance-item-price">
<p>£999.99</p>
</div>
<div id="toggleExpandBtn">[+]</div>
<div style="clear:both;"></div>
</div>
<div id='tagList'>
<div class="clearance-item-content">
<h3>Product Name</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</div>
<div style="clear:both;"></div>
</div>
</div>

OK. Figured it out. Changed the styling id's to classes and got the javascript to dynamically assign unique id's to each instance as well as adding click event to the header div. Then used this.getAttribute("id") to get the id of the instance of the header that was clicked. Used that to set display to inline or none for the associated content.
window.onload=function(){
var headerclassname = document.getElementsByClassName("item-header");
for(var i=0;i<headerclassname.length;i++){
headerclassname[i].addEventListener('click', toggleContent, false);
headerclassname[i].id = 'item-header-' + i;
}
var contentclassname = document.getElementsByClassName("item-content");
for(var x=0;x<contentclassname.length;x++){
contentclassname[x].style.display = 'none';
contentclassname[x].id = 'item-content-' + x;
}
var toggleclassname = document.getElementsByClassName("item-toggle");
for(var y=0;y<contentclassname.length;y++){
toggleclassname[y].id = 'item-toggle-' + y;
}
}
var toggleContent = function() {
var headerid = this.getAttribute("id");
var contentid = headerid.replace("item-header-", "item-content-");
var toggleid = headerid.replace("item-header-", "item-toggle-");
var displayvalue = document.getElementById(contentid).style.display;
if (displayvalue == 'none') {
document.getElementById(contentid).style.display = 'inline';
document.getElementById(toggleid).textContent = '[-]';
} else {
document.getElementById(contentid).style.display = 'none';
document.getElementById(toggleid).textContent = '[+]';
}
}
<style type='text/css'>
.item-content { overflow: hidden; }
.item {border:2px solid #C00;border-radius:4px;background: #FFF; padding:10px; width: 675px; margin-left:auto; margin-right:auto; position:relative;}
.item-image {width:200px; height:100px; float:left; padding-right: 10px;}
.item-image img {display: block; margin-left: auto; margin-right: auto; height: 100px;}
.item-title {width:450px; float:left;}
.item-title h2 {margin-bottom:7px; padding-top: 3px; color:#C00; font-size:24px; font-weight:bold;}
.item-detail {width:300px; float:left;}
.item-detail p {margin-bottom:7px; color:#000; font-size:16px; font-weight:bold;}
.item-price {width:105px; float:left; padding-right: 60px;}
.item-price > div {margin-bottom:7px; color:#C00; font-size:18px; font-weight:bold; text-align:right;}
.item-toggle {width: 30px; position:absolute; right: 8px; bottom: 8px; font-size:24px; font-weight:bold; color:#C00; z-index:9999;}
.item-header {cursor:pointer;}
#buylink {width:250px; position:relative; overflow:hidden; float:right; margin-top: 5px; margin-left: 10px;}
.buylink-product select {max-width:200px !important;}
.item-description { padding-top:10px; }
.item-description h3 { margin-bottom:8px; color:#000; font-size:16px; font-weight:bold;}
.item-description p { margin-bottom:6px; text-align:justify; }
</style>
<div class="item">
<div class="item-header">
<div class="item-image">
<img src="image.jpg" width="100" height="100" />
</div>
<div class="item-title">
<h2>Item Title Here</h2>
</div>
<div class="item-detail">
<p>Condition: New</p>
<p>Location: Brighton</p>
</div>
<div class="item-price">
<p>£100.00</p>
</div>
<div class="item-toggle">[+]</div>
<div style="clear:both;"></div>
</div>
<div class="item-content">
<div id="buylink">
<?PHP processWebCodes("Type: BuyLink
Layout: Combined
Product: 1200811
1200811-AllVariants: True");?>
</div>
<div class="item-description">
<h3>Sub Title Here</h3>
<p>Detailed Description Here</p>
<p> </p>
</div>
<div style="clear:both;"></div>
</div>
</div>

You say
at present when I add additional panels they do not collapse and expand only the first instance works
Could you provide some code with an additional panel? Without seeing your code it is difficult to tell, although I would suggest you make sure that each of the panels and buttons has unique ids. Otherwise, you would get the result you are experiencing from js.