VanillaJS

by NunoMira

HTML

<div className="buapsList">
                                            <details key="1">
                                                <summary id=24>
                                                    <div className="accordionTitle" onClick={handleBackgroundAccordion} onMouseLeave={handleMouseLeaveAccordion} onMouseEnter={handleMouseEnterAccordion}>{objParsed.geojson.properties.local}</div>
                                                    <div className="accordionIcon" onClick={openAccordion}><i className="bi bi-chevron-right arrowRight"></i></div>
                                                </summary>
                                                <div className="description">Isto aqui vai ser fixe porque vamos poder pôr a aparecer todo o detalhe que quisermos de cada BUAP.</div>
                                            </details>
                                            
                                                                                        <details key="1">
                                                <summary id=25>
                                                    <div className="accordionTitle" onClick={handleBackgroundAccordion} onMouseLeave={handleMouseLeaveAccordion} onMouseEnter={handleMouseEnterAccordion}>{objParsed.geojson.properties.local}</div>
                                                    <div className="accordionIcon" onClick={openAccordion}><i className="bi bi-chevron-right arrowRight"></i></div>
                                                </summary>
                                                <div className="description">Isto aqui vai ser fixe porque vamos poder pôr a aparecer todo o detalhe que quisermos de cada BUAP.</div>
                                            </details>
                                            
                                                                                     
                                            </div>

CSS

/*--------------------------------------------------------------
# buaps.css
--------------------------------------------------------------*/

.buapsListSubtitle {
    font-size: 14px;
    margin-left: 95px;
    font-weight: normal;
    font-style: italic;
    margin-left: 0px;
    margin-bottom: 1.2rem;
    line-height: 1.2;
}

.buapsList {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: flex-start;
    align-items: center;
}

/* .buapsList a {
    color: black;
    text-decoration: underline;
}
.buapsList .buapLine {
    padding: 5px 0px;
}
.buapsList a:hover {
    color: var(--theme-color);
    cursor: pointer;
} */

/**************************/
/***Localizaçao dos BUAP***/
/**************************/
.buapsList details {
    width: 100%;
    min-height: 5px;
    /* max-width: 700px; */
    /* padding: 5px 5px 5px 10px; */
    /* padding: 0.5rem; */
    margin: 0 auto;
    position: relative;
    /* font-size: 22px; */
    /* border: 1px solid rgba(0,0,0,.1); */
    border: 1px solid #c1bebe;
    /* border-radius: 15px; */
    box-sizing: border-box;
    /* transition: all .3s; */
    cursor: pointer;
}

/* details + details {
    margin-top: 20px;
} */

.buapsList details[open] {
    min-height: 50px;
    background-color: #f6f7f8;
    /* box-shadow: 2px 2px 20px rgba(0,0,0,.2); */
}

.buapsList summary {
    display: flex!important;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    cursor: pointer;
    line-height: 14px;
}

.buapsList details > summary {
    list-style: none;
    /*
    padding: 0.5rem;
    border: 2px solid transparent;
    */
    border-top-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
}

.buapsList summary::-webkit-details-marker {
    display: none
}

/*
.buapsList summary::after {
    content: '►';
}
.buapsList details[open] + summary:after {
    content: "▼";
}
.buapsList...

JavaScript

function toggleBackgroundAccordion(e) {
        var className = 'themeBackgroundBuaps';
        if (e.classList.contains(className)) { //SE FOR NECESSÁRIO: se carregar num accordion que estiver chekado.. descheka-se
            console.log("VAMOS DESCHEKAR!");
            //removeClassNameInDocument(className);

            //enviar ainformação para o cmponente do mapa
            //setPointCheckedId(null);
        }
        else { //se for carregar num accordion que n estiver chekado.. cheka-se
            //console.log("VAMOS CHEKAR O PONTO: "+e.id);
            removeClassNameInDocument(className);
            document.getElementById(e.id).classList.add(className);

            //enviar a informação para o componente do mapa
            //setPointCheckedId(e.id);
        }
    }
    function handleBackgroundAccordion(e) {
        //anular o evento normal
        e.currentTarget.parentElement.click();

        //toglar o backgound do item da lista
        toggleBackgroundAccordion(e.currentTarget.parentElement);
    }
    function handleMouseEnterAccordion(e) {
        console.log("Entrou no buaps mouseenter!");
        //setPointHouverId(e.currentTarget.parentElement.id);
    }
    function handleMouseLeaveAccordion(e) {
        console.log("Entrou no buaps mouseleave!");
        //setPointHouverId(null);
    }
    function openAccordion(e) {
        //anular o evento normal
        e.currentTarget.parentElement.click();

        let element = e.currentTarget.closest('details');
        if (element.hasAttribute('open'))
            element.removeAttribute('open');
        else
            element.setAttribute('open','');
    }