Lisäsit haitarin Elementorissa, täytit UKK-osion, tallensit sivun ja huomasit, että ensimmäinen kohta on avoinna. Et avannut sitä. Elementor päätti puolestasi. Tämä toiminta on kovakoodattu widgetiin, eikä sitä voi muuttaa asetuksista. Siistin rakenteen laskeutumissivulla tämä näyttää huolimattomalta, ja jos ensimmäinen lohko on raskas, se rikkoo koko sivun visuaalisen rytmin.

Tämä ongelma on ollut olemassa vuosia. Virallisessa dokumentaatiossa sanotaan suoraan: "The first item of the Accordion widget is expanded on page load." Siinä se. Mutta sinun ei tarvitse tuijottaa väkisin avattua haitaria. Ratkaisuja on neljä, ja jokainen sisältää ohjeet alla.

Alla on menetelmiä Elementor-haitarin sulkemiseksi oletuksena: puolen minuutin koodinpätkästä natiiveihin vaihtoehtoihin ja lisäosiin, joissa on valintaruutu käyttöliittymässä. Nämä menetelmät on testattu Elementor 3.27-4.2 -versioilla (Free ja Pro), ja ne toimivat työpöydällä ja mobiilissa.

💡 Pikakatsaus:

• Lisää JavaScript-pätkä HTML-widgetiin tai mukautettuun koodiin, ja haitari sulkeutuu 100 ms latauksen jälkeen
• Korvaa Haitari Togglella, joka on Elementorin sisäänrakennettu widget, jossa kaikki välilehdet ovat kiinni valmiiksi
• Minimalisteille: CSS-sääntö piilottaa ensimmäisen elementin ilman yhtäkään JavaScript-riviä
• Asenna The Plus Addons tai Essential Addons ja saat natiivin "First tab open" -kytkimen suoraan widgetin asetuksista

Menetelmä 1: JavaScript-pätkä, universaali

Luotettavin menetelmä. Elementor lisää elementor-active-luokan haitarin ensimmäiseen kohtaan latauksen yhteydessä. Sinun tarvitsee vain odottaa renderöintiä ja poistaa tämä luokka.

Pätkä puhtaalla JavaScriptillä, ilman jQuerya:

1
<script>
2
document.addEventListener('DOMContentLoaded', function() {
3
    setTimeout(function() {
4
        const firstItem = document.querySelector('.elementor-accordion-item:first-child');
5
        if (firstItem) {
6
            const title = firstItem.querySelector('.elementor-tab-title');
7
            const content = firstItem.querySelector('.elementor-tab-content');
8
            if (title) title.classList.remove('elementor-active');
9
            if (content) {
10
                content.classList.remove('elementor-active');
11
                content.style.display = 'none';
12
            }
13
        }
14
    }, 100);
15
});
16
</script>

setTimeout-viive, 100 millisekuntia, on kriittinen. Ilman sitä skripti suoritetaan ennen kuin Elementor saa haitarin alustettua, eikä luokkia yksinkertaisesti poisteta. Hitailla hotellipalveluntarjoajilla tai sivuilla, joilla on tusina widgetiä, nosta se 300-500 ms:iin. Elementor-käyttäjät vahvistavat foorumilla: menetelmä on vakaa versioon 4.2 asti.

Mihin se lisätään. Kaksi vaihtoehtoa. Ensimmäinen, HTML-widget: vedä se suoraan haitarin yläpuolelle editorissa ja liitä pätkä. Koodi suoritetaan vain kyseisellä sivulla, eikä se lataudu siellä, missä haitaria ei ole. Toinen, Elementor → Mukautettu koodi WordPressin hallintapaneelissa: luo merkintä, valitse Sijainniksi body ja julkaise. Koodi vaikuttaa globaalisti, mikä on kätevää, kun haitareita on ripoteltu tusinalle sivulle.

Jos sinulla on useita haitareita ja sinun täytyy sulkea ne kaikki, korvaa querySelector komennolla querySelectorAll ja iteroi kokoelma läpi:

1
<script>
2
document.addEventListener('DOMContentLoaded', function() {
3
    setTimeout(function() {
4
        document.querySelectorAll('.elementor-accordion-item').forEach(function(item) {
5
            const title = item.querySelector('.elementor-tab-title');
6
            const content = item.querySelector('.elementor-tab-content');
7
            if (title) title.classList.remove('elementor-active');
8
            if (content) {
9
                content.classList.remove('elementor-active');
10
                content.style.display = 'none';
11
            }
12
        });
13
    }, 100);
14
});
15
</script>

