Testimonial slider with object constructor - javascript

I would like to have the first testimonial shown when you land on the page without hard coding it in the html. I want the page to land on the first customers object when run.
When this loops over the customers object it doesn't include the hard coded html elements. So I would like it to just have the object constructed shown when the code is run. Obviously I am having trouble forming this question and therefore finding a solution.
(function(){
const customerImage = document.querySelector('#customer-img')
const customerName = document.querySelector('#customer-name')
const customerText = document.querySelector('#customer-text')
const buttons = document.querySelectorAll('.btn')
let index = 0
const customers = []
//Create a new customer using a customer constructor
//Customer Constructor
function Customer(img, name, text) {
this.img = img
this.name = name
this.text = text
}
//Create new customer using the constructor function
function createCustomer(img, name, text) {
let fullImg = `./img/customer-${img}.jpg`
let customer = new Customer(fullImg, name, text)
customers.push(customer)
}
createCustomer(0, 'John', 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis neque reprehenderit laborum, corporis explicabo assumenda. Porro impedit consectetur animi, reprehenderit recusandae sapiente at aliquam reiciendis modi ipsam rerum suscipit distinctio?')
createCustomer(1, 'Sandy', 'Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock')
createCustomer(2, 'Amy', 'There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don\'t look even slightly believable.')
createCustomer(3, 'Tyrell', 'If you are going to use a passage of Lorem Ipsum, you need to be sure there isn\'t anything embarrassing hidden in the middle of text.')
createCustomer(4, 'Wanda', 'Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.')
buttons.forEach(function(button){
button.addEventListener('click', function(e){
if (e.target.parentElement.classList.contains('prevBtn')){
if(index === 0){
index = customers.length
}
index--
customerImage.src = customers[index].img
customerName.textContent = customers[index].name
customerText.textContent = customers[index].text
}
if (e.target.parentElement.classList.contains('nextBtn')){
index++
if(index === customers.length){
index = 0
}
customerImage.src = customers[index].img
customerName.textContent = customers[index].name
customerText.textContent = customers[index].text
}
})
})
})()
.max-height{
min-height: 100vh;
background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)) ,url('../img/questionBcg.jpeg')center/cover no-repeat fixed;
}
.title-heading{
color:#f15025;
}
.title-subheading{
color: white;
}
.customer-card{
background: transparent!important;
color:white;
border:0.05rem solid white;
padding-bottom: 1rem;
padding-left: 1rem;
padding-right: 1rem;
position: relative;
}
.img-card{
border-radius: 50%;
margin-bottom: 1rem;
margin-top: -3rem;
}
.star-icon{
color: #f15025;
}
.quote-icon{
font-size: 2rem;
color: #f15025;
}
.prevBtn,.nextBtn{
font-size: 1.5rem;
padding: 0.1rem;
color:#f15025;
border:0.1rem solid #f15025;
display: inline-block;
position: absolute;
padding: 0.4rem;
border-radius: 50%;
transition: all 1s ease-in-out;
}
.prevBtn:hover{
background: #f15025;
color: white;
}
.nextBtn:hover{
background: #f15025;
color: white;
}
.prevBtn{
top: 50%;
left: 0;
transform: translate(-120%,-50%);
}
.nextBtn{
top: 50%;
right: 0;
transform: translate(120%,-50%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- bootstrap css -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- main css -->
<link rel="stylesheet" href="css/main.css">
<!-- google fonts -->
<link href="https://fonts.googleapis.com/css?family=Courgette" rel="stylesheet">
<!-- font awesome -->
<script src="js/all.js"></script>
<title>Starter Template</title>
<style>
</style>
</head>
<body>
<div class="container-fluid">
<div class="row max-height align-items-center">
<!-- col -->
<div class="col-10 mx-auto col-md-6">
<div class="row">
<div class="col text-center my-5">
<h4 class="title-heading text-uppercase">client</h4>
<h1 class="title-subheading text-uppercase">testimonials</h1>
</div>
</div>
<div class="card my-5 text-center customer-card ">
<img src="img/customer-0.jpg" width="150" id="customer-img" class="img-card mx-auto" alt="">
<h4 id="customer-name" class="text-uppercase">John</h4>
<div class="review-icons my-2">
<span class="star-icon">
<i class="fas fa-star"></i>
</span>
<span class="star-icon">
<i class="fas fa-star"></i>
</span>
<span class="star-icon">
<i class="fas fa-star"></i>
</span>
<span class="star-icon">
<i class="fas fa-star"></i>
</span>
<span class="star-icon">
<i class="fas fa-star-half"></i>
</span>
</div>
<p id="customer-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis neque reprehenderit laborum, corporis explicabo assumenda. Porro impedit consectetur animi, reprehenderit recusandae sapiente at aliquam reiciendis modi ipsam rerum suscipit distinctio?</p>
<span class="quote-icon">
<i class="fas fa-quote-left"></i>
</span>
<i class="fas fa-chevron-left"></i>
<i class="fas fa-chevron-right"></i>
</div>
</div>
<!-- end of col -->
</div>
</div>

I put this iffe function at the beginning to fix this problem.
(function(){
var img = document.getElementById('customer-img').src = 'img/customer-0.jpg';
var name = document.getElementById("customer-name")
name.innerHTML = "John";
var text = document.getElementById("customer-text")
text.innerHTML = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis neque reprehenderit laborum, corporis explicabo assumenda. Porro impedit consectetur animi, reprehenderit recusandae sapiente at aliquam reiciendis modi ipsam rerum suscipit distinctio?";
})();

Related

How to open specific accordian tab from url

I would like to open specific accordian tab as per the link so if my url have http://test.com/test.aspx#tab3 it should open tab 3 and if load same page it should open default active tab so want to make my tab active as per url below is the example code
It work set active tab in css but now want to set as per url
Trying this line of code inside fucntion call to make it active but not working as expected it does not add css class
var url = "http://test.com/test.aspx#tab3";
var activeTab = url.substring(url.indexOf("#") + 1);
$(".tab-pane").removeClass("active");
$("#" + activeTab).addClass("active ");
$('a[href="#'+ activeTab +'"]').tab('show')
below is the full example code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!--<link rel='stylesheet prefetch' href='https://files.krve.io/f/eyespot.css'>-->
<link rel='stylesheet prefetch'
href='https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/5.6.55/css/materialdesignicons.min.css'>
<style type="text/css">
body {
margin-top: 30px;
background-color: #eee;
}
.list-group.help-group {
margin-bottom: 20px;
padding-left: 0;
margin: 0;
}
.list-group.help-group .faq-list {
display: block;
top: auto;
margin: 0 0 32px;
border-radius: 2px;
border: 1px solid #ddd;
box-shadow: 0 1px 5px rgba(85, 85, 85, 0.15);
}
.list-group.help-group .faq-list .list-group-item {
position: relative;
display: block;
margin: 0;
padding: 13px 16px;
background-color: #fff;
border: 0;
border-bottom: 1px solid #ddd;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
color: #616161;
transition: background-color .2s;
}
.list-group.help-group .faq-list .list-group-item i.mdi
{
margin-right: 5px;
font-size: 18px;
position: relative;
top: 2px;
}
.list-group.help-group .faq-list .list-group-item:hover
{
background-color: #f6f6f6;
}
.list-group.help-group .faq-list .list-group-item.active
{
background-color: #f6f6f6;
font-weight: 700;
color: rgba(0, 0, 0, 0.87);
}
.list-group.help-group .faq-list .list-group-item:last-of-type
{
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
border-bottom: 0;
}
.tab-content.panels-faq {
padding: 0;
border: 0;
}
.panel.panel-help {
box-shadow: 0 1px 5px rgba(85, 85, 85, 0.15);
padding-bottom: 0;
border-radius: 2px;
overflow: hidden;
background-color: #fff;
margin: 0 0 16px;
}
.panel.panel-help a[href^="#"],
.panel.panel-help a[href^="#"]:hover,
.panel.panel-help a[href^="#"]:focus {
outline: none;
cursor: pointer;
text-decoration: none;
}
.panel.panel-help .panel-heading {
background-color: #f6f6f6;
padding: 0 16px;
line-height: 48px;
border-top-right-radius: 2px;
border-top-left-radius: 2px;
color: rgba(0, 0, 0, 0.87);
}
.panel.panel-help .panel-heading h2 {
margin: 0;
padding: 14px 0 14px;
font-size: 18px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0;
text-transform: none;
}
.panel.panel-help .panel-body {
background-color: #fff;
border-top: 1px solid #ddd;
border-radius: 2px;
border-top-right-radius: 0;
border-top-left-radius: 0;
margin-top: 0;
}
.panel.panel-help .panel-body p {
margin: 0 0 16px;
}
.panel.panel-help .panel-body p:last-of-type {
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="col-md-4">
<ul class="list-group help-group">
<div class="faq-list list-group nav nav-tabs">
<a href="#tab1" class="list-group-item active" role="tab" data-toggle="tab"> General Help (Power
Apps/Automate)</a>
<a href="#tab2" class="list-group-item" role="tab" data-toggle="tab"><i class="mdi mdi-account"></i>
Environment</a>
<a href="#tab3" class="list-group-item" role="tab" data-toggle="tab"><i class="mdi mdi-account-settings"></i>
Mobile</a>
<a href="#tab4" class="list-group-item" role="tab" data-toggle="tab"><i class="mdi mdi-star"></i>
Maintainability</a>
<i class="mdi mdi-cart"></i> Errors
<!--<i class="mdi mdi-heart"></i> Lorem ipsum
<i class="mdi mdi-check"></i> Dolor sit amet-->
</div>
</ul>
</div>
<div class="col-md-8" >
<div class="tab-content panels-faq">
<div class="tab-pane active" id="tab1">
<div class="panel-group" id="help-accordion-1">
<div class="panel panel-default panel-help">
<a href="#opret-produkt" data-toggle="collapse" data-parent="#help-accordion-1">
<div class="panel-heading">
<h2>How do I edit my profile?</h2>
</div>
</a>
<div id="opret-produkt" class="collapse in">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus nesciunt ut officiis
accusantium quisquam minima praesentium, beatae fugit illo nobis fugiat adipisci quia distinctio
repellat culpa saepe, optio aperiam est!</p>
<p><strong>Example: </strong>Facere, id excepturi iusto aliquid beatae delectus nemo enim, ad saepe
nam et.</p>
</div>
</div>
</div>
<div class="panel panel-default panel-help">
<a href="#rediger-produkt" data-toggle="collapse" data-parent="#help-accordion-1">
<div class="panel-heading">
<h2>How do I upload a new profile picture?</h2>
</div>
</a>
<div id="rediger-produkt" class="collapse">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus nesciunt ut officiis
accusantium quisquam minima praesentium, beatae fugit illo nobis fugiat adipisci quia distinctio
repellat culpa saepe, optio aperiam est!</p>
<p><strong>Example: </strong>Facere, id excepturi iusto aliquid beatae delectus nemo enim, ad saepe
nam et.</p>
</div>
</div>
</div>
<div class="panel panel-default panel-help">
<a href="#ret-pris" data-toggle="collapse" data-parent="#help-accordion-1">
<div class="panel-heading">
<h2>Can I change my phone number?</h2>
</div>
</a>
<div id="ret-pris" class="collapse">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus nesciunt ut officiis
accusantium quisquam minima praesentium, beatae fugit illo nobis fugiat adipisci quia distinctio
repellat culpa saepe, optio aperiam est!</p>
<p><strong>Example: </strong>Facere, id excepturi iusto aliquid beatae delectus nemo enim, ad saepe
nam et.</p>
</div>
</div>
</div>
<div class="panel panel-default panel-help">
<a href="#slet-produkt" data-toggle="collapse" data-parent="#help-accordion-1">
<div class="panel-heading">
<h2>Where do I change my privacy settings?</h2>
</div>
</a>
<div id="slet-produkt" class="collapse">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus nesciunt ut officiis
accusantium quisquam minima praesentium, beatae fugit illo nobis fugiat adipisci quia distinctio
repellat culpa saepe, optio aperiam est!</p>
<p><strong>Example: </strong>Facere, id excepturi iusto aliquid beatae delectus nemo enim, ad saepe
nam et.</p>
</div>
</div>
</div>
<div class="panel panel-default panel-help">
<a href="#opret-kampagne" data-toggle="collapse" data-parent="#help-accordion-1">
<div class="panel-heading">
<h2>What is this?</h2>
</div>
</a>
<div id="opret-kampagne" class="collapse">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus nesciunt ut officiis
accusantium quisquam minima praesentium, beatae fugit illo nobis fugiat adipisci quia distinctio
repellat culpa saepe, optio aperiam est!</p>
<p><strong>Example: </strong>Facere, id excepturi iusto aliquid beatae delectus nemo enim, ad saepe
nam et.</p>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab2">
<div class="panel-group" id="help-accordion-2">
<div class="panel panel-default panel-help" id="mainDiv">
<a href="#help-three" data-toggle="collapse" data-parent="#help-accordion-2">
<div class="panel-heading" id="questionDiv">
</div>
</a>
<div id="help-three" class="collapse in">
<div class="panel-body" id="divResults">
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab3">
<div class="panel-group" id="help-accordion-2">
<div class="panel panel-default panel-help">
<a href="#help-three" data-toggle="collapse" data-parent="#help-accordion-2">
<div class="panel-heading">
<h2>wuhu</h2>
</div>
</a>
<div id="help-three" class="collapse in">
<div class="panel-body">
<p>test</p>
<p><strong>Example: </strong>Facere, id excepturi iusto aliquid beatae delectus nemo enim, ad saepe
nam et.</p>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab4">
<div class="panel-group" id="help-accordion-2">
<div class="panel panel-default panel-help">
<a href="#help-three" data-toggle="collapse" data-parent="#help-accordion-2">
<div class="panel-heading">
<h2>wuhu</h2>
</div>
</a>
<div id="help-three" class="collapse in">
<div class="panel-body" >
some value
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
<script>
// JavaScript Code
$(function () {
// Since there's no list-group/tab integration in Bootstrap
$('.list-group-item').on('click', function (e) {
var previous = $(this).closest(".list-group").children(".active");
previous.removeClass('active'); // previous list-item
getListData();
$(e.target).addClass('active'); // activated list-item
});
});
function getListData() {
console.log('22222');
var fullUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('Cities')/items";
console.log(fullUrl);
$.ajax({
url: fullUrl,
type: "GET",
headers: {
"accept": "application/json;odata=verbose",
"content-type": "application/json;odata=verbose",
},
success: onQuerySucceeded,
error: onQueryFailed
});
}
function onQuerySucceeded(data) {
var listItemInfo = " ";
$.each(data.d.results, function (key, value) {
listItemInfo += '<b>A):</b> ' + value.test;
console.log('Answer--', listItemInfo);
});
$("#divResults").html(listItemInfo);
var divInfo = " ";
$.each(data.d.results, function (key, value) {
divInfo += '<b>A):</b> ' + value.test;
console.log('Answer--', divInfo);
});
$("#divResults").html(divInfo);
var questionData = " ";
$.each(data.d.results, function (key, value) {
questionData += '<b>Q)</b> ' + value.Title;
console.log('Question---', questionData);
});
$("#questionDiv").html(questionData);
}
function onQueryFailed() {
alert('Error!');
}
</script>
</body>
</html>

Image Slider using HTML and Javascript

So I was trying to create a image slider using the below code snippets, for a static website and was running it on VScodes Live Server and the Javascript didn't seem to apply to the page. pls help And I would like to add to add a simple fade and appear transition to the image slide as well, so pls answer this too ^_^
And pls don't answer with the bootstrap solution I looked it up and its not I m looking for :p
let images = ['camp1.png', 'camp2.png', 'camp3.png'];
let slide = document.getElementById('slider');
const slider = setTimeout(function(){
for( let i=0;i<=images.length;i++){
slide.src = images[i];
if (i == images.length){
i=0;
}
console.log(i);
}
}, 2000);
slide.addEventListener('load',slider);
#import url('https://fonts.googleapis.com/css2?family=Exo+2:wght#100&family=Exo:ital,wght#1,900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght#1,900&display=swap');
.about {
padding: 2rem 0rem;
}
.upper, .lower {
display: flex;
flex-direction: row;
justify-content: space-evenly;
margin-bottom: 2rem;
}
.logo {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#logo{
width: 70%;
}
.image {
background-image: url(scene.gif);
background-size: cover;
width: 36rem;
height: 28rem;
display: flex;
align-items: center;
border-radius: 50%;
border: 3px solid #000;
}
.camp {
position: relative;
top: 2.6rem;
left: 7.3rem;
}
#tent {
width: 30%;
}
#fire {
width: 15%;
position: relative;
top: 1rem;
right: 1rem;
}
.info{
width: 23%;
display: flex;
flex-direction: column;
text-align: center;
padding: 0rem 2rem 2rem 2rem;
margin-top: 4.5rem;
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.info:hover{
transform: scale(1.1);
}
.info h1{
font-family: 'Exo', sans-serif;
font-size: 3rem;
font-weight: black 900;
}
.head1{
text-decoration: white;
}
.info p{
font-family: 'Exo 2', sans-serif;
font-size: 1.5rem;
font-weight: bold;
}
.slider{
display: flex;
align-items: center;
padding-top: 3.5rem;
}
.slider img{
width: 36rem;
height: 28rem;
border-radius: 50%;
border: 3px solid #000;
}
<!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="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="stylesheet" href="about.css" />
<title>About Us</title>
</head>
<body>
<div class="about">
<!-- ------------------------------------ -->
<div class="upper">
<div class="logo">
<img src="logo.gif" alt="" id="logo" />
<div class="image">
<div class="camp">
<img src="tent.png" alt="" id="tent" />
<img src="fire.gif" alt="" id="fire" />
</div>
</div>
</div>
<div class="info">
<h1>ABOUT<br>YELPCAMP</h1>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Neque
nostrum excepturi unde eveniet delectus? Porro esse laudantium hic
ipsam sed inventore, aliquid quidem tempora rem harum quasi quia
corrupti dignissimos?
</p>
</div>
</div>
<!-- ------------------------------------ -->
<div class="lower">
<div class="info">
<h1>ABOUT<br>OUR TEAM</h1>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Neque
nostrum excepturi unde eveniet delectus? Porro esse laudantium hic
ipsam sed inventore, aliquid quidem tempora rem harum quasi quia
corrupti dignissimos?
</p>
</div>
<div class="slider">
<img src="camp1.png" alt="" id="slider"/>
</div>
</div>
<!-- ------------------------------------ -->
</div>
</body>
<script src="about.js"></script>
</html>
So I was trying to create a image slider using the below code snippets, for a static website and was running it on VScodes Live Server and the Javascript didn't seem to apply to the page.
pls help
And I would like to add to add a simple fade and appear transition to the image slide as well, so pls answer this too ^_^
And pls don't answer with the bootstrap solution I looked it up and its not I m looking for :p
let images = ['camp1.png', 'camp2.png', 'camp3.png'];
let slide = document.getElementById('slider');
const slider = setTimeout(function(){
for( let i=0;i<=images.lenght;i++){
slide.src = images[i];
if (i == images.lenght){
i=0;
}
console.log(i);
}
}, 2000);
slide.addEventListener('load',slider());
<div class="lower">
<div class="info">
<h1>ABOUT<br>OUR TEAM</h1>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Neque
nostrum excepturi unde eveniet delectus? Porro esse laudantium hic
ipsam sed inventore, aliquid quidem tempora rem harum quasi quia
corrupti dignissimos?
</p>
</div>
<div class="slider">
<img src="camp1.png" alt="" id="slider"/>
</div>
</div>
<!-- ------------------------------------ -->
</div>
</body>
<script src="about.js"></script>
I think you'd better use setInterval than setTimeout for an automatic slider :)
let images = ['https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/PNG_transparency_demonstration_1.png/260px-PNG_transparency_demonstration_1.png', 'https://static4.depositphotos.com/1006994/298/v/950/depositphotos_2983099-stock-illustration-grunge-design.jpg', 'http://duduf.com/duf/wp-content/uploads/2015/08/Ducati_side_shadow.png'];
let slide = document.getElementById('slider');
const slider = () => {
let i = 0;
setInterval(
function() {
i = i < images.length - 1 ? ++i : 0;
slide.src = images[i];
console.log(i);
}, 2000);
}
slide.addEventListener('load', slider());
<div class="lower">
<div class="info">
<h1>ABOUT<br>OUR TEAM</h1>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Neque
nostrum excepturi unde eveniet delectus? Porro esse laudantium hic
ipsam sed inventore, aliquid quidem tempora rem harum quasi quia
corrupti dignissimos?
</p>
</div>
<div class="slidercont">
<img src="" alt="" id="slider" />
</div>
</div>

How can we convert an simple accordian to angular?

How can we convert this simple accordian to angular way? I tried with viewchildren with querylist in angular. Please provide your suggestion.
var accordions = document.getElementsByClassName("accordion");
for (var i = 0; i < accordions.length; i++) {
accordions[i].onclick = function () {
this.classList.toggle('is-open');
var content = this.nextElementSibling;
if (content.style.maxHeight) {
// accordion is currently open, so close it
content.style.maxHeight = null;
} else {
// accordion is currently closed, so open it
content.style.maxHeight = content.scrollHeight + "px";
}
}
}
.container {
width: 80%;
max-width: 600px;
margin: 50px auto;
}
button.accordion {
width: 100%;
background-color: whitesmoke;
border: none;
outline: none;
text-align: left;
padding: 15px 20px;
font-size: 18px;
color: #444;
cursor: pointer;
transition: background-color 0.2s linear;
}
button.accordion:after {
content: "\f055";
font-family: "fontawesome";
font-size: 14px;
float: right;
}
button.accordion.is-open:after {
content: "\f056";
}
button.accordion:hover,
button.accordion.is-open {
background-color: #ddd;
}
.accordion-content {
background-color: white;
border-left: 1px solid whitesmoke;
border-right: 1px solid whitesmoke;
padding: 0 20px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-in-out;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Simple accordion</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- content starts here -->
<div class="container">
<h1>Accordions</h1>
<button class="accordion">Accordian #1</button>
<div class="accordion-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo,
ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum?
</p>
</div>
<button class="accordion">Accordian #2</button>
<div class="accordion-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo,
ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum?
</p>
</div>
<button class="accordion">Accordian #3</button>
<div class="accordion-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo,
ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum?
</p>
</div>
</div>
<!-- contend ends here -->
<script src="index.js"></script>
</body>
</html>
You need copy HTML to HTML file component in angular, CSS to CSS component
And click event you can create directive for this case
HTML
<button accordion class="accordion">Accordian #1</button>
TS
#Directive({ selector: '[accordion]' })
export class AccordionDirective {
constructor(private el: ElementRef, private renderer: Renderer) {
}
#HostListener('click', ['$event']) onClick($event) {
console.info($event);
this.el.nativeElement.classList.toggle('is-open');
var content = this.el.nativeElement.nextElementSibling;
if (content.style.maxHeight) {
// accordion is currently open, so close it
content.style.maxHeight = null;
} else {
// accordion is currently closed, so open it
content.style.maxHeight = content.scrollHeight + "px";
}
}
}
https://stackblitz.com/edit/angular-directive-accordion?file=src/app/app.component.ts
Your question is just one liner with jsfiddle only using jquery and js, still i will try to explain you answer in detail in Angular but next time try to post your question in detail.
For better understanding go to this link - https://material.angular.io/components/expansion/api
import {Component} from '#angular/core';
/**
* #title Basic expansion panel
*/
#Component({
selector: 'expansion-overview-example',
templateUrl: 'expansion-overview-example.html',
styleUrls: ['expansion-overview-example.css'],
})
export class ExpansionOverviewExample {
panelOpenState = false;
}
<mat-accordion>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
Personal data
</mat-panel-title>
<mat-panel-description>
Type your name and age
</mat-panel-description>
</mat-expansion-panel-header>
<mat-form-field>
<input matInput placeholder="First name">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Age">
</mat-form-field>
</mat-expansion-panel>
<mat-expansion-panel (opened)="panelOpenState = true"
(closed)="panelOpenState = false">
<mat-expansion-panel-header>
<mat-panel-title>
Self aware panel
</mat-panel-title>
<mat-panel-description>
Currently I am {{panelOpenState ? 'open' : 'closed'}}
</mat-panel-description>
</mat-expansion-panel-header>
<p>I'm visible because I am open</p>
</mat-expansion-panel>
</mat-accordion>
Also import below one in your module-
import {MatExpansionModule} from '#angular/material/expansion';

How to set collapse on all other divs when one div is open?

I have seen many questions but none are similar to my case. I have bootstrap collapse and show for a few div contents. The div content shows when title is clicked. I want to close all other div contents when I click another content's title.
The color of the title div is gray and should change to white when its content shows. Once the content is collapsed, title div color should back to gray.
Here's my code:
function collapse (e, id, collapasibleName) {
var toggleColor = document.getElementById(id);
var collapsibles = document.getElementById(collapasibleName);
if(collapsibles.className == 'home__questions-content collapse' || collapsibles.className == 'home__questions-content collapsed')
{
alert("Sdfsdfdsf")
toggleColor.classList.remove('home__questions-title-show');
}
if(collapsibles.className == 'home__questions-content collapse show') {
alert("in show")
toggleColor.classList.add('home__questions-title-show');
}
}
.home__more-questions-content {
padding-right: 40px;
padding-left:40px;
padding-bottom: 20px;
background-color: $white-color;
position:relative;
max-width: 1080px;
margin: auto;
}
.home__questions-content-tile {
margin-bottom: 10px;
border:1px solid #eee;
}
.home__questions-content-title {
padding:20px;
background-color: #000
cursor: pointer;
}
.home__questions-content {
padding-top: 0;
padding-right:20px;
padding-left:20px;
padding-bottom:20px;
}
.home__questions-title-show { background-color: #fff; }
.collapse {
display:none;
}
.collapse.show {
display: block;
}
.collapsing {
position: relative;
height: 0;
overflow: hidden;
transition: height 0.35s ease;
}
<div class="home__more-questions-content" id="accordion">
<div class="home__questions-content-tile">
<div class="home__questions-content-title" data-toggle="collapse" data-target="#collapsible-one" data-parent="#accordion" id="collapse-one" onclick="collapse(event, this.id,'collapsible-one');">
<h2>
// title 1 here
</h2>
</div>
<div class="home__questions-content collapse" id="collapsible-one">
//title 1's content here
</div>
</div>
<div class="home__questions-content-tile">
<div class="home__questions-content-title" data-toggle="collapse" data-target="#collapsible-two" data-parent="#accordion" id="collapse-two" onclick="collapse(event, this.id,'collapsible-two');">
<h2>
//title 2
</h2>
</div>
<div class="home__questions-content collapse" id="collapsible-two">
//title 2's content here
</div>
</div>
<div class="home__questions-content-tile">
<div class="home__questions-content-title" data-toggle="collapse" data-target="#collapsible-three" data-parent="#accordion" id="collapse-three" onclick="collapse(event, this.id, 'collapsible-three');">
<h2>
//title 3
</h2>
</div>
<div class="home__questions-content collapse" id="collapsible-three">
// title 3's content here
</div>
</div>
</div>
Here is the code, explanation is in the comment of the question.
Add new code
if (e.target.parentNode.classList.contains('active')) {
e.target.parentNode.classList.remove('active')
return
}
If current block is opened, then close it and return from further processing.
const container = document.querySelector('.container')
container.addEventListener('click', e => {
if (e.target.parentNode.classList.contains('active')) {
e.target.parentNode.classList.remove('active')
return
}
const collapsable = document.querySelectorAll('.item')
Array.prototype.forEach.call(collapsable, el => {
el.classList.remove('active')
})
e.target.parentNode.classList.add('active')
})
.container {
width: 500px;
margin: 0 auto;
color:darkslategrey;
}
.item {
margin: 10px 0;
border-bottom: 1px solid #666;
padding: 5px 10px;
}
.item.active h3 {
color:aquamarine;
}
p {
overflow: hidden;
transition: height .5s ease;
height: 0px;
}
.item.active p {
height: 80px;
}
<div class="container">
<div class="item active">
<h3>I am a title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni minus neque nisi, rem doloribus unde quisquam, similique distinctio voluptate mollitia praesentium quo ut magnam ducimus nemo vitae soluta impedit harum?</p>
</div>
<div class="item">
<h3>I am a title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni minus neque nisi, rem doloribus unde quisquam, similique distinctio voluptate mollitia praesentium quo ut magnam ducimus nemo vitae soluta impedit harum?</p>
</div>
<div class="item">
<h3>I am a title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni minus neque nisi, rem doloribus unde quisquam, similique distinctio voluptate mollitia praesentium quo ut magnam ducimus nemo vitae soluta impedit harum?</p>
</div>
</div>

How do I make the box below move ( accordion )

Didn't really know how to explain my problem in the title, my question is how do I make it so when I press the top box the other two boxes move down so you can see the text? The same goes for the other two boxes, if I press the middle the last box moves and when I press the last one the top and the middle stays. Plus the boxes has to go back to it's original place. Please I need help with this
$(".faq,.faq2,.faq3").click(function() {
$(this).find(".faq-box-more").toggleClass("open");
$(".faq,.faq2,.faq3").not(this).find(".faq-box-more").removeClass("open");
});
.faq,
.faq2,
.faq3 {
height: 100px;
width: 500px;
background: red;
position: relative;
top: 100px;
left: 50%;
transform: translate(-50%, 0%);
}
.faq-box {
position: relative;
height: 100%;
width: 100%;
background: #333;
cursor: pointer;
padding: 0 20px;
}
.faq-box h2 {
position: absolute;
top: 50%;
transform: translate(0, -50%);
color: #fff;
text-transform: uppercase;
letter-spacing: 3px;
font-size: 1.9rem;
}
.faq-box i {
position: absolute;
left: 96%;
top: 50%;
font-size: 3rem;
transform: translate(-100%, -50%);
color: #fff;
}
.faq-box-more {
position: absolute;
height: 0%;
top: 100%;
background-color: #222;
color: #fff;
width: 100%;
}
.faq-box-more p {
position: absolute;
width: 100%;
padding: 20px;
}
.open {
height: 140% !important;
}
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<div class="faq">
<div class="faq-box">
<h2>lorem ipsum</h2>
<i class="ion-ios-arrow-down"></i>
</div>
<div class="faq-box-more">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur numquam, atque nemo pariatur maiores eos harum, ab magni nisi quod, commodi ipsum totam vel nihil voluptatum vitae quisquam, qui amet!</p>
</div>
</div>
<div class="faq2">
<div class="faq-box">
<h2>lorem ipsum</h2>
<i class="ion-ios-arrow-down"></i>
</div>
<div class="faq-box-more">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur numquam, atque nemo pariatur maiores eos harum, ab magni nisi quod, commodi ipsum totam vel nihil voluptatum vitae quisquam, qui amet!</p>
</div>
</div>
<div class="faq3">
<div class="faq-box">
<h2>lorem ipsum</h2>
<i class="ion-ios-arrow-down"></i>
</div>
<div class="faq-box-more">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur numquam, atque nemo pariatur maiores eos harum, ab magni nisi quod, commodi ipsum totam vel nihil voluptatum vitae quisquam, qui amet!</p>
</div>
</div>
</section>
see snippet below or jsfiddle
if you don't want to use the jqueryUI accordion and want to learn how it actually works, it's something like this
in CSS do not use absolute positioning on faq-box-more as it won't occupy any space. instead hide it with display:none
for JQ
first, you don't need to add different classes to all the faq divs, you can add one common class and then select the respective faq-box-more connected to the faq you click on , using jQuery methods below
when you click on faq-box ( either one of them ) , in a variable ( for cleaner and concise code ) you store the corresponding faq-box-more .
you do this by using sibling() method. searching .faq-box's ' brothers ' for the .faq-box-more . in HTML structure faq-box and faq-box-more are on the same level, therefore they are siblings
then using an if condition you check if the previous selected faq-box-more is visible or not. IF YES -> close it , IF NO -> open IT .
you close and open using slideUp() and slideDown() methods ( click on the methods to see more info about them )
then, you also want to find any previous opened faq-box-more and close them, so only one is opened at one time ( the one corresponding to the box you clicked on ) . to do this you use the parents() method to 'climb' up the HTML structure and get to faq and then using siblings() and find() you find the .faq-box-more , and if it is open, you hide it with slideUp()
i think it's important that you try to understand the process behind the accordion and not just copy-paste it .
if you have anymore questions on this subject, feel free to ask in the comments
P.S. you had many problems in your code ( CSS ), it tried to correct some of them but also i wanted not to change too much your code.
$(".faq-box").on("click",function() {
var boxMore = $(this).siblings(".faq-box-more")
if ($(boxMore).is(":visible")) {
$(boxMore).slideUp()
} else {
$(boxMore).slideDown(500)
}
$(this).parents(".faq").siblings().find(".faq-box-more").slideUp()
});
.faq {
width: 500px;
background: red;
position: relative;
left: 50%;
transform: translate(-50%, 0%);
}
.faq-box {
position: relative;
height: 100%;
width: 100%;
background: #333;
cursor: pointer;
padding: 0 20px;
}
.faq-box h2 {
color: #fff;
text-transform: uppercase;
letter-spacing: 3px;
font-size: 1.9rem;
}
.faq-box i {
position: absolute;
left: 96%;
top: 50%;
font-size: 3rem;
transform: translate(-100%, -50%);
color: #fff;
}
.faq-box-more {
background-color: #222;
color: #fff;
width: 100%;
height:200px;
display:none;
}
.faq-box-more p {
position: absolute;
width: 100%;
padding: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<div class="faq">
<div class="faq-box">
<h2>lorem ipsum</h2>
<i class="ion-ios-arrow-down"></i>
</div>
<div class="faq-box-more">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur numquam, atque nemo pariatur maiores eos harum, ab magni nisi quod, commodi ipsum totam vel nihil voluptatum vitae quisquam, qui amet!</p>
</div>
</div>
<div class="faq">
<div class="faq-box">
<h2>lorem ipsum</h2>
<i class="ion-ios-arrow-down"></i>
</div>
<div class="faq-box-more">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur numquam, atque nemo pariatur maiores eos harum, ab magni nisi quod, commodi ipsum totam vel nihil voluptatum vitae quisquam, qui amet!</p>
</div>
</div>
<div class="faq">
<div class="faq-box">
<h2>lorem ipsum</h2>
<i class="ion-ios-arrow-down"></i>
</div>
<div class="faq-box-more">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur numquam, atque nemo pariatur maiores eos harum, ab magni nisi quod, commodi ipsum totam vel nihil voluptatum vitae quisquam, qui amet!</p>
</div>
</div>
</section>

Categories

Resources