I'm using Intersection Observer to make the content load when a insersection point is defined. I'm using it with a bootstrap 4 carousel, the intersection point is in the h1. The problem is that the script only catch the first h1, if the carousel goes to the second h1 when the user make the intersection on it, the slider don't appear, because the added class that show the content with an animation is applied only in the first div h1 parent content. So, I want to get all the h1, not only the first one. I tried to stop the carousel for intersection forever with the first h1, but i can't get to start it again when it displayed finally with the animation. You can see an example here, in the middle of the page.
// Instantiate a new Intersection Observer
let observer5 = new IntersectionObserver(onEntry5);
let test = document.querySelector('#carouselExampleControls3');
let element5 = document.querySelector(".test-h1");
observer5.observe(element5);
function onEntry5(entry5) {
if (entry5[0].isIntersecting) {
test.classList.add("active");
}
}
HTML
<div id="carouselExampleControls3" class="carousel slide test-slider" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active carousel-item-left">
<div class="container">
<div class="row">
<div class="banner col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 mx-auto">
<img alt="Bootstrap Image Preview" src="img/_MG_6501-copia.jpg" class="img-thumbnail" style="padding-right: 200px;padding-bottom: 200px;border: 0px; ">
<h1 class="test-h1" style="z-index: 1000000;
font-family: 'Montserrat', sans-serif;
font-weight: 900;
color: #c33e69;
font-size: 5em;
position: absolute;
right: 70px;
bottom: 60px;
width: 363px;">ESTA ES MI SEGUNDA CASA</h1>
</div>
</div>
</div> </div>
<div class="carousel-item carousel-item-next carousel-item-left">
<div class="container">
<div class="row">
<div class="banner col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 mx-auto">
<img alt="Bootstrap Image Preview" src="https://www.eharmony.co.uk/dating-advice/wp-content/uploads/2011/04/profilephotos.jpg" class="img-thumbnail" style="padding-right: 200px;padding-bottom: 200px;border: 0px; ">
<h1 class="test-h1" style=" z-index: 1000000;
font-family: 'Montserrat', sans-serif;
font-weight: 900;
color: #c33e69;
font-size: 5em;
position: absolute;
right: 70px;
bottom: 60px;
width: 363px;">ESTA ES MI SEGUNDA CASA</h1>
</div>
</div>
</div> </div>
</div>
</div>
CSS
#carouselExampleControls3 {opacity: 0; transition: 1.5s opacity;}
#carouselExampleControls3.active {opacity: 1; cursor: pointer;
animation: zoomin 1.5s alternate infinite;
animation-iteration-count: 1;
animation-fill-mode: forwards;}
Welcome to document.querySelectorAll()! Grab all elements that match the query then use a forEach loop to apply whatever functionality you want.
Resource: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
For your use case I would do something like this:
const carousels = document.querySelectorAll('.wrapper-carousel-thingy');
if (carousels) {
carousels.forEach((carousel) => {
const trigger = carousel.querySelector('.some-inner-trigger-element');
trigger.addEventListener('mouseenter', () => {
carousel.classList.add('active');
});
trigger.addEventListener('mouseleave', () => {
carousel.classList.remove('active');
});
});
}
.wrapper-carousel-thingy {
border: 2px solid black;
padding: 20px;
}
.wrapper-carousel-thingy.active {
border-color: red; /* border color change just an example of how you can update the parent element based on hover of interior element */
}
.some-inner-trigger-element:hover {
background: yellow; /* just to emphasize which element is the trigger */
}
<div class="wrapper-carousel-thingy class-that-makes-me-unique"> <!-- as many of these as you want -->
<div class="whatever-in-between">
<h1 class="some-inner-trigger-element">I am the trigger</h1>
</div>
</div>
Related
Given two rows of cards, I'm trying to combine the following animations:
Move the first card on the first row over the second card on the second row.
This is done by changing the top and left style properties.
Flip the first card on the first row.
I'm flipping the card based on this w3schools example.
Move the second card on the first row to the left.
The card is moved to the left by giving the div next to it zero width.
Animation 3) seems to conflict with animation 2).
Normally, a 'flip' involves swapping the front facing div with the back facing div.
However, when animation 3) gives the parent div zero width, the front and back are no longer aligned and both sides can be seen.
The following snippet demonstrates that a 'flip' seems to work, while 'move and flip' goes wrong.
Can you help me fix this such that all animations work correctly together?
function flipCard() {
const flipCard = document.querySelector('.top .flip-card')
const rect = flipCard.getBoundingClientRect()
flipCard.classList.add('moving')
flipCard.classList.add('flipped')
return [flipCard, rect]
}
function moveFlipCard() {
const srcSleeve = document.querySelector('.top .sleeve')
srcSleeve.classList.add('closed')
const [srcFlipCard, srcRect] = flipCard()
const targetFlipCard = document.querySelectorAll('.bottom .sleeve')[1]
const targetRect = targetFlipCard.getBoundingClientRect()
const offset = {
top: targetRect.top - srcRect.top,
left: targetRect.left - srcRect.left,
}
srcFlipCard.style.top = offset.top + 'px'
srcFlipCard.style.left = offset.left + 'px'
}
const flipButton = document.getElementById('flipCard')
flipButton.addEventListener('click', flipCard)
const moveFlipButton = document.getElementById('moveFlipCard')
moveFlipButton.addEventListener('click', moveFlipCard)
* {
font-family: sans-serif;
font-size: 24px;
}
.cards {
display: flex;
position: relative;
}
.sleeve {
position: relative;
width: 60px;
height: 76px;
transition: width 1s;
}
.sleeve.closed {
width: 0;
}
.card {
position: relative;
width: 50px;
height: 70px;
border: 3px solid black;
border-radius: 5px;
display: flex;
text-align: center;
align-items: center;
justify-content: center;
font-size: 24px;
margin: 0 2px;
transition: top 1s, left 1s;
}
.card.closed {
background-color: rgb(125, 171, 250);
color: black;
}
.card.open {
background-color: rgb(218, 218, 218);
}
.card.black {
color: black;
}
.card.red {
color: red;
}
/* Based on https://www.w3schools.com/howto/howto_css_flip_card.asp */
.flip-card {
position: relative;
perspective: 1000px;
transition: top 1s, left 1s;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 1s;
transform-style: preserve-3d;
}
.flip-card.flipped .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-back {
transform: rotateY(180deg);
}
.flip-card.moving {
z-index: 1;
}
<div id="app">
<div class="top cards">
<div class="sleeve">
<div class="flip-card" style="top: 0; left: 0;">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card open black">A♣</div>
</div>
<div class="flip-card-back">
<div class="card closed">?</div>
</div>
</div>
</div>
</div>
<div class="sleeve">
<div class="flip-card" style="top: 0; left: 0;">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card open black">2♣</div>
</div>
<div class="flip-card-back">
<div class="card closed">?</div>
</div>
</div>
</div>
</div>
</div>
<div class="bottom cards">
<div class="sleeve">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card open red">5♥</div>
</div>
<div class="flip-card-back">
<div class="card closed">?</div>
</div>
</div>
</div>
</div>
<div class="sleeve">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card open red">6♥</div>
</div>
<div class="flip-card-back">
<div class="card closed">?</div>
</div>
</div>
</div>
</div>
</div>
<button id="flipCard">flip</button>
<button id="moveFlipCard">move and flip</button>
</div>
TLDR: To solve this, I explicitly set transform-origin: 30px 0 0. Now the point around which a transformation is applied no longer depends on the size of the bounding box.
I now see where it goes wrong. The problem lies with the transform-origin.
The transform origin is the point around which a transformation is applied.
For animation 2) this corresponds to the point around which the card is rotated 180 degrees over the y-axis (transform: rotateY(180deg)).
The default value of the transform-origin property is 50% 50% 0, where the values correspond to the offset over the x-axis, y-axis and z-axis, respectively.
However, what does 50% mean? 50% of what?
Percentages refer to the size of bounding box
So, what's the bounding box of the flipped div? When I inspect <div class="flip-card-inner"> I see it has a dimensions 60x0:
where 60 corresponds to width: 60px of parent <div class="sleeve">.
So for <div class="flip-card-inner"> the default transform-origin is 30px 0 0. This is what I expect: the card rotates over its y-axis at a point that lies halfway over the x-axis, such that the card is in the same location when flipped.
Now let's see what happens when we apply animation 3), i.e. move the second card on the first row to the left by giving the div next to it zero width:
Now the bounding box is 0x0, because the parent <div class="sleeve closed"> has zero width. Since the bounding box has changed, so has the transform-origin: 50% of 0 is 0, so we get 0 0 0. The card now rotates over its y-axis at a point that lies on the left side of the card. This has the undesired effect that the flipped card does not end up at the same location as where it started.
To solve this, I explicitly set transform-origin: 30px 0 0. Now the point around which a transformation is applied no longer depends on the size of the bounding box.
Working example:
function flipCard() {
const flipCard = document.querySelector('.top .flip-card')
const rect = flipCard.getBoundingClientRect()
flipCard.classList.add('moving')
flipCard.classList.add('flipped')
return [flipCard, rect]
}
function moveFlipCard() {
const srcSleeve = document.querySelector('.top .sleeve')
srcSleeve.classList.add('closed')
const [srcFlipCard, srcRect] = flipCard()
const targetFlipCard = document.querySelectorAll('.bottom .sleeve')[1]
const targetRect = targetFlipCard.getBoundingClientRect()
const offset = {
top: targetRect.top - srcRect.top,
left: targetRect.left - srcRect.left,
}
srcFlipCard.style.top = offset.top + 'px'
srcFlipCard.style.left = offset.left + 'px'
}
const flipButton = document.getElementById('flipCard')
flipButton.addEventListener('click', flipCard)
const moveFlipButton = document.getElementById('moveFlipCard')
moveFlipButton.addEventListener('click', moveFlipCard)
* {
font-family: sans-serif;
font-size: 24px;
}
.cards {
display: flex;
position: relative;
}
.sleeve {
position: relative;
width: 60px;
height: 76px;
transition: width 1s;
}
.sleeve.closed {
width: 0;
}
.card {
position: relative;
width: 50px;
height: 70px;
border: 3px solid black;
border-radius: 5px;
display: flex;
text-align: center;
align-items: center;
justify-content: center;
font-size: 24px;
margin: 0 2px;
transition: top 1s, left 1s;
}
.card.closed {
background-color: rgb(125, 171, 250);
color: black;
}
.card.open {
background-color: rgb(218, 218, 218);
}
.card.black {
color: black;
}
.card.red {
color: red;
}
/* Based on https://www.w3schools.com/howto/howto_css_flip_card.asp */
.flip-card {
position: relative;
perspective: 1000px;
transition: top 1s, left 1s;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 1s;
transform-style: preserve-3d;
}
.flip-card.flipped .flip-card-inner {
transform-origin: 30px 0 0;
transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-back {
transform-origin: 30px 0 0;
transform: rotateY(180deg);
}
.flip-card.moving {
z-index: 1;
}
<div id="app">
<div class="top cards">
<div class="sleeve">
<div class="flip-card" style="top: 0; left: 0;">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card open black">A♣</div>
</div>
<div class="flip-card-back">
<div class="card closed">?</div>
</div>
</div>
</div>
</div>
<div class="sleeve">
<div class="flip-card" style="top: 0; left: 0;">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card open black">2♣</div>
</div>
<div class="flip-card-back">
<div class="card closed">?</div>
</div>
</div>
</div>
</div>
</div>
<div class="bottom cards">
<div class="sleeve">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card open red">5♥</div>
</div>
<div class="flip-card-back">
<div class="card closed">?</div>
</div>
</div>
</div>
</div>
<div class="sleeve">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card open red">6♥</div>
</div>
<div class="flip-card-back">
<div class="card closed">?</div>
</div>
</div>
</div>
</div>
</div>
<button id="flipCard">flip</button>
<button id="moveFlipCard">move and flip</button>
</div>
I have a floorplan like this:
I need to cover specific areas with a grid (clickable squares) just like this:
So, as you can see I don't need to cover all the picture with grid. Only a few sections.
Also, I want the squares to be clickable as I want to be able to change the colour of the square using some JS.
Many topics on this but all of them cover the whole image with a grid. I need certain areas to be covered.
Can it be achieved with HTML, CSS and JS?
That's my code so far:
.test {
margin-top: 0;
margin-left: 0;
}
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
img {
position: absolute;
width: 55%;
height: 925px;
top: 105px;
left: 25px;
}
.img1 {
z-index: 1;
}
.img2 {
z-index: 3;
}
<div class="container">
<div class="row">
<button class="switch btn btn-info col-md-2 col-sm-2 col-lg-2" #click="addFurniture">{{ text }}</button>
</div>
<div class="row">
<div style="posiotion: relative;">
<div class="img" id="floorplan">
<div class="img1 imgSize">
<img id="grid" src="../assets/floorplan.png" class="col-md-7 grid rounded mx-auto d-block" alt="floorplan">
<div class="col-md-2">
<button class="test btn btn-success" style="position: absolute;">test</button>
</div>
</div>
<div class="img2">
<img v-if="!isHidden" src="../assets/furniture.png" alt="furniture" class="col-md-7 rounded mx-auto d-block">
</div>
You can't change the color of a picture with JS, you might only add some styles on it which would look more like a filter.
For grid, you can put on elements on top of the picture that are shaped as you wanted like in the picture, using absolute positioning. Then you do whatever you want.
As long as you don't turn the image into code, your options are limited in my opinion.
i am editing an html template, the logo dimensions of the template is lower than my logo, i added my logo to the template but its not displaying,
#media (max-width: 673px) {
#logo {
margin-left: 20px;
}
}
#header #logo h1 {
font-size: 34px;
margin: 0;
padding: 0;
line-height: 1;
font-weight: 700;
letter-spacing: 3px;
}
#header #logo h1 a,
#header #logo h1 a:hover {
color: #fff;
padding-left: 10px;
border-left: 4px solid #7c32ff;
}
#header #logo img {
padding: 0;
margin: 0;
}
#media (max-width: 768px) {
#header #logo h1 {
font-size: 28px;
}
#header #logo img {
max-height: 40px;
}
}
<section class="header-top">
<div class="container box_1170">
<div class="row align-items-center justify-content-between">
<div class="col-lg-6 col-md-6 col-sm-6">
<a href="index.html" class="logo">
<img src="img/long_logo.png" alt="">
</a>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 search-trigger">
<a href="#" class="search">
<i class="lnr lnr-magnifier" id="search"></i></a>
</a>
</div>
</div>
</div>
</section>
my logo dimesnions are 500px*280
i just want to add my logo somehow, is there any way.how can i fix it?
You're using classes and calling IDs on your .css
Did you try creating a <div> with a class and adding your logo inside the div ? This way you could manipulate the div dimensions and the logo itself until it fits.
A simple example :.
CSS :
.logo {
background-image: url("img/long_logo.png");
background-repeat: no-repeat;
width: 100px;
height: 100px;
}
BODY :
<section class="header-top">
<div class="container box_1170">
<div class="row align-items-center justify-content-between">
<div class="col-lg-6 col-md-6 col-sm-6">
<a href="index.html">
<div class="logo"></div>
</a>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 search-trigger">
<a href="#" class="search">
<i class="lnr lnr-magnifier" id="search"></i></a>
</a>
</div>
</div>
</div>
</section>
In your CSS styles, you are using id selector, but the HTML template has more of classes.
Also make sure the picture you want to include in the template is within the img/ folder
You are using the wrong CSS Selectors.
For example, if you have assigned a class to your HTML elements like as follows:
<div class="header">
</div>
You should be using "." to apply CSS to it as follows:
.header {}
Whereas "#" is used to select HTML elements with corresponding ID like so:
HTML:
<div id="header">
</div>
CSS:
#header{}
Tip - a HTML element can have multiple classes but only one ID.
As you might see I have fixed a kind of text box that will pop up when someone is hovering over that image, but honestly I want a slide-up effect that gone up slowly. Must be completely in pure JavaScript (no jQuery please!). Anyone knows how I can do that.
function show(myText) {
var elements = document.getElementsByClassName(myText)
for(var i = 0; i < elements.length; i++){
elements[i].style.visibility = "visible";
}
}
function hide(myText) {
var elements = document.getElementsByClassName(myText)
for(var i = 0; i < elements.length; i++){
elements[i].style.visibility = "hidden";
}
}
.text1 {
position: relative;
bottom: 28px;
text-align: center;
background-color: grey;
width: 100%;
height: 10%;
font-size: 20px;
color: white;
opacity: 0.7;
display: block;
visibility: hidden;
}
.text2 {
position: relative;
bottom: 28px;
text-align: center;
background-color: grey;
width: 100%;
height: 10%;
font-size: 20px;
color: white;
opacity: 0.7;
display: block;
visibility: hidden;
}
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="tumb-wrapper">
<a href="http://www.bbc.com" target="_blank" class="image" onmouseover="show('text1')" onmouseout="hide('text1')">
<img src="https://i.vimeocdn.com/portrait/8070603_300x300" class="project" alt="print-screen"/>
<div class="text1">AAA</div>
</a>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="tumb-wrapper">
<a href="http://www.cnn.com" target="_blank" class="image" onmouseover="show('text2')" onmouseout="hide('text2')">
<img src="https://lh6.ggpht.com/mSKQgjFfPzrjqrG_d33TQZsDecOoVRF-jPKaMDoGIpMLLT1Q09ABicrXdQH6AZpLERY=w300" class="project" alt="print-screen"/>
<div class="text2">BBB</div>
</a>
</div>
</div>
</div>
Here is a version of it that's totally javascript free, just using CSS. I'm going to edit this soon with a slight javascript addition (this current version requires you to have a fixed size).
.caption {
height: 250px;
width: 355px;
overflow: hidden;
}
.caption-image {
height: 100%;
}
.caption-text {
color: white;
padding: 10px;
background: rgba(0, 0, 0, 0.4);
transition: transform 400ms ease;
}
.caption-image:hover + .caption-text,
.caption-text:hover {
transform: translateY(-100%);
}
<div class="caption">
<img class="caption-image" src="http://faron.eu/wp-content/uploads/2013/05/Cheese.jpg" />
<div class="caption-text">Some words about how cheesy it is to use a picture of cheese for this example!</div>
</div>
<div class="caption">
<img class="caption-image" src="https://top5ofanything.com/uploads/2015/05/Tomatoes.jpg" />
<div class="caption-text">There's nothing witty to say about a tomato, maybe some you say I say stuff. But honstly I can't think of anything...</div>
</div>
Version with JS sizing:
Basically the same idea, but when the page is loading it sets certain styles so the images can be what ever size you like.
var captionSel = document.querySelectorAll('.caption');
for (let i = 0; i < captionSel.length; i++) {
let image = captionSel[i].querySelector(":scope > .caption-image");
let text = captionSel[i].querySelector(":scope > .caption-text");
text.style.width = image.clientWidth - 20 + "px";
captionSel[i].style.height = image.clientHeight + "px";
}
.caption {
overflow: hidden;
}
.caption-text {
color: white;
padding: 10px;
background: rgba(0, 0, 0, 0.4);
transition: transform 400ms ease;
}
.caption-image:hover + .caption-text,
.caption-text:hover {
transform: translateY(-100%);
}
<div class="caption">
<img class="caption-image" src="http://faron.eu/wp-content/uploads/2013/05/Cheese.jpg" />
<div class="caption-text">Some words about how cheesy it is to use a picture of cheese for this example!</div>
</div>
<div class="caption">
<img class="caption-image" src="https://top5ofanything.com/uploads/2015/05/Tomatoes.jpg" />
<div class="caption-text">There's nothing witty to say about a tomato, maybe some you say I say stuff. But honstly I can't think of anything...</div>
</div>
I'll give it to you even better: No javascript at all!
This is possible with pure CSS:
.tumb-wrapper {
position: relative;
overflow: hidden;
}
.text {
text-align: center;
background-color: grey;
width: 100%;
height: 10%;
font-size: 20px;
color: white;
opacity: 0.7;
display: block;
position: absolute;
bottom: -30px;
transition: 300ms;
left: 0;
}
.tumb-wrapper:hover .text {
bottom: 28px;
}
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="tumb-wrapper">
<a href="http://www.bbc.com" target="_blank" class="image">
<img src="https://i.vimeocdn.com/portrait/8070603_300x300" class="project" alt="print-screen"/>
<div class="text">AAA</div>
</a>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="tumb-wrapper">
<a href="http://www.cnn.com" target="_blank" class="image">
<img src="https://lh6.ggpht.com/mSKQgjFfPzrjqrG_d33TQZsDecOoVRF-jPKaMDoGIpMLLT1Q09ABicrXdQH6AZpLERY=w300" class="project" alt="print-screen"/>
<div class="text">BBB</div>
</a>
</div>
</div>
</div>
The transition css property animates whatever change you make. This way, when you hover over the .tumb-wrapper div, the .text div will slide up.
You should note however, that ancient IE versions won't be able to use this
I usually do this with only CSS.
Just save the first and second image right next to each other on one file... then you use css to change the position of the background image. To make things nicer i add a css-animation to the movement of the background image.
Example of my code:
<div id="thumb_Wrapper">
<div class="_Thumb">
<img src="images/Thumb.jpg" class="Animate_left">
</div>
</div>
The CSS
#_Container{position:absolute; bottom -60px; right:2px; width:626px; height:100px;}
._Thumb{position:relative; margin-right:4px; width:100px; height:80px; display:block; float:left; background:#EFEFEF; overflow:hidden;}
._Thumb > img{position:absolute; left:0; height:100%; background-size:cover; background-position:center;}
._Thumb > img:hover{left:-18px; cursor:pointer;}
CSS Animation
.Animate_left{transition:left .3s;}
Now all you have to do is swap out the image.
onHover - the image in the thumbnail will smoothly slide to the left; revealing the rest of the image/ showing the other image.
You can set how far to the left(or right) you want the thumb-image to first appear by adjusting the value of 'left' in the ._Thumb class.
You can set how far the image slides on hover by adjusting the img:hover{left:-18px} to what ever you like; instead of 18px.
I'm working on this code but I have difficulties implementing properly. I wan to place the arrow in front of the question and synchronize the click event with the text.
jsfiddle.net/tx8paL7L/5/
Can you help me to fix the issue?
HTML:
<div class="container faq_wrapper">
<div class="row">
<div class="span10 offset1">
<p>
</p>
<div class="faq-all-actions">
<a class="faq-expand">Expand All</a> | <a class="faq-collapse">Collapse All</a></div>
</div>
</div>
<div class="row">
<div class="span10 offset1">
<div class="question-wrapper">
<div class="arrows">
</div>
<div class="big-q">
Q</div>
<div class="question">
<div class="arrow"></div><h6>Can I try the software before I buy it?</h6></div>
<div class="answer-wrapper">
<div class="big-a">
A</div>
<div class="answer">
Yes! Simply download a free trial and you'll have instant access to all features for 30 days, absolutely free. We don't require your credit card details or any commitment.</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.answer-wrapper {
display: none;
}
.arrow {
margin: 1em;
}
.arrow::before {
position: absolute;
content: '';
width: 0;
height: 0;
border: .5em solid transparent;
border-left-color: gray;
transform-origin: 0 50%;
transition: transform .25s;
}
.arrow.down::before {
transform: rotate(90deg);
transition: transform .25s;
}
JavaScript:
$(document)
.on('click','.row',function(){
$(this).find('.answer-wrapper').slideToggle();
})
.on('click','.faq-expand',function(){
$('.answer-wrapper').slideDown();
})
.on('click','.faq-collapse',function(){
$('.answer-wrapper').slideUp();
})
var arr = document.querySelector('.arrow');
arr.addEventListener('click', function(event) {
event.target.classList.toggle('down');
});
;
Here is a working fiddle with your javascript, the css still needs a bit of work:
JSFiddle
Basically you were using the wrong selectors for your jQuery.
HTML:
<div class="container faq_wrapper">
<div class="row">
<div class="span10 offset1">
<p>
</p>
<div class="faq-all-actions">
<a class="faq-expand">Expand All</a> | <a class="faq-collapse">Collapse All</a></div>
</div>
</div>
<div class="row">
<div class="span10 offset1">
<div class="question-wrapper">
<div class="arrows">
</div>
<div class="big-q">
Q</div>
<div class="question">
<div class="arrow"></div><h6>Can I try the software before I buy it?</h6></div>
<div class="answer-wrapper">
<div class="big-a">
A</div>
<div class="answer">
Yes! Simply download a free trial and you'll have instant access to all features for 30 days, absolutely free. We don't require your credit card details or any commitment.</div>
</div>
</div>
</div>
</div>
</div>
jQuery:
$(document).ready(function() {
.on('click','.row .question-wrapper',function(){
$(this).find('.answer-wrapper').slideToggle();
$('.arrow').toggleClass('down');
})
.on('click','.faq-expand',function(){
$('.answer-wrapper').slideDown();
$('.arrow').addClass('down');
})
.on('click','.faq-collapse',function(){
$('.answer-wrapper').slideUp();
$('.arrow').removeClass('down');
})
});
you've added position:absolute but done nothing to position the arrow .
add the following styles :
.arrow {
position:relative; // you need to add position relative
margin: 1em;
padding-left:10px;
}
.arrow::before {
position: absolute;
left:100%; // define where you would like the arrow to be placed .
content: '';
width: 0;
height: 0;
border: .5em solid transparent;
border-left-color: gray;
transform-origin: 0 50%;
transition: transform .25s;
}
use position relative and left for perfectly positioning your arrow .
FIDDLE HERE
To put arrow in front of the question you can use right 0 like this:
.arrow::before {
position: absolute;
right: 0;
content: '';
width: 0;
height: 0;
border: .5em solid transparent;
border-left-color: gray;
transform-origin: 0 50%;
transition: transform .25s;
}
When you are layout an element on position absolute, you can "fix" the element relative to the parent if you want (top, bottom, right, left).
Add "left: 190px" to ".arrow::before"
.arrow::before {
position: absolute;
content: '';
width: 0;
height: 0;
border: .5em solid transparent;
border-left-color: gray;
transform-origin: 0 50%;
transition: transform .25s;
left: 190px;
}