2

Estoy creando mi portfolio de Desarrollador Web luego de haber estado meses estudiando HTML y CSS e incursionando actualmente en JavaScript.

En mi sección de Hardskills decidí agregar un poco de interactividad para la información acerca de CSS diseñando esto:

Sección Hardskills

¿Y luego?

Cuando yo prosigo a clickear sobre el botón 'Read More' ubicado bajo el logo de CSS se abre un container de información acerca frameworks, Sass, y CSS puro.

Interfaz

El problema

La funcionalidad que deseé darle es casi perfecta en su realización, pero hay algo que me molesta y que aún no tengo los conocimientos para editarlo completamente por mi cuenta: la información comienza a mostrarse únicamente al hacer click sobre algún logo (Bootstrap, Tailwind, etc...)

introducir la descripción de la imagen aquí

¿Qué estoy buscando?

Al presionar el 'Read More' que abre el container oculto sucede que no hay ningún tipo de información y me parece poco estético, busco entender de qué manera puedo dejar por defecto seleccionado el primer ítem: en este caso sería Bootstrap, es decir, que quede así al presionar el botón 'Read More'.

Deseo

Códigos:

HTML

<div class="hardskills-readmore">
    <button class="readmore-btn" id="readmore_btn">Read More</button>
    <div class="hide" id="hideText">
        <ul>
            <li class="li bs"><i class='bx bxl-bootstrap'></i></li>
            <li class="li tw"><i class='bx bxl-tailwind-css' ></i></li>
            <li class="li sass"><i class='bx bxl-sass' ></i></li>
            <li class="li css-pure"><i class='bx bxs-file-css'></i></li>
        </ul>
        <div class="container">
            <div class="block">
                <h5><a href="https://getbootstrap.com/">Bootstrap</a></h5>
                <p>Like many, <b>Bootstrap</b> was the first framework I used in CSS. Personally I don't like it because it messes up the readability of the HTML code. Beyond my preferences, I usually use it if I need something punctual and fast.</p></div>
            <div class="block">
                <h5><a href="https://tailwindcss.com/">Tailwind CSS</a></h5>
                <p>Unlike Bootstrap, <b>Tailwind</b> seems to me to be a much neater and cleaner framework with respect to code translation. </p>
                <p>In addition to the above highlights, I believe that this project created by Wathan and Schoger offers much more extensive customization.</p>
            </div>
            <div class="block">
                <h5><a href="https://sass-lang.com/">Sass</a></h5>
                <p>Truly my favorite tool! <b>Sass</b>, just like the name says, is awesome.</p>
                <p>In itself, the fact of being able to work the project in such an organized way thanks to imports and nestings is a real madness.  In addition, being able to add variables, mixins, make extends... SCSS is my best friend when it comes to styles.</p>
            </div>
            <div class="block">
                <h5>Pure CSS</h5>
                <p>Before learning about and using the above tools I devoted a great deal of attention to understanding the roots of <b>cascading style sheets</b>.</p>
                <p>When it comes to layout I excel in the use of grid, flex and finally box-modeling for small details.</p>
            </div>
        </div>
    </div>
</div>

CSS (SCSS)

.hardskills-readmore{
@include flex(column, center, center);
margin: 10px 0px;
    button{
        border-radius: 0px;
        box-shadow: 0px 3px 0px #000000;
        font-family: Arial;
        color: #000000;
        font-size: 20px;
        background: #ffffff;
        padding: 10px 20px 10px 20px;
        border: solid #000000 2px;
        text-decoration: none;
        cursor: pointer;
            &:hover{
                transition: .5s;
                background: #8bd9d5;
                text-decoration: none;
                color: #fff;
            }
            &:hover:active{
                transform: translateY(3px);
                box-shadow: 0px 0px 0px #000000;
                color: black;
            }
    }
    .hide{
    display: none;
    @include glassmorphism(shadow);
    margin: 10px 0px;
    width: 100%;
    padding: 1em;
        ul{
            width: 100%;
            @include flex(row, flex-start, center);
            flex-wrap: nowrap;
        }
        li{
            @include glassmorphism(shadow);
            list-style-type: none;
            padding: 1em;
            margin: 0 2em 0 0;
            cursor: pointer;
            transition: all .5 ease;
                i{
                    margin: auto;
                    font-size: 50px;
                }
        }
        li.active{
            color: white;
            font-weight: bold;
        }
        li.bs.active{
            background-color: #5a23c8;;
        }
        li.tw.active{
            background-color: #19B3B8;
        }
        li.sass.active{
            background-color: #D56EA3;
        }
        li.css-pure.active{
            background-color: #009BDE;
        }
        .container{
            min-width: 100%;
            min-height: 30vh;
            position: relative;
        }
        .block{
            margin: 1em 0em;
            padding: 1em;
            position: absolute;
            top: 0;
            opacity: 0;
            transition: all .5 ease;
                h5{
                    font-size: 20px;
                    text-decoration: underline;
                    margin-bottom: 10px;
                    a{
                        text-decoration: none;
                        color: black;
                    }
                }
                p{
                }
        }
        .block.active{
            opacity: 1;
        }
    }
    .show{
        transition: all .5 ease;
        display: block;
    }
}

JavaScript

const li = document.querySelectorAll('.li')
const block = document.querySelectorAll('.block')

li.forEach((cadaLi, i)=>{
    li[i].addEventListener('click',()=>{

        li.forEach((cadaLi, i)=>{
            li[i].classList.remove('active')
            block[i].classList.remove('active')
        })

        li[i].classList.add('active')
        block[i].classList.add('active')
    })
})
7
  • No sé si te funcionará al 100%, pero prueba poner justo antes del li.forEach (debajo de const block ....) las líneas li[0].classList.add('active') y block[0].classList.add('active').
    – Jaime
    Commented el 30 may. 2022 a las 5:30
  • @JaimeMenéndez si lo coloca justo antes del forEach añadirá la clase active para luego en el forEach quitarla, por lo tanto el comportamiento sería el mismo. Debería ir una vez acaba el bucle. Commented el 30 may. 2022 a las 5:35
  • Nop, la clase no la quita hasta que no des un click. Nota que el remove lo tienes dentro de un addEventListener. ¿Lo probaste?
    – Jaime
    Commented el 30 may. 2022 a las 5:37
  • Aunque da igual también si la pones luego del bucle. Es lo mismo. Como te comenté, todo lo que está dentro del addEventListener solo se va a ejecutar única y exclusivamente cuando se haga click. Antes o después da igual, solo inicializa el primer li y el primer block con la clase active. Alternativamente puedes ponerla directa en el html en los dos elementos que quieras que estén inicializados.
    – Jaime
    Commented el 30 may. 2022 a las 5:54
  • Para mi, basta con usar click sobre el botón que desees dentro del manejador de evento que uss al hacer clic sobre el botón de mostrar más. Commented el 30 may. 2022 a las 6:08

1 respuesta 1

0

La solución fue la dictada por @Suso. Con darle la clase 'active' tanto al ícono de BS como a su respectivo div contenedor de texto ha quedado marcado por default.

1
  • No olvides aceptar tu respuesta cuando transcurra el tiempo mínimo.
    – padaleiana
    Commented el 30 may. 2022 a las 20:04

Tu Respuesta

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

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