Lisasid Elementoris akordioni, täitsid KKK sektsiooni, salvestasid lehe ja märkasid, et esimene element on avatud. Sa ei avanud seda. Kuid Elementor otsustas sinu eest. See käitumine on vidinasse sisse kodeeritud ja seda ei saa seadetes muuta. Puhta struktuuriga maandumislehe jaoks näeb see lohakas välja ja kui esimene plokk on mahukas, lõhub see kogu lehe visuaalse rütmi.

See probleem on eksisteerinud aastaid. Ametlik dokumentatsioon ütleb otse: "Akordioni vidina esimene element on lehe laadimisel avatud." Nii ongi. Kuid sa ei pea sundkorras avatud akordioni vahtima. On neli lahendust ja igaüks sisaldab allpool juhiseid.

Allpool on meetodid Elementori akordioni vaikimisi sulgemiseks: alates 30-sekundilisest koodijupist kuni natiivsete alternatiivide ja lisamooduliteni, millel on liideses märkeruut. Neid meetodeid on testitud Elementori versioonidel 3.27-4.2 (Free ja Pro) ning need töötavad laua- ja mobiilseadmetes.

💡 Kiire ülevaade:

• Lisa JavaScripti koodijupp HTML-vidinasse või kohandatud koodi ja akordion sulgub 100 ms pärast laadimist
• Asenda akordion Toggle'iga, mis on Elementori sisseehitatud vidin, kus kõik vahelehed on karbist väljas suletud
• Minimalistidele: CSS-reegel peidab esimese elemendi ilma ühegi JavaScripti reata
• Paigalda The Plus Addons või Essential Addons ja saa vidina seadetesse natiivne "First tab open" lüliti

1. Meetod: JavaScripti koodijupp, universaalne

Kõige usaldusväärsem meetod. Elementor lisab laadimisel esimesele akordioni elemendile klassi elementor-active. Sa pead lihtsalt ootama renderdamise lõppu ja eemaldama selle klassi.

Koodijupp puhtas JavaScriptis, ilma jQueryta:

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 viivitus 100 millisekundit on kriitiline. Ilma selleta käivitub skript enne, kui Elementor lõpetab akordioni initsialiseerimise ja klasse lihtsalt ei eemaldata. Aeglastel majutusteenuse pakkujatel või tosina vidinaga lehtedel suurenda seda 300-500 ms-ni. Elementori kasutajad kinnitavad foorumis: meetod on stabiilne kuni versioonini 4.2.

Kuhu see sisestada. Kaks võimalust. Esiteks, HTML-vidin: lohista see redaktoris otse akordioni kohale ja kleebi koodijupp. Kood töötab ainult sellel konkreetsel lehel ja ei laadi seal, kus akordioni pole. Teiseks, Elementor → Custom Code WordPressi administraatori paneelis: loo kirje, vali asukohaks body ja avalda. Kood rakendub globaalselt, mis on mugav, kui akordionid on mööda tosinat lehte laiali.

Kui sul on mitu akordioni ja pead need kõik sulgema, asenda querySelector väärtusega querySelectorAll ja itereeri üle kogu:

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 töötanud esimesel katsel? Peaaegu alati on see ajastuse probleem: suurenda viivitust 1000 ms-ni.

2. Meetod: Toggle'i vidin akordioni asemel

Lihtsaim natiivne meetod on mitte akordioniga võidelda, vaid kasutada teist vidinat. Elementor pakub kahte tööriista, mis näevad välja sarnased, kuid käituvad erinevalt: Accordion ja Toggle.

Peamine erinevus:

Toggle on visuaalselt akordionist eristamatu: samad pealkirjad, samad nooleikoonid, sama animatsioon. Kuid kõik vahelehed on karbist väljas suletud, koodi pole vaja. Ava vidinate paneel, leia Toggle, lohista see lehele ja lisa elemendid täpselt nagu akordionis. Valmis.

Ainus nüanss: Toggle võimaldab korraga avada mitu vahelehte. Kui loogika "üks avatud, ülejäänud suletud" on oluline, mine tagasi 1. meetodi juurde.

3. Meetod: CSS, minimalistlik

JavaScript tundub üleliigne? Sulge esimene element puhta CSS-iga:

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
}

Esimene selektor peidab esimese vahelehe sisu. Teine eemaldab pealkirja alumise äärise, mis ilma sisuta näeb välja nagu järsk katkestus. Paiguta kood konkreetse vidina jaotisse "Advanced → Custom CSS" (konkreetse akordioni jaoks) või Appearance → Customize → Additional CSS (globaalselt).

Märkus: CSS ei eemalda klassi elementor-active, vaid peidab ainult visuaalselt sisu. DOM-puus jääb vaheleht "aktiivseks". See ei mõjuta saidi funktsionaalsust, kuid kui kasutad akordioni klikkide jaoks kohandatud analüütikat või klassiga seotud kolmanda osapoole skripte, võib käitumine üllatada. Enamiku stsenaariumide puhul see meetod töötab ja on kõige kergem.

Kui sinu teema kirjutab Elementori stiilid üle, suurenda spetsiifilisust:

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