Ei toiminut ensimmäisellä yrittämällä? Melkein aina kyse on ajoituksesta: nosta viive 1000 ms:iin.

Menetelmä 2: Toggle-widget haitarin sijaan

Yksinkertaisin natiivi menetelmä on olla taistelematta haitaria vastaan, vaan käyttää eri widgetiä. Elementor sisältää kaksi työkalua, jotka näyttävät samanlaisilta mutta käyttäytyvät eri tavalla: Haitari ja Toggle.

Keskeinen ero:

Togglea ei erota visuaalisesti haitarista: samat otsikot, samat nuolikuvakkeet, sama animaatio. Mutta kaikki välilehdet ovat kiinni valmiiksi, ilman koodia. Avaa widget-paneeli, etsi Toggle, vedä se sivulle ja lisää kohteita aivan kuten haitarissa. Valmista.

Ainoa vivahde: Toggle sallii useiden välilehtien avaamisen kerralla. Jos logiikka "yksi auki, loput kiinni" on tärkeä, palaa menetelmään 1.

Menetelmä 3: CSS, minimalistinen

Tuntuuko JavaScript liioittelulta? Sulje ensimmäinen elementti puhtaalla CSS:llä:

1
.elementor-accordion .elementor-accordion-item:first-child .elementor-tab-content {
2
    display: none !important;
3
}
4
.elementor-accordion .elementor-accordion-item:first-child .elementor-tab-title {
5
    border-bottom-width: 0;
6
}

Ensimmäinen valitsin piilottaa ensimmäisen välilehden sisällön. Toinen poistaa otsikon alareunuksen, joka näyttää äkilliseltä katkaisulta ilman sisältöä. Sijoita koodi tietyn widgetin "Lisäasetukset → Mukautettu CSS" -osioon (yksittäiselle haitarille) tai Ulkoasu → Mukauta → Lisä-CSS (globaalisti).

Huomio: CSS ei poista elementor-active-luokkaa, vaan ainoastaan piilottaa sisällön visuaalisesti. DOM-puussa välilehti pysyy "aktiivisena". Tämä ei vaikuta sivuston toimintaan, mutta jos käytät mukautettua analytiikkaa haitarin klikkauksille tai kolmannen osapuolen skriptejä, jotka on sidottu luokkaan, toiminta saattaa yllättää. Useimmissa skenaarioissa tämä menetelmä toimii ja on kevyin.

Jos teemasi ohittaa Elementorin tyylit, nosta spesifisyyttä:

1
.elementor-accordion .elementor-accordion-item:first-child .elementor-tab-content.elementor-active {
2
    display: none !important;
3
}

Ei vieläkään toiminut? Teema käyttää todennäköisesti omaa JavaScriptiään pakottaakseen avauksen. Palaa menetelmään 1: JS-pätkä suoritetaan myöhemmin ja ohittaa minkä tahansa teeman toiminnan.

Menetelmä 4: lisäosat natiivilla kytkimellä

Jotkin Elementor-lisäosat lisäävät "First tab open" -vaihtoehdon haitariin, yksi klikkaus koodin sijaan. Kaksi testattua vaihtoehtoa:

The Plus Addons for Elementor. Laajentaa vakiohaitaria Default Open Tab → None -vaihtoehdolla pitäen kaikki välilehdet kiinni. Ilmainen versio riittää. Bonuksena saat sisäkkäiset haitarit, kuvakkeet kirjastosta, shortcodet ja Elementor-pohjat välilehtien sisällä. WordPress.org-sivu.

Essential Addons for Elementor. Kaksi miljoonaa aktiivista asennusta. Tämän lisäosan haitari käynnistyy myös suljetuin välilehdin: Accordion State ja Enable FAQ Schema -vaihtoehdot ovat suoraan widgetin asetuksissa. Jos Essential Addons on jo asennettu muita widgetejä varten (Advanced Data Table, Filterable Gallery), lisäasennusta ei tarvita. WordPress.org-sivu.

