• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Toggle Menü Katastrophe

A

austriaman

Mitglied
Ja, also hallo erst mal.

Ich würde gerne etwas wie auf http://orf.at kreieren...

Klickt man da auf einen Link, so wird der dazugehörige Artikel direkt in die Seite geladen und klappt als Toggle-Menü auf.
Das habe ich versucht zu rekonstruieren, wenn auch wenig erfolgreich:

HTML: 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Toggle Toggle</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#toggle").click(function(){
      $("#switch").load("test.txt");
    $("#switch").toggleClass("sichtbar");
  });
});
</script>
<style>
.unsichtbar
{
display: none;
}
.sichtbar
{
display: block;
}
</style>
</head>

<body>
<p><a href="" id="toggle">(Nicht) Anzeigen</a></p>
<p id="switch" class="unsichtbar">Ich bin da ich bin weg</p>
<p>Ich bin immer da</p>
</body>

</html>
Das Resultat ist ein Link, dessen "Inhalt" nur kurz aufblitzt um gleich wieder zu verschwinden; das Laden von externem Content ("test.txt") funktioniert hingegen überhaupt nicht.

Bitte keine Verweise auf völlig andere Lösungen, da ich ja gerne nachvollziehen würde, was genau ich hier falsch mache.

Darüber hinaus wäre es natürlich erstrebenswert, wenn sich ein angezeigter Artikel mit dem Öffnen eines weiteren Artikels wieder schließt, wie es auf orf.at der Fall ist. Wie ließe sich dies bewerkstelligen?

Vielen Dank,
D.D.
 
Viel zu kompliziert. Dafür gibt es die Methode slideToggle().

Mal angenommen, du hast einen Container mit vielen Absätzen.

Code: 
<div id="articles">
  <div class="article">
  <h2>Artikel 1</h2>
    <p>.................</p>
  </div>
  <div class="article">
    <h2>Artikel 2</h2>
    <p>.................</p>
  </div>
  ...............
</div>

Dann wäre so etwas denkbar.

Pseudocode (nicht ausprobiert)
Code: 
$('.article p').hide(); // verstecke alle Artikel nach dem Seitenaufruf

$('.article h2').on('click', function() { // beim Click
  $('.article p').hide(); // hide alle Artikel
  $(this).next('p').slideToggle(); // show/hide den jeweiligen Absatz
})
 
Hallo,

vielen Dank für die Antwort!

Allerdings sind sämtliche aufzuklappende Artikel externe HTML-Dateien. Wie kann ich diese also in die dazugehörigen <div> - Container laden, sobald sie "aktiviert" werden? Sollte doch mit AJAX nicht ein zu großes Problem sein, trotzdem bereitet mir die Kombination mit der toggle Funktion Kopfzerbrechen...

Vielen Dank,
LG, aut.
 
Du bist auf dem falschen Pfad. Die Artikel gehören nicht in einzelne HTML-Dateien sondern in eine Datenbank, und das Laden per Ajax wäre zwar möglich, aber nicht sonderlich performant.

Bevor du über Feinheiten wie slidende Container sprichst, solltest du erstmal über die grundsätzliche Struktur deins Projektes nachdenken. Mit HTML und jQuery alleine ist das nicht umsetzbar. Das heißt, entweder ein CMS einsetzen oder sich selber ein passendes Backend stricken. Beide Ansätze basieren auf PHP und einer Datenbank wie MySQL.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben