[RISOLTO] Accordion Bootstrap non funzionate all'interno di un articolo

[mahagonny]

Ho costruito questo accordion
https://planespottersbari.it/index.php/spotting-point-1
ma come potete constatare, non funziona.
Posto anche tutto il codice

Codice: [Seleziona]

<p style="text-align: justfy;">Gli spotting point del nostro aeroporto sono visibili consultando la mappa qui in basso. Cliccando sui simboli della macchina fotografica potrete accedere ad una breve descrizione del singolo punto.[br /][br /]</p>
<p style="text-align: justfy;">Vi ricordiamo che, sebbene non sia vietato fotografare, è sconsigliato appoggiarsi alla rete dell'area aeroportuale in quanto la stessa è allarmata e provoca l'intervento delle forze di polizia o della sorveglianza. Queste sono , generalmente, tolleranti con chi si approccia alla rete, ma è buona norma non provocare inutili discussioni che potrebbero rivelarsi deleterie per il nostro hobby.[br /][br /]</p>
<p>&nbsp;</p>


<center><iframe src="https://www.google.com/maps/d/embed?mid=1lS6oTJTwjqQ_NPc0FhowSwCnSMBylxP3&hl=it&ehbc=2E312F" width="640" height="480"></iframe></center>
<p>&nbsp;</p>
<div class="accordion accordion-flush" id="accordionFlushExample">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseFour" aria-expanded="false" aria-controls="flush-collapseFour"> <h3>Spotting point SP210 - Lato Palese.     
        </h3>       
      </button> </h2>
    <div id="flush-collapseFour" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
      <div class="accordion-body"> <img src="images/aw139-VVFF/108.jpg" alt="108" width="621" height="331" />
<p>Spotting point utilizzabile solo di pomeriggio indifferentemente per atterraggi o decolli da entrambe le testate.</p>
      <p>
        Spotting point usable only in the afternoon for landings or take-offs from both heads.
        </p><>
   
    <>
  <>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseFive" aria-expanded="false" aria-controls="flush-collapseFive"><h3>
        Spotting point ALS
        </h1>
       
      </button>
    </h3>
    <div id="flush-collapseFive" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
      <div class="accordion-body"><img src="images/spottingpoint/als.jpg" alt="108" width="621" height="331" />
<p>Spotting point situato all'altezza delle ALS. Suggestivo per le foto con le luci accese e l'aeromobile in atterraggio o decollo.</p>
      <p>
        Spotting point located at the ALS. Suggestive for photos with the lights on and the aircraft landing or taking off.</p>
        <>
    <>
  <>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseSix" aria-expanded="false" aria-controls="flush-collapseSix">
      <h3>Spotting Point Torre Brengola       
        </h3>
      </button>
    </h2>
    <div id="flush-collapseSix" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
      <div class="accordion-body"><img src="images/spottingpoint/torrebrengola.jpg" alt="108" width="621" height="331" />
<p>Spotting point situato sul ponte della ferrovia. Utilizzabile solo di mattina per gli atterraggi dalla 07.</p>
<p>Spotting point located on the railway bridge. Usable only in the morning for landings from 07</p><>
    <>
  <>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseSeven" aria-expanded="false" aria-controls="flush-collapseSeven">
        <h3>
          Spotting point SP210 - Lato radar
        </h3>
      </button>
    </h2>
    <div id="flush-collapseSeven" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
      <div class="accordion-body"><img src="images/spottingpoint/latoradar.jpg" alt="108" width="621" height="331" />
<p>Spotting point da utilizzare esclusivamente di Mattina per decolli ed atterraggi. Queste postazioni sono situate all'altezza dei raccordi "golf", "foxtrot" e taxiway. Nei giorni di intenso calore potrebbe non essere ideale a causa della distorsione provocata dal caldo della pista.</p>
<p>Spotting point to be used exclusively in the morning for take-offs and landings. These stations are located at the "golf" and "foxtrot" junctions and overlook part of the taxiway. On days of intense heat it may not be ideal due to distortion caused by the heat of the track.</p><>
    <>
  <>
   <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseEight" aria-expanded="false" aria-controls="flush-collapseEight">
        <h3>
          Terminal
        </h3>
      </button>
     </h2>
    <div id="flush-collapseEight" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
      <div class="accordion-body"><img src="images/spottingpoint/terminal.jpg" alt="108" width="621" height="331" />
<p>Spotting point da utilizzabile di mattina. Raggiungibile a piedi o con mezzo proprio o pubblico. Si trova fuori dell'area partenze su un ponticello. Limitata visibilità del piazzale e della pista.<p>
        Spotting point perfect to use in morning time. You may reach it with public or private transportation. You can find it out of the departure floor in the terminal, on the bridge.</p><>
    <>
  <>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseNine" aria-expanded="false" aria-controls="flush-collapseNine">
        <h3>
          Testata 25
        </h3>
      </button>
    </h2>
    <div id="flush-collapseNine" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
      <div class="accordion-body"><img src="images/spottingpoint/testata25.png" alt="108" width="621" height="331" />
<p>Spotting point utilizzabile sia di mattina che di pomeriggio. Si trova sotto il piano della pista ed è ottimo per gli atterraggi dalla 25. Si pùo raggiungere a piedi camminando per circa 10 min. dal terminal. È raggiungibile con i bus urbani(linea 19). Non è possibile parcheggiare. Si può lasciare il proprio mezzo presso la stazione di servizi ENI.[br /][br /]Spotting point suitable in morning and afternoon also. It is located on the Main Street near runway 25 threshold and you can shot all the arrivals on this runway. You can reach it by walking about 10 minutes from the terminal. You also can reach it with urban line bus (line n 19). Not possible to park a car here, but you can leave your car 100m ahead in the ENI gas station.</p><>
    <>
  <>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTen" aria-expanded="false" aria-controls="flush-collapseTen">
        <h3>
          Informazioni generali
        </h3>
      </button>
    </h2>
    <div id="flush-collapseTen" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
      <div class="accordion-body">
        <div style="text-align: justify;"><div style="text-align: justify;"><span style="font-size: 14pt;" style="bold">Scala/Stair</span>[br /]È sconsigliato l'uso di scale a ridosso della rete perimetrale a causa di problemi con la sicurezza aeroportuale. Ci stiamo impegnando con la direzione di Aeroporti di Puglia per creare aree precise lungo la rete onde potersi piazzare con le scalette, ben visibili ed identificabili dagli addetti alla sicurezza.[br /][br /]It s not recommended the use of mobile stairs near the fence that may cause problems with the airport security. We are in touch with Aeroporti di Puglia to create specific areas around the fence where we can place the stairs, which will be clearly visible and identifiable from airport security officiers.[br /][br /][br /]
          <div style="text-align: justify;" style="font-size: 14pt;">Mezzi di Trasporto/Transport Vehicles[br /]Per arrivare in aeroporto ci sono molti mezzi pubblici. Per raggiungere gli spotting point lungo la perimetrale, tuttavia, è necessario essere dotati di un mezzo di trasporto personale. In mancanza ci sono lunghi tratti, e non sempre sicuri, da percorrere a piedi.[br /][br /]To reach the airport there are a lot of public transports. To reach the spotting points instead, you may need a personal transport. If you don't have it, you can be required to walk long route, that may not be really Safe to run.
          <span style="font-size: 14pt;">Pernottare/Stay overnight</span>[br /]In zona c'è un solo hotel. Tuttavia nelle vicinanze vi sono diversi bed &amp; brekfast.[br /][br /]In airport area there's only a Hotel, but there are a lot of B&amp;B nearby.
            [br /]<span style="font-size: 14pt;">Cibo/Food</span>[br /]In aeroporto ci sono diversi punti di ristoro. Nella stazione di servizio ENI vicino alla rotonda di ingresso all'aeroporto. Tuttavia lungo la perimetrale e nelle vicinanze degli spotting point sono assenti.[br /][br /]
<div style="text-align: justify;">In the airport there are a lot of refreshment point. Around the airport and the spotting points there aren't unfortunately bar or restaurants. The only one is the ENI gas station, near 25 threshold (mentioned above).
  [br /]<span style="font-size: 14pt;">Servizi igenici/Toilet</span>[br /]Disponibili solo in aeroporto e presso la stazione di servizio ENI come detto.[br /][br /]Available only at the airport and at the ENI service station as mentioned.
          <>
          <><>
    <>
  <>


Ho anche provato a creare un modulo e ad inserirlo nell'articolo ma il modulo non lo carica proprio.
Suggerimenti caritatevoli?
Avete suggerimenti?

[tomtomeight]

Scusa che intendi per costruire, componente, moduli, plugin?

[mahagonny]

Si mi sono espresso mare. Intendevo creare proprio un accordion come puoi vedere nella pagina che ho linkato

[tomtomeight]

Al di fuori di joomla?

[mahagonny]

In che senso? No, ho usato l'editor. di joomla

[$Red]

Ciao, da poco esperto a me sembra avere parecchi errori quel codice, chiusure mancanti ai div, parentesi inutili, ecc.. ti consiglio di prenderlo da qui https://getbootstrap.com/docs/5.0/components/accordion/

[mahagonny]

Ciao. Ho provato anche a mettere il solo codice postato lì dove dici. Non funziona lo stesso.

[tomtomeight]

A parte che google non funziona in iframe, a riprova vedi se funziona  esternamente a joomla, non puoi semplicemente scrivere codice html in un articolo e sperare che funzioni.

[mahagonny]

Grazie, ma questo non mi aiuta data la mia immensa ignoranza.
vorrei solo che questo coso funzioni. 

[giusebos]

Non basta copiaincollare un codice per sperare che questo funzioni.
vengono soddisfatte le richieste delle librerie occorrenti, ovvero bootstrap nella versione usata in quel codice e probabilmente (non ne sono sicuro) del file js?

per la procedura poi devi usare codemirror come editor, così avrai al sicurezza che nessun tag venga "mangiato" dagli editor visuali.

[mahagonny]

Grazie. joomla è quello della 4.4.0 template è la Cassiopeia 1.0. Non saprei sele librerie js siano aggiornate alla versione di bootstrap

[$Red]

semplificati il lavoro... usa questo https://regularlabs.com/tabsaccordions ti inserisce anche un pulsante nell'editor di joomla che ti aiuta nella creazione di tabs e accordions

[mahagonny]

Grazie $Red, mi hai salvato la vita.

[marine]

Bene allora per riconoscenza verso $Red (e tutto il forum) che ti ha salvato la vita (parole tue) perchè non metti il tag [RISOLTO] come si deve? Grazie della collaborazione.

[mahagonny]

chiedo venia.

[xplosion]

Si può fare anche senza l'installazione di plugin di terze parti. Non è per niente complicato.
https://gist.github.com/dgrammatiko/efb3de4aa7cab4813a244f93f73cc0fd#collapse