Accordeon mit hash öffnen j_accordion.html5

Hallo,
ich verwende bei den Jobs das Accordeon.
Ich würde gerne direkt auf einen Job mit hash verlinken können: z.B. http://waermepumpe-vom-profi.at/jobs.html#lehrling
Falls schon jemand ein Template hat, mit dem das geht, ich wäre dafür sehr dankbar.
Ich krieg das leider nicht hin.
Danke!

Willkommen im Forum!

Hilft Dir vielleicht dieser Eintrag hier?

Habe den über die Tolle Suchfunktion Contao Google-Suche gefunden.

Als Suche habe ich eingegeben: accordion mit anker öffnen

Ich weiss dass es am Anfang nicht ganz einfach ist die Sachen hier im Forum zu finden ... vor allem wenn man die Bezeichnungen nicht kennt oder Sie falsch wählt ;) Genau deswegen haben wir ja auch so ein tolle/s Forum & Community :)

Ist ja gut und schön, dass du den Leuten googlen hilfst,
aber kennst du auch eine Lösung für ein j_accordion?

Ist hier im forum nichts zu finden gewesen.

operatorone

http://www.contao.glen-langer.de/akk...en-lassen.html

hier ein tutorial zum öffnen vom akkordeons

anker setzen über tinyMc und beim link einfach den #anker mit angeben

in dem fall aus dem beispiel-tutorial oben:

<a href="beispiel.html?aid=2#lehrling" title="Beispielseite">Beispielseite mit Akkordeon Link</a>

@operatrone
In erster Linie habe ich das Thema nach 2Tagen wieder hochgeholt und den Neuling begrüsst.

Zweitens, ja ich habe zum Suchen angeregt ging aber anscheinend in die Hose ;)

Drittens in solchen Fällen, wenn man wirklich schnelle Hilfe will, sollte man es den Lesern/JS Spezialisten einfach machen und so ein j_accordion.html mal den code posten. Es ist schon in vielen Themen vorgekommen, dass gemeinsam eine Lösung gefunden wurde! Und in verschiedenen Schritten was gemeinsam erarbeitet wurde.

Hier der Code aus der Vorlage (j_accordion.html5):

Code:

---

<script src="<?php echo TL_ASSETS_URL; ?>assets/jquery/ui/<?php echo JQUERY_UI; ?>/jquery-ui.min.js"></script>
<script>
(function($) {
  $(document).ready(function() {
    $(document).accordion({
      // Put custom options here
      autoHeight: false,
      header:'div.toggler'
    });
    var activate = function(tog) {
      var tgs = $('div.toggler');
      tgs.removeClass('active');
      tog.addClass('active');
      tgs.next('div.accordion').attr('aria-hidden', 'true');
      tog.next('div.accordion').attr('aria-hidden', 'false');
    }
    $('div.toggler').focus(function(e) {
      $('div.toggler').attr('tabindex', 0);
      $(this).attr('tabindex', -1);
    }).blur(function() {
      $(this).attr('tabindex', 0);
    }).click(function() {
      activate($(this));
    }).keypress(function(event) {
      if (event.keyCode == 13) activate($(this));
    });
  });
})(jQuery);
</script>

---

Zitat:

---

Zitat von operatrone

Ist hier im forum nichts zu finden gewesen.

---

Du sprichst in der Vergangenheit ... hast Du was gefunden? Gibts ein Link? Wenn ja, wäre nett wenn Du Deine Erkenntnis teilst .. oder zur Lösung beiträgst ... alles andere ist Platzverschwendung :)

Hi,

@manuelo
Vielen Dank für deinen Post. Dieses Tutorial hatte ich schon im Auge, war mir aber nicht sicher, ob es auch für j_query funktioniert, weil immer nur von mootools gesprochen wurde. Oder muss es bezüglich mootools noch angepasst werden?

@ciaobello
Ich habe wie gesagt noch nichts gefunden und auch im Moment nur den Standard-Template-Code laufen. Falls manuelo noch was dazu sagt oder ich im Netz noch etwas hilfreiches finde, werde ich es gerne posten.

Viele Grüße,
operatorone

