Image Slider using HTML and Javascript - 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>

Related

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';

My navigation disappears when the browser is resized

So, this is a site that i'm currently working on and everything is fine except this:
As i got warned by one of the guys reviewing my current code, my menu/navigation disappears after being open and closed in its media-querie state, and resized back to monitor-width.
Simplified - follow these steps to see the problem:
Open the code snippet (i would suggest CodePen since the result is shown properly in it) and briefly admire my design. Tthat's it, thank you for your help. Just kidding, next step: resize the browser to the mentioned size (width 480px or less) so that you see the hamburger menu icon on top right, open the menu clicking on the icon, close it, and than change the browser back to full screen size! Do you see the navigation bar on the left?!
What am i missing here? I suppose that it should be a few more lines of JavaScript for some after state (just started learning JS so i dont know), but please look into it and teach me about possible solution(s).
And yes i know, it shouldn't affect any of those mobile users that i'm targeting with my media-queries 'cause nobody will resize it like that and barely anyone will see this, BUT...first thing - i want to make it perfect, and second - if there is something i missed or did wrong i want to hear about it and learn how to fix it/make it right.
Here is the CodePen link: https://codepen.io/anon/pen/VxmMrJ
And here is the code snippet:
function myFunction() {
var x = document.getElementById("menu");
if (x.style.display === "block") {
x.style.display = "none";
}
else {
x.style.display = "block";
}
}
#media only screen and (max-width: 480px) {
.networks, .sidenav, .image-row, .foot1, .foot3 {
display: none;
}
body {
display: block;
width: 100%;
height: 100%;
background-color: #e1e1e1;
}
.page-wrap {
display: block;
margin-top: 0px;
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
z-index: 0;
}
.logo {
display: inline-block;
float: left;
width: 75%;
margin-left: 2.5%;
}
.logoImg {
width: 200%;
}
.menuIcon {
display: inline-block;
float: right;
width: 10%;
margin-top: 6%;
margin-right: 5.5%;
border: none;
z-index: 3;
}
.navButton {
display: block;
width: 100%;
background-color: #e1e1e1;
border: none;
z-index: 3;
}
.navButton:focus {
outline: none;
}
#menu {
display: none;
position: relative;
width: 90%;
margin-left: 5%;
margin-right: 5%;
margin-top: 2.5%;
padding-bottom: 2.5%;
z-index: 3;
}
.main {
display: block;
width: 90%;
height: auto;
padding-bottom: 7.5%;
margin-top: 2.5%;
margin-left: 5%;
margin-right: 5%;
z-index: 1;
}
.textbox {
display: block;
width: 95%;
margin-top: 5%;
margin-left: auto;
margin-right: auto;
font-size: 1.25em;
text-align: justify;
}
.myPhoto {
display: block;
width: 50%;
margin-left: auto;
margin-right: auto;
}
.foot2 {
display: block;
width: 100%;
padding-top: 5%;
padding-bottom: 5%;
font-size: 1.25em;
color: #324B64;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<link rel="stylesheet" href="test.css">
<script src="myScript.js"></script>
<title>Luka Novak</title>
</head>
<body>
<div class="page-wrap">
<div class="header">
<div class="logo">
</div>
<div class="networks">
<img src="facebook-symbol.svg" class="socialnet" alt="facebook">
<img src="instagram-symbol.svg" class="socialnet" alt="instagram">
</div>
<div class="menuIcon">
<button onclick="myFunction()" class="navButton">
<img src="https://cdn3.iconfinder.com/data/icons/gray-toolbar/512/menu-512.png"
alt="menu"
class="iconImg">
</button>
</div>
</div>
<div class="sidenav col-5" id="menu">
about us
services
contact
</div>
<div class="main col-18">
<article class="textbox">
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?"
</article>
<div class="image-row">
<div class="image1">
</div>
<div class="image2">
</div>
<div class="image3">
</div>
</div>
</div>
<div class="footer col-24">
<p class="foot1">Some info</p>
<p class="foot2">design by me</p>
<p class="foot3">More info</p>
</div>
</div>
</body>
</html>
It would be better to do this with a CSS class that it only changed in your mobile media query.
https://codepen.io/anon/pen/KRmYVR
CSS
#media only screen and (max-width: 480px) {
.mobileshow {
display: block !important;
}
}
JS
function myFunction() {
var x = document.getElementById("menu");
if(x.classList.contains("mobileshow")) {
x.classList.remove("mobileshow");
}
else {
x.classList.add("mobileshow");
}
}
Those attributes of "element.style" can only be set a value rather than get their value(you can run "console.log(x.style.display)" to prove it). if you must to get styles of an element, try "getComputedStyle"
Usually, I would hide an element by add a class, and show it by remove that class
const el = document.querySelector('.some-element')
function hideElement() {
if (!el.classList.contains('hidden')) {
el.classList.add('hidden')
}
}
function showElement() {
if (el.classList.contains('hidden')) {
el.classList.remove('hidden')
}
}
.hidden {
display: none;
}
/* you can try this, if you don't want that element to really disappear
.hidden {
opacity: 0;
}
*/
<div class="some-element"></div>
PS: My English is poor, hope you could understand it :)

Render only selected element, React JS

I am trying to toggle class in one of my react component.
The idea is to add class when the mouse enter and to remove the class when the mouse leave only in the element only the element in where the user perform the actions. However this is not the case as when the action is being performed all the element with the function are behaving equally.
This is my code so far:
export default class Projects extends Component{
constructor(){
super();
this.state = {
isHovered : false
}
}
//handle mouse enter
handleMouseEnter = () =>{
this.setState({
isHovered : true
});
}
//handle mouse leave
handleMouseLeave = () =>{
this.setState({
isHovered : false
});
}
//render component
render(){
let display = "";
if(this.state.isHovered === true){
display = "active";
}else{
display = "disable";
}
return(
<section className="projects">
{/*section project wrapper*/}
<div className="p-wrapper">
<h1 className="title">Projects</h1>
<hr/>
{/*projet wrapper*/}
<div className="projects-wrapper">
{/*project item wrapper*/}
<div className="project-item" onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>{/*FMA Web development*/}
<div className={"p-description " + display}>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure quos dolorem, ipsa eaque minima saepe fugit hic libero recusandae! Obcaecati esse odit id incidunt vitae aperiam dicta atque blanditiis sint?</p>
</div>
<div className="p-image">
<img src="asset/img/fma_web.png" alt="FMA Web Development"/>
</div>
</div>
<div className="project-item" onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>{/*Web development using php*/}
<div className={"p-description " + display}>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure quos dolorem, ipsa eaque minima saepe fugit hic libero recusandae! Obcaecati esse odit id incidunt vitae aperiam dicta atque blanditiis sint?</p>
</div>
<div className="p-image">
<img src="asset/img/web_dev_php.png" alt="FMA Web Development Using PHP"/>
</div>
</div>
<div className="project-item" onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>{/*Movie Catalog*/}
<div className={"p-description " + display}>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure quos dolorem, ipsa eaque minima saepe fugit hic libero recusandae! Obcaecati esse odit id incidunt vitae aperiam dicta atque blanditiis sint?</p>
</div>
<div className="p-image">
<img src="asset/img/movie_catalog.png" alt="Movie Catalog"/>
</div>
</div>
</div>
</div>
</section>
);
}
}
I have read the use of key in the documentation and read other question especially this one LINK,however when I try to implement I do not get the desired result.
===========================
EDIT
This is what I get now.
As you can see when I hover both of the element triggers.
This is my CSS Code:
/*Projects Start*/
.projects{
width: 100%;
}
.p-wrapper{
margin: 0 auto;
width: 90%;
height: 100%;
}
.projects-wrapper{
margin-top: 2rem;
width: 100%;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.project-item{
margin: 1rem;
width: 30%;
position: relative;
box-shadow: 2px 3px 37px -5px rgba(0,0,0,0.84);
}
.p-description{
position: absolute;
height: 100%;
width: 100%;
background-color: rgba(43, 40, 40, 0.61);
color: white;
}
.p-description p {
margin: 1rem;
}
.p-title{
margin: 1rem;
}
.active{
display: block;
transition: all 2s ease-in;
}
.disable {
display: none;
}

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>

how to return first image with cycle plugin

I'm using cycle2 plugin for my carousel and I wrote a basic function to start slide images on hover but there is something that I couldn't achieve is when I left my cursor from area carousel must return first image how to do that ?
$('.img-area').cycle({
fx: 'none',
speed: 750,
timeout: 100
}).cycle("pause");
$(".otel-list").hover(function() {
$(".img-area").cycle("resume");
}, function() {
$(".img-area").cycle("pause");
});
.otel-list {
width: 700px;
background: #f0f0f0;
border-bottom: 5px solid #ccc;
}
.otel-list:after,
.otel-list-:before {
content: "";
display: table;
clear: both;
}
.img-area {
width: 33%;
float: left;
position: relative;
}
.img-area img {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.content-area {
float: right;
width: 66%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.js"></script>
<div class="otel-list">
<div class="img-area">
<img src="http://malsup.github.io/images/p1.jpg" />
<img src="http://malsup.github.io/images/p2.jpg" />
<img src="http://malsup.github.io/images/p3.jpg" />
<img src="http://malsup.github.io/images/p4.jpg" />
</div>
<div class="content-area">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt dolorem, nemo illo non aspernatur distinctio deleniti repudiandae in reprehenderit, explicabo, ullam. Fuga dolorum voluptates esse animi earum! Sint, officia, molestias!</p>
</div>
</div>
Just use $(".img-area").cycle(0) on mouse leave event.
$('.img-area').cycle({
fx: 'none',
speed: 750,
timeout: 100
}).cycle("pause");
$(".otel-list").hover(function() {
$(".img-area").cycle("resume");
}, function() {
$(".img-area").cycle("pause");
}).mouseleave(function(){
$(".img-area").cycle(0);
});
.otel-list {
width: 700px;
background: #f0f0f0;
border-bottom: 5px solid #ccc;
}
.otel-list:after,
.otel-list-:before {
content: "";
display: table;
clear: both;
}
.img-area {
width: 33%;
float: left;
position: relative;
}
.img-area img {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.content-area {
float: right;
width: 66%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.js"></script>
<div class="otel-list">
<div class="img-area">
<img src="http://malsup.github.io/images/p1.jpg" />
<img src="http://malsup.github.io/images/p2.jpg" />
<img src="http://malsup.github.io/images/p3.jpg" />
<img src="http://malsup.github.io/images/p4.jpg" />
</div>
<div class="content-area">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt dolorem, nemo illo non aspernatur distinctio deleniti repudiandae in reprehenderit, explicabo, ullam. Fuga dolorum voluptates esse animi earum! Sint, officia, molestias!</p>
</div>
</div>

Categories

Resources