Ikka ei töötanud? Teema kasutab tõenäoliselt laiendamise sundimiseks oma JavaScripti. Mine tagasi 1. meetodi juurde: JS-koodijupp käivitub hiljem ja kirjutab üle igasuguse teema käitumise.

4. Meetod: natiivse lülitiga lisamoodulid

Mõned Elementori lisamoodulid lisavad akordionile valiku "First tab open", üks klikk koodi asemel. Kaks tõestatud võimalust:

The Plus Addons for Elementor. Laiendab standardset akordioni valikuga Default Open Tab → None, hoides kõik vahelehed suletuna. Tasuta versioon on piisav. Boonusena saad pesastatud akordionid, teegi ikoonid, lühikoodid ja Elementori mallid vahelehtede sees. WordPress.org leht.

Essential Addons for Elementor. Kaks miljonit aktiivset paigaldust. Selle lisamooduli akordion algab samuti suletud vahelehtedega: valikud Accordion State ja Enable FAQ Schema on otse vidina seadetes. Kui Essential Addons on juba teiste vidinate (Advanced Data Table, Filterable Gallery) jaoks paigaldatud, pole täiendavat paigaldamist vaja. WordPress.org leht.

Puudus on ilmne: ühe valiku pärast 100+ vidinaga pistikprogrammi lohistamine on liialdus. Kuid kui lisamoodul on juba sinu seadistuses, saad ühe kliki lahenduse.

⁉️🤔 Korduma kippuvad küsimused

Miks Elementor ei lisa standardsesse akordioni lülitit?

Arendajad pole täpset põhjust andnud. Elementori GitHubi repositooriumi arutelude põhjal peab meeskond "esimene vaheleht avatud" käitumist ligipääsetavuse seisukohast õigeks. Funktsioonitaotlused on ootel alates 2018. aastast. Arenduse prioriteet on nihkunud AI-funktsioonide, Flexbox-konteinerite ja jõudluse suunas. Kuni lüliti ilmub, hääleta GitHubis selle teema poolt ja kasuta 1. meetodi koodijuppi.

Skript ei tööta mobiilis. Mida teha?

Telefonides ja tahvelarvutites kasutab Elementor sama märgendust, kuid renderdamine on aeglasem: nõrgemad protsessorid, rohkem asünkroonseid päringuid. Suurenda setTimeout viivitust 500-1000 ms-ni. Aitab ka koodijupi jaluseossa viimine wp_footer konksu kaudu: skript käivitub viimasena, pärast kõiki Elementori stiile ja märgendust. Lauaarvutis pole vahet, kuid mobiilis on see märgatav.

Kas ma saan kasutada jQuery versiooni?

Jah, kuid me ei soovita seda. Alates versioonist 3.0 on Elementor esikülje jaoks üle läinud natiivsele JavaScriptile. 1. meetodi vanilla-koodijupp kaalub umbes 200 baiti võrreldes 87 KB-ga jQuery puhul (minifitseeritult) ega sõltu teegi laadimisest. Kui sinu teema või muud pistikprogrammid juba laadivad jQueryt, pole vahet. Kuid kaasaegsete teemade puhul puhtal JavaScriptil, nagu Hello Elementor, on natiivne variant parem: vähem sõltuvusi, suurem kiirus.

CSS-meetod ei tööta; esimene element on endiselt nähtav.

Sinu teema kirjutab Elementori stiilid kõrgema prioriteediga üle või kasutab laiendamise sundimiseks JS-i. CSS on selles stsenaariumis jõuetu: teema skript käivitub hiljem ja avab vahelehe uuesti. Ainult 1. meetodi JS-koodijupp lahendab konflikti kronoloogiliselt: see käivitub viimasena ja võtab kontrolli.

Kas koodijupp töötab kohandatud teemade ja alamteemadega?

Jah. Koodijupp opereerib Elementori enda klassidega: .elementor-accordion-item, .elementor-tab-title ja .elementor-tab-content. Need ei sõltu teemast. Testisime Hello Elementori, Astra, GeneratePressi ja Kadence'iga: see töötab igal pool identselt. Erandiks on teemad, mis asendavad filtrite kaudu täielikult Elementori vidinate märgenduse (harv, enamasti premium-pakettides nagu Avada).

Accordion või Toggle: kumba valida

Toggle lahendab probleemi ilma koodita, kuid võimaldab kasutajatel avada mitu sektsiooni korraga. KKK-lehe või viitejaotise jaoks on see isegi pluss: külastajad näevad kõiki vastuseid üheaegselt. Toggle on natiivne, kiire ega vaja koodijupi hooldust Elementori uuendamisel.

Kui loogika "üks avatud, ülejäänud suletud" on hädavajalik, kasuta akordioni ja 1. meetodi JavaScripti. Neljarealine koodijupp töötab usaldusväärselt, ei sõltu Elementori versioonist ja sulgeb probleemi täielikult.

Alusta kõige lihtsamast variandist: ava redaktor, asenda Accordion Toggle'iga ja kontrolli, kas käitumine sobib. Kui mitte, mine tagasi koodijupi juurde. Viis minutit ja akordion näeb välja täpselt selline, nagu sa kavatsesid.