✔ Div öffnen/schließen

J

JasminB

Grünschnabel
Ich habe folgende Funktion, bei der sich ein div weiter öffnet und schließt, sobald der Nutzer auf das div mit der class facts drückt:

$(".facts").click(function(e) {
if($(this).height() >50) {
$(this).animate({height:50+'px'});
$(this).find('.servicedrop').toggleClass('fa-caret-up fa-caret-down');
$(this).removeClass("facts_active");
}else{
if ( $(".facts_active").length) {
$(".facts_active").animate({height:50+'px'});
}
$(this).animate({height:350 + 'px'});
$(this).find('.servicedrop').toggleClass('fa-caret-down fa-caret-up');
$(this).addClass("facts_active");
}
});

Nun möchte ich, dass, wenn der Nutzer auf einen Link weiter oben klickt, der das .facts Felder anteasert, dass der Nutzer dann zu der Stelle scrollt und das .facts Fenster automatisch auf geht, ohne es noch einmal anzuklicken.

Leider reicht mein javascript Verständnis dafür nicht aus.

Kann mir jemand bitte bitte helfen?

Vielen Dank!
Herzlich
Jasmin
 
Hallo Jasmin,

hier ein Beispiel wie man das ganze umsetzen kann.


Javascript: 
$(document).on('click', 'DEINBUTTON', function(){
    $('html, body').animate({
        scrollTop: $('.facts').offset().top
    }, {
        duration: 2000
    },
    complete: function(){
        $('.facts').trigger('click');
    });
})

Liebe Grüße
 
Hey Splater,

vielen Dank für deine Antwort!

Verstehe ich das richtig, dass hier der Klick simuliert wird? Was bedeutet DEINBUTTON? Muss ich dem Link eine Klasse zuweisen, damit das funktioniert?

DANKE
Jasmin
 
Hey vfl_freak!

Ja, das ist mir bewusst, nur ist mein Button ein einfacher Link und ich weiß nicht wie ich mit der Information umgehen soll, dass ich da etwas einfügen soll :oops:
 
Hallo Jasmin,

ja, in diesem Fall wird der Klick simuliert.

Mit fällt jedoch gerade auf, das die Trigger-Variante sehr unschön ist, da, falls die Box bereits geöffnet ist, durch den Trigger die genannte Box geschlossen wird.

Besser:

Javascript: 
$(document).on('click', 'DEINBUTTON', function () {
    var old_this = $(this);
    $('html, body').animate({
        scrollTop: $('.facts').offset().top
    }, {
        duration: 2000
    }, {
        complete: function () {
           old_this.animate({height: 350 + 'px'});
            old_this.find('.servicedrop').toggleClass('fa-caret-down fa-caret-up');
            old_this.addClass("facts_active");
        }
    });
});

"DEINBUTTON" ist der Platzhalter für Deinen Selektor, welcher das Scroll-Event auslöst.

Wenn Du zum Beispiel im Head-Bereich einen Button oder Link hast:
Code: 
<a href="#" id="doSomething">ABC</a>

Kannst Du den Klick über den Selektor
Javascript: 
$(document).on('click', $('#doSomething'), function(){
abfangen.
 
Vielen vielen Dank,

an sich habe ich das verstanden. Leider scrolle ich an die Stelle, aber das Element wird nicht geöffnet.

Wo muss ich den Code am besten einfügen? Header und Footer haben nicht funktioniert, vielleicht nach der Funktion?

Gibt es im Browser ne Funktion wo ich testen kann woran es liegt, dass das script nicht ausgeführt wird?

Entschuldigt meine Unwissenheit :(
 
Hallo Jasmin,

der Code war ungetestet und wie es meistens so ist, war ein Fehler drin.

Hier die bei mir lauffähige Version.

Javascript: 
$(document).on('click', 'HIERDEINSELEKTOR', function() {
  var facts = $('.facts');
  $('html, body').animate({
    scrollTop: $('.facts').offset().top
  }, {
    duration: 2000,
    complete: function() {
      facts.animate({
        height: 350 + 'px'
      });
      facts.find('.servicedrop').toggleClass('fa-caret-down fa-caret-up');
      facts.addClass("facts_active");
    }
  });
});

Platziere den Code am besten am Ende des Body-Bereichs.

Liebe Grüße
 
Noch eine kleine Frage. Beim scrollen scrollt er jetzt ein bisschen zu weit. Das merke ich immer, wenn ein kleiner scrolleffekt drin ist, damit es "smooth" scrollt, dass er dann nicht exakt an der Position landet, wo er landen soll. Hast du da vielleicht noch einen Tipp?

DANKE
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück