innerhalb eines Accordion Elements, SchliessenButton einsetzen

[Doro]

Hi zusammen,
ich verwende Accordion über jQuery.
(template ist geändert, dass das Accordion geschlossen ist)

Kunde möchte in den Akkordionelementen relativ viel Inhalt setzen und somit werden einzelne Contentelemente recht hoch,
wäre es hilfreich dem User nochmal einen gesonderten "Schliessen-Button" anbieten zu können, innerhalb eines Akkordion-Umschlags, unter dem gezeigten Content.
Wie kann das funktionieren, wie ruft man den "Schliessen" Aufruf auf ?

bin leider ohne JS-Kenntnisse
Danke Doro

[fusch]

Hallo Doro,

da würde ich evtl. ein eigenes Element dafür anlegen (z.B. über den dma_elementgenerator) und ähnlich konfigurieren wie hier:
https://www.w3schools.com/howto/tryi...psible_animate

Da das recht übersichtlich ist, sollte man es auch mit wenig JS-Kenntnissen hinbekommen.

Gruß
Hella

[Doro]

Danke für den Tipp, Hella,
teste ich gern.

[tab]

Eventuell reicht es ja schon, wenn man im Template (ce_accordion, ce_accordion_stop, je nachdem ob mit Umschlag oder Einzelelemente) unten an der passenden Stelle den Toggler nochmal einfügt.

[Franko]

Eventuell reicht es ja schon, wenn man im Template (ce_accordion, ce_accordion_stop, je nachdem ob mit Umschlag oder Einzelelemente) unten an der passenden Stelle den Toggler nochmal einfügt.

So würde ich spontan auch vorgehen - allerdings vom habit her etwas ungewöhnlich.
Evtl. ist es in diesem Zusammenhang durchgängiger am Ende des Elements ein Link zur Sprungmarke/toggler - also zum jeweiligen Accordion Anfang zu setzen.

Hier noch ein Link zu hilfreichen Accordion features:
https://community.contao.org/de/show...oll-open-track

[Doro]

den Toggler als Link im Template, meinst Du das so in etwa? <a class="toggler" href="#"></a>
oder ist das zu schlicht gedacht?
Danke und Grüße Doro

[Franko]

den Toggler als Link im Template, meinst Du das so in etwa? <a class="toggler" href="#"></a>
oder ist das zu schlicht gedacht?
Danke und Grüße Doro

Mea Culpa - habe ich selbst noch nicht probiert - aber eher im Sinne von Punkt 3 in https://community.contao.org/de/show...oll-open-track

[Doro]

verstehe ich das richtig, es setzt vorraus, dass jedem "Schliessen-Button" die ID der übergeordneten Seite, nebst ID des togglers mitgegeben würde?

ich hatte gehofft es ginge mittels einer Variablen nach dem Motto: wenn hier noch ein offenes Accordion zu finden ist, schliesse es
bei meiner Recherche fand ich folgenden Ansatz, der das gut beschreibt
https://theme.co/apex/forums/topic/c...ordion-button/
ich wäre nur nicht fähig, es für Contao zu modifizieren:-(

Doro

[Franko]

Ich würde jedem "Akkordeon (Umschlag Anfang)" eine CSS ID vergeben und dann am Ende jedes Accordion Inhalts einfach jeweils wieder zum Anfang scrollen lassen:

<p><a href="{{page::alias}}.html#MEINE-CSS-ID">Zum Anfang</a></p>

Oder versuche es mal hiermit:

<script>
// oder Link mit Klasse "hide" jeweils manuell erstellen
$('.ui-accordion-content .ce_text').append("<p class='hide'>Hide/Collapse this content</p>");

$(".hide").click(function (event) { 
  event.preventDefault();
  $(".ui-accordion-content").slideUp(); 
  //$(".ui-accordion-content").toggle();
  return false;
});
</script>

[Doro]

Hallo Franko,
vielen herzl. Dank für deine Überlegungen, ich werd das am WE testen,
im Prinzip könnte ich auch ganz "dreckig" die Seite neu aufrufen, in welcher das Accordion sitzt und alle sind wieder geschlossen.
Ich wollte es eben so anlegen, dass ein Redakteur sich sehr einfach ein neues Panel anlegen kann
insofern ist dein Vorschlag

<p><a href="{{page::alias}}.html#MEINE-CSS-ID">Zum Anfang</a></p>

eigentlich schon ganz prima.
Tausend Dank für alle Beiträge und ein schönes Wochenende
Doro

[Doro]

Hallo Franko,
das passt prima, vielen Dank dafür ...

Oder versuche es mal hiermit:

<script>
// oder Link mit Klasse "hide" jeweils manuell erstellen
$('.ui-accordion-content .ce_text').append("<p class='hide'>Hide/Collapse this content</p>");

$(".hide").click(function (event) { 
  event.preventDefault();
  $(".ui-accordion-content").slideUp(); 
  //$(".ui-accordion-content").toggle();
  return false;
});
</script>

Genau so hatte ich mir das erträumt:-) you made my day, Herzliches Dankeschön!

...später bemerkt, wenn man nun das Panel mit dem "Close" Button schliesst, und es dann von neuem öffnet braucht es 2 x Mal klicken bevor es sich neu öffnet. Also kennt der accordion-header seinen Status noch nicht, oder?
Viele Grüße Doro

[Franko]

Ungetestet:

$('.ui-accordion-content .ce_text').append("<p class='hide'>Collapse this content</p>");

$(".hide").click(function (event) { 
  event.preventDefault();
  $('.ce_accordion .toggler.active').click();
  
  return false;
});

[Doro]

PERFEKT!!!!!! jetzt passt's optimal und lässt sich sofort beim ersten Click auch wieder öffnen. Tausend Dank Franko
Viele Grüße und guten Start in die Woche