elementi (li) personalizzati manualmente con spaziatura

[jeyjack]

Ciao, a mio parere "manualmente" è sempre sinonimo di "artigianale"; a meno che non parliamo di cestini in vimini e coltelli sardi in corno di muflone, non è mai la soluzione migliore per applicazioni web.

Ciao KillerWorm effettivamente quella che sembra la soluzione più semplice, non sempre è la migliore.
Proverò ad applicare i tuoi consigli, però ti chiedo di darmi una mano a sbrogliare un pò di grattacapi che derivano dal dovere inserire nell'OL alcuni elementi senza numerazione e dovendo integrare il tutto nello Javascript che permette di espandere e contrarre il contenuto (tree view)

Utilizzando il seguente codice (alternando UL e OL):

<ul id="myUL">      <li><span class="caret"><b>Kalam</b></span>        <ul class="nested">          <li><span class="caret">Craig</span>            <ol class="num-list">            <div class="spacing"></div>              <li>Whatever begins to exist has a cause.</li>              <li>The universe began to exist.</li>              <li>Therefore, the universe has a cause.</li>              <li><span class="baret"> </span>            <ul class="bested">              <li>William Lane Craig, <i>The Kalam Cosmological Argument</i> (Wipf & Stock, 1979). Mark Nowacki, <i>The Kalam Cosmological Argument for God</i>, (Prometheus Books, 2007). William Lane Craig and James Sinclair, “The Kalam Cosmological Argument,” in Craig and Moreland (eds.), <i>The Blackwell Companion to Natural Theology</i>, (Blackwell, 2009), ch. 3. Jabocus Erasmus, <i>The Kalam Cosmological Argument: A Reassessment</i> (Springer, 2018).</li>            </ul>            </ol>

Ho ottenuto questo:
RISULTATO

ho provveduto a pubblicare una pagina dove verificare le modifiche in atto (unica sezione modificata si trova sotto COSMOLOGICAL > Kalam > Craig dove ho provato ad applicare l'Ordered List


Come visibile si sono presentati quindi due problemi:

1) Avendo sostituito la classe "caret" con la classe "num-list" lo javascript che permette di contrarre/riespandere l'item "Craig" ha smesso di funzionare
2) Vorrei evitare che comparisse la numerazione nr. (4) e (5) in quanto si tratta di un iconcina che mostra i riferimenti e che non va quindi numerata

Per quanto riguarda il problema (1) e' legato a questo Javascript:

<script>window.addEventListener("DOMContentLoaded", e => {
  // Original JavaScript code by Chirp Internet: chirpinternet.eu
  // Please acknowledge use of this code by including this header.


  const getContainerHeight = el => {
    return window.getComputedStyle(el).getPropertyValue("height");
  };


  const setTransitionHeights = el => {


    let containerWasOpen = el.classList.contains("open");


    el.style.height = null;


    el.classList.remove("open", "ready");
    el.dataset.initial = getContainerHeight(el);


    el.classList.add("open");
    el.dataset.final = getContainerHeight(el);
    el.classList.remove("open");


    if (containerWasOpen) {
      el.classList.add("open");
      el.style.height = el.dataset.final;
    } else {
      el.style.height = el.dataset.initial;
    }


    el.classList.add("ready");


  };


  document.querySelectorAll(".collapsible.slow").forEach(current => {


    let toggler = document.createElement("div");
    toggler.className = "toggler";
    current.appendChild(toggler);


    setTransitionHeights(current);


    toggler.addEventListener("click", e => {
      current.style.height = current.classList.toggle("open") ? current.dataset.final : current.dataset.initial;
    });


  });


  window.addEventListener("resize", e => {


    document.querySelectorAll(".collapsible.slow").forEach(current => {
      setTransitionHeights(current);
    });


  });


  var toggler = document.getElementsByClassName("caret");
  var i;


  for (i = 0; i < toggler.length; i++) {
    toggler[i].addEventListener("click", function() {
      this.parentElement.querySelector(".nested").classList.toggle("active");
      this.classList.toggle("caret-down");


      // Qui reimposto le altezze del contenitore corrente ed eseguo la transizione
      
      const collapsible = this.closest('.collapsible.slow');
      const curHeight = getContainerHeight(collapsible);
      setTransitionHeights(collapsible);
      collapsible.style.height = curHeight;
      setTimeout(() => {
        collapsible.style.height = collapsible.dataset.final
      }, 0)


    });
  }
});
</script>

Che prevede il funzionamento soltanto con gli elementi "caret", ho appurato che se copio l'intero javascript e sostituisco la parte dove viene citato il "caret" con un altro elemento, lo script funziona, ma vorrei evitare di copiare l'intero javascript per ogni classe che vado ad utilizzare per la numerazione, c'e' un modo per includerne diverse modificando questo stesso javascript? (Qui riconosco le mie carenze con Javascript)

HINT: ricorda di usare il validatore. Nella pagina lincata vedo che gli errori stanno crescendo sempre di più rispetto all'ultimo problema; meglio correggerli da bambini prima che prendano il sopravvento.

Ad esempio vedo diversi <div class="spacing"></div> che hai posto come figli di elementi <ul>, ma un elemento <ul> può avere solo figli <li>. Se il tuo intento è quello di creare un margine iniziale, esistono modi più consoni usando opportunamente il CSS.

Ma vabbè, viva l'artigianato

Ti prometto che appena sistemo questa questione delle numerazioni, sistemero' i vari problemi di validazione presenti. Ti ringrazio anticipatamente per il tuo supporto!