Haittapuoli on ilmeinen: yli 100 widgetiä sisältävän liitännäisen raahaaminen yhden vaihtoehdon vuoksi on ylimitoitettua. Mutta jos lisäosa on jo kokoonpanossasi, saat yhden klikkauksen ratkaisun.

⁉️🤔 Usein kysytyt kysymykset

Miksi Elementor ei lisää kytkintä vakiohaitariin?

Kehittäjät eivät ole antaneet tarkkaa syytä. Elementorin GitHub-repositorion keskustelujen perusteella tiimi pitää "ensimmäinen välilehti auki" -toimintaa oikeana saavutettavuuden kannalta. Ominaisuuspyynnöt ovat olleet vireillä vuodesta 2018. Kehityksen prioriteetti on siirtynyt kohti tekoälyominaisuuksia, Flexbox-säiliöitä ja suorituskykyä. Kunnes kytkin ilmestyy, äänestä ongelman puolesta GitHubissa ja käytä menetelmän 1 pätkää.

Skripti ei toimi mobiilissa. Mitä teen?

Puhelimissa ja tableteissa Elementor käyttää samaa merkintää, mutta renderöinti on hitaampaa: heikommat prosessorit, enemmän asynkronisia pyyntöjä. Nosta setTimeout-viive 500-1000 ms:iin. Pätkän siirtäminen alatunnisteeseen wp_footer-koukun kautta auttaa myös: skripti suoritetaan viimeisenä, kaikkien Elementorin tyylien ja merkinnän jälkeen. Työpöydällä ei ole eroa, mutta mobiilissa se on huomattava.

Voinko käyttää jQuery-versiota?

Kyllä, mutta emme suosittele sitä. Versiosta 3.0 lähtien Elementor on siirtynyt natiiviin JavaScriptiin frontendissä. Menetelmän 1 vanilla-pätkä painaa noin 200 tavua verrattuna jQueryn 87 kt:uun (minifoituna), eikä se riipu kirjaston lataamisesta. Jos teemasi tai muut liitännäiset jo lataavat jQueryn, eroa ei ole. Mutta moderneille teemoille puhtaalla JavaScriptillä, kuten Hello Elementor, natiivi vaihtoehto on parempi: vähemmän riippuvuuksia, suurempi nopeus.

CSS-menetelmä ei toimi; ensimmäinen kohta on edelleen näkyvissä.

Teemasi ohittaa Elementorin tyylit korkeammalla prioriteetilla tai käyttää JS:ää pakottaakseen avauksen. CSS on voimaton tässä skenaariossa: teeman skripti suoritetaan myöhemmin ja avaa välilehden uudelleen. Vain menetelmän 1 JS-pätkä ratkaisee ristiriidan kronologisesti: se suoritetaan viimeisenä ja ottaa hallinnan.

Toimiiko pätkä mukautettujen teemojen ja lapsiteemojen kanssa?

Kyllä. Pätkä toimii Elementorin omilla luokilla: .elementor-accordion-item, .elementor-tab-title ja .elementor-tab-content. Nämä eivät riipu teemasta. Testasimme Hello Elementorilla, Astralla, GeneratePressillä ja Kadencella: se toimii identtisesti kaikkialla. Poikkeuksena ovat teemat, jotka korvaavat Elementorin widget-merkinnän kokonaan suodattimien kautta (harvinaista, enimmäkseen premium-paketeissa kuten Avada).

Haitari vai Toggle: kumpi valita

Toggle ratkaisee ongelman ilman koodia, mutta antaa käyttäjien avata useita osioita kerralla. UKK-sivulle tai viiteosioon tämä on jopa plussaa: kävijät näkevät kaikki vastaukset samanaikaisesti. Toggle on natiivi, nopea, eikä vaadi pätkän ylläpitoa Elementorin päivittyessä.

Jos "yksi auki, loput kiinni" -logiikka on välttämätön, käytä haitaria ja menetelmän 1 JavaScriptiä. Nelirivinen pätkä toimii luotettavasti, ei riipu Elementorin versiosta ja sulkee ongelman kokonaan.

Aloita yksinkertaisimmasta vaihtoehdosta: avaa editori, korvaa Haitari Togglella ja tarkista, sopiiko toiminta sinulle. Jos ei, palaa pätkään. Viisi minuuttia, ja haitari näyttää juuri siltä kuin tarkoitit.