0

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:

introducir la descripción de la imagen aquí

Lo que ando buscado:

introducir la descripción de la imagen aquí

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.

1 respuesta 1

0

Bueno creo que el problema era que le estaba agregando la clase active a todas las cards y modifique el codigo para que por defecto la clase active se agregue unicamente a la clase a3 que es donde quiero que se muestre por default.

   <script>
    $(document).ready(function() {

        $(".a3").addClass("active");


        $(".box").hover(function() {
            $(".box").removeClass("active");
            $(this).addClass("active");
        });

    });
    </script>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.