I am trying to make an accordion to display some images with CSS nothing else, however I would like one of the accordion images to be active by default.
$(document).ready(function() {
$(".a3").addClass("active");
$(".box").hover(function() {
$(".box").removeClass("active");
$(this).addClass("active");
});
});
@import url('https://fonts.googleapis.com/css?family=Fjalla+One');
@import url('https://fonts.googleapis.com/css?family=Exo+2');
html {
height: 100vh;
}
.accordion {
max-width: 990px;
background: rgba(0, 0, 0, 0.10);
height: 300px;
margin: 20px auto;
display: flex;
box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.47);
flex-direction: row;
cursor: pointer;
margin-bottom: 100px;
}
.box {
position: relative;
height: 100%;
flex: 1;
background-position: left;
background-size: cover;
transition: .7s;
box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.47);
}
.active{
position: relative;
height: 100%;
background-position: left;
background-size: cover;
transition: 1s;
box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.47);
flex: 7;
height: 800px;
}
.a1 {
background-image: url("https://images.pexels.com/photos/1516654/pexels-photo-1516654.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
}
.a2 {
background-image: url("https://images.pexels.com/photos/1056555/pexels-photo-1056555.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260")
}
.a3 {
background-image: url("https://images.pexels.com/photos/129207/pexels-photo-129207.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
color: #fff;
}
.a4 {
background-image: url("https://images.pexels.com/photos/240038/pexels-photo-240038.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
color: #fff;
}
.a5 {
background-image: url("https://images.pexels.com/photos/220994/pexels-photo-220994.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
}
p {
font-weight: normal;
font-family: 'Exo 2', sans-serif;
}
.text {
position: absolute;
bottom: 0;
opacity: 0;
padding: 10px;
}
.box:hover .text{
opacity:1;
}
h1 {
width: 250px;
text-align: center;
margin: 100px auto 20px auto;
}
@media screen and (max-width: 800px){
body{
margin: 0;
}
.accordion {
flex-direction: column;
height: 700px;
box-shadow: none;
}
.box {
box-shadow: none;
}
.box:hover {
flex: 7;
}
}
<h1>Accordion Slider</h1>
<div class="accordion">
<!-- BOX 1 -->
<div class="box a1">
<div class="image_1">
<div class="text">
<h2>Lorem Ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis nisl sed dictum aliquam.
</p>
</div>
</div>
</div>
<!-- BOX 2 -->
<div class="box a2">
<div class="image_2">
<div class="text">
<h2>Lorem Ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis nisl sed dictum aliquam.
</p>
</div>
</div>
</div>
<!-- BOX 3 -->
<div class="box a3">
<div class="image_3">
<div class="text">
<h2>Lorem Ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis nisl sed dictum aliquam.
</p>
</div>
</div>
</div>
<!-- BOX 1 -->
<div class="box a4">
<div class="image_4">
<div class="text">
<h2>Lorem Ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis nisl sed dictum aliquam.
</p>
</div>
</div>
</div>
<!-- BOX 5 -->
<div class="box a5">
<div class="image_5">
<div class="text">
<h2>Lorem Ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis nisl sed dictum aliquam.
</p>
</div>
</div>
</div>
</div>
Currently the class box
responds by hover
changing the flex
from 1 to 7 to see the image in its entirety.
I would like the Central image to be shown active by default, that is, flex:7;
I have tried to add it directly to the label below style="flex:7;"
but it is shown active even when I do it hover
on another card.
Can I do something with some javascript add.Class
or remove.Class
? I would appreciate any feedback.
Currently by default it shows:
What I'm looking for:
EDIT
I have added a new class called active
and I have removed the class .box:hover
and with a few lines of javascript code the query seems to be working but all my cards with class .box
appear active.
Well I think the problem was that I was adding the class
active
to all the cards and I modified the code so that by default the classactive
is added only to the classa3
that is where I want it to be shown by default.