also das beisspiel geht nur für mootools, wie man ja in dem tutorial sieht, muss man das accordion template
dementsprechend konfigurieren und dann einfach den anker mit dranhängen...
gruß elo

Da ja genanntes Tutorial wie gesagt für das Mootools Template gilt, möchte ich das Thema noch einmal aufgreifen, da ich vor dem gleichen Problem stehe und eine Lösung mittles jquery suche. Weiß jemand Rat?

Funktioniert wie in dem Tutorial von Langer http://www.contao.glen-langer.de/akk...en-lassen.html
mit folgender anpassung für j_accordion.html5

Code:

---

<?php

$aid = '0'; // default first open
if ( is_numeric($this->Input->get('aid')) )
{
  $aid=(int)$this->Input->get('aid');
}
?>
<script src="<?php echo TL_ASSETS_URL; ?>assets/jquery/ui/<?php echo JQUERY_UI; ?>/jquery-ui.min.js"></script>
<script>
  (function($) {
    $(document).ready(function() {
      $(document).accordion({
        // Put custom options here
      active: <?php echo $aid ?>,
        heightStyle: 'content',
        header: 'div.toggler',
        collapsible: true
      });
      var activate = function(tog) {
        var tgs = $('div.toggler');
        tgs.removeClass('active');
        tog.addClass('active');
        tgs.next('div.accordion').attr('aria-hidden', 'true');
        tog.next('div.accordion').attr('aria-hidden', 'false');
      };
      $('div.toggler').focus(function(e) {
        $('div.toggler').attr('tabindex', 0);
        $(this).attr('tabindex', -1);
      }).blur(function() {
        $(this).attr('tabindex', 0);
      }).click(function() {
        activate($(this));
      }).keypress(function(event) {
        if (event.keyCode == 13) activate($(this));
      });
    });
  })(jQuery);
</script>

---

Ja, das hatte ich mir im Laufe des gestrigen Abends auch schon zurecht gebastelt. Hier habe ich aber ein Problem, wenn ich nicht über einen Anker mit aid-Referenz zum Akkordeon springe: Rufe ich die Seite mit dem Akkordeon regulär auf, bleibt mein letzter Akkordeon-Umschlag stets geöffnet, was wohl daran liegt, dass keine aid-Referenz zur Ausgabe da ist. Habe es mit Hilfe einer if/else Abfrage folgendermaßen gelöst:

Code:

---

<script src="<?php echo TL_ASSETS_URL; ?>assets/jquery/ui/<?php echo JQUERY_UI; ?>/jquery-ui.min.js"></script>

<script>
  (function($) {
    $(document).ready(function() {
      $(document).accordion({
        // Put custom options here
        heightStyle: 'content',
        header: 'div.toggler',
        collapsible: true,
        active: <?php $aid=$this->Input->get('aid');
                            if  ($aid== '') {echo "false";}
                            else {echo $aid;}?>,       
      });

     
      var activate = function(tog) {
        var tgs = $('div.toggler');
        tgs.removeClass('active');
        tog.addClass('active');
        tgs.next('div.accordion').attr('aria-hidden', 'true');
        tog.next('div.accordion').attr('aria-hidden', 'false');
      };
      $('div.toggler').focus(function(e) {
        $('div.toggler').attr('tabindex', 0);
        $(this).attr('tabindex', -1);
      }).blur(function() {
        $(this).attr('tabindex', 0);
      }).click(function() {
        activate($(this));
      }).keypress(function(event) {
        if (event.keyCode == 13) activate($(this));
      });
    });
  })(jQuery);
</script>

---

Das Problem hat Bugbuster ja mit "is_numeric" gelöst, problematisch wird es allerdings, wenn der aid-wert höher ist, als die Anzahl der panel.

Hi,

nach der zuletzt genannten Methode habe ich das nun auch gelöst - aber wie bekomme ich es hin, dass dem aktiven Element die CSS Klasse "active" zugewiesen wird? Beim der normalen Bedienung (Klick auf Abschnitte) wird die Klasse hinzugefügt, beim Sprung über Anker/ aid nicht.

pipkin