Nachrichten - news_latest zu news_full aufklappen

[doggidog13]

Hallo,

ich suche folgendes,

Ich möchte gerne im "container" sowas in der Art erstellen. Es soll wie das template news_latest aussehen und teasertext sichtbar sein.
Doch das "weiterlesen" soll nich auf eine andere Seite verlinken sondern einfach nach unten aufklappen so eine art accordion, habe schon viel gesucht aber nichts hinbekommen. Ich muss nicht unbedingt das Nachrichtenmodul verwenden, wenn jemand eine passende Erweiterung dafür kennt.

Vielen Dank im vorraus.

[doggidog13]

also hier gibt es ein Bsp: für news_latest
http://jooon.de/content/contao-newsl...rdion-ausgeben

Ich möchte das jetzt gerne angepasst haben, dass ich aus news_latest per akkordeon news_full machen kann.

[schman]

Dann mach das

Anstelle des news_latest.tpl musst du eben news_full.html5 verwenden. Wichtig hierbei ist eigentlich nur, dass die die Überschrifft die Klasse toggler bekommt und das div welches den ausklappbaren Text anzeigen soll die Klasse accordion.

Wenn du jetzt willst das der Weiterlesen Link das aufklappen übernimmt würde ich den link (href) entfernen und dort die Klasse "toggler" eingeben.

[doggidog13]

danke für die Rückmeldung.
Klingt erst einmal logisch, aber ich bekomme es nicht umgesetzt.

das ist mein angepasstes Template

<div class="layout_full block<?php echo $this->class; ?>">

  <?php if ($this->hasMetaFields): ?>
    <p class="info"><time datetime="<?php echo $this->datetime; ?>"><?php echo $this->date; ?></time> <?php echo $this->author; ?> <?php echo $this->commentCount; ?></p>
  <?php endif; ?>

  <h1><?php echo $this->newsHeadline; ?></h1>

  <?php if ($this->hasSubHeadline): ?>
    <h2><?php echo $this->subHeadline; ?></h2>
  <?php endif; ?>

     Toggler
  
    <div class="ce_text block">
      <?php echo $this->teaser; ?>
        <div class="toggler">
          <p>Weiterlesen</p>
        </div>
    </div>
     
    Akkordeon

	<div class="accordion">
	   <?php $this->text?>
           <?php echo $this->text; ?>
	</div>

  <?php if ($this->enclosure): ?>
    <div class="enclosure">
      <?php foreach ($this->enclosure as $enclosure): ?>
        <p><img src="<?php echo $enclosure['icon']; ?>" width="18" height="18" alt="<?php echo $enclosure['mime']; ?>" class="mime_icon"> <a href="<?php echo $enclosure['href']; ?>" title="<?php echo $enclosure['title']; ?>"><?php echo $enclosure['link']; ?> <span class="size">(<?php echo $enclosure['filesize']; ?>)</span></a></p>
      <?php endforeach; ?>
    </div>
  <?php endif; ?>

</div>

jetzt geht der Text auf aber nicht mehr zu. Kann mir da jemand helfen, was ich falsch gemacht habe.
Vor allem geht er statisch auf und "slidet" nicht wie bei einem akkordeon.

[doggidog13]

ich konnte es mitlerweile lösen.

[tblumrich]

ich konnte es mitlerweile lösen.

...bist du so lieb und teilst deine Erkenntnisse auch mit der Community? Ansonsten bringt die obigen Info den anderen hier nicht sehr viel.

Danke.

[doggidog13]

das ist keine allgemeine Lösung, die habe ich schon individuell an meine Bedürfnisse angepasst:

news_full.html5

<section class="<?php echo $this->class; ?> ce_accordion ce_text block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
<div class="layout_full block<?php echo $this->class; ?>">

  <?php if ($this->hasMetaFields): ?>
    <p class="info"><time datetime="<?php echo $this->datetime; ?>"><?php echo $this->date; ?></time> <?php echo $this->author; ?> <?php echo $this->commentCount; ?></p>
  <?php endif; ?>

  <h1><?php echo $this->newsHeadline; ?></h1>

  <?php if ($this->hasSubHeadline): ?>
    <h2><?php echo $this->subHeadline; ?></h2>
  <?php endif; ?>
  
  

  <div class="toggler"<?php if ($this->headlineStyle): ?> style="<?php echo $this->headlineStyle; ?>"<?php endif; ?>>
	<?php echo $this->teaser;?>
  </div>
  
  <div class="accordion"><div>

    <?php if (!$this->addBefore): ?>
      <?php echo $this->text;?>
    <?php endif; ?>

  

  <?php if ($this->enclosure): ?>
    <div class="enclosure">
      <?php foreach ($this->enclosure as $enclosure): ?>
        <p><img src="<?php echo $enclosure['icon']; ?>" width="18" height="18" alt="<?php echo $enclosure['mime']; ?>" class="mime_icon"> <a href="<?php echo $enclosure['href']; ?>" title="<?php echo $enclosure['title']; ?>"><?php echo $enclosure['link']; ?> <span class="size">(<?php echo $enclosure['filesize']; ?>)</span></a></p>
      <?php endforeach; ?>
    </div>
  <?php endif; ?>
</div></div>
</div>
</section>

das wichtige hierbei ist

<section> einzufügen
<div class="accordion">
<div class="toggler">

man kann nun auch, so habe ich das jetzt gemacht, ein image vor den toggler setzten und per css bearbeiten, sprich einfach ein + oder - damit man weiß ob das akkordeon schon geöffnet ist.

  <div class="toggler"<?php if ($this->headlineStyle): ?> style="<?php echo $this->headlineStyle; ?>"<?php endif; ?>>
	<div class="toggler_image"></div>
	<?php echo $this->teaser;?>
  </div>

dann bearbeitet man die classen

classe .toggler_image und
classe .toggler.active .toggler_image

identisch, nur mit einem anderen background-image, je nach dem ob das akkordeon geöffnet oder geschlossen ist, ändert sich das image.