Estoy intentando hacer un acordeón para mostrar unas imágenes con CSS nada mas, sin embargo me gustaría que uno de las imágenes del acordeón estuviera activo por defecto.
$(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>
Actualmente la clase box
responde al hover
modificando el flex
de 1 a 7 para ver la imagen en su totalidad.
Me gustaria que la imagen Central se muestre activa por defecto, es decir con flex:7;
he intentado agregarsela directamente en la etiqueta bajo style="flex:7;"
pero se muestra activa aun cuando hago hover
sobre otra card.
Puedo hacer algo con javascript alguna add.Class
o remove.Class
? Agradecería cualquier comentario.
Actualmente por defecto se muestra:
Lo que ando buscado:
EDIT
He agregado una nueva clase llamada active
y he eliminado la clase .box:hover
y con unas lineas de codigo javascript el query parece estar funcionando pero todas mis card con clase .box
aparecen activas.