jQuery Konfiguration

Hier ein paar Beispiele.

$(document).ready(function(){
  $("#accordion").accordion({
    collapsible:!0,
    active:0,
    event:"click",
    heightStyle:"content",
    animate: {duration:"2000",easing:"swing"}
  })
});  

Das Scrollicon ermöglicht dem Besucher, zum Beginn der Seite zu springen. Dazu wird eine Schaltfläche generiert, die an einem Platz über der Seite schwebt.
Hier finden Sie das CSS dazu.

$(document).ready(function(){
  $(".scrollicon").click(function(){
    return $("html, body").animate({scrollTop:0},500),!1})
  });
});

Bootstrap 4 erlaubt die Einbindung eines Mega Menus, mit dem Inhalte für eine Navigation responsiv für mehrere Ebenen und mit individuellem Layout erstellt werden können. Dazu ist die Einbindung dieses kurzen JavaScripts notwendig. Der Aufbau der Navigation geht über ein TypoScript. Die Inhalte bekommen dann über ein eigenes Style Sheet ihr Layout.

$(document).ready(function() {
  $(".megamenu").on("click", function(e) {
    e.stopPropagation();
  });
});  

$(document).ready(function () {
  $(".liste_inhalt:visible").hide();
  $(".liste_titel").mouseover(function () {
    $(".liste_inhalt").show();
  });
  
  $(".liste_fuss").click(function () {
    $(".liste_inhalt:visible").hide();
  });
});

$(document).ready(function () {
  $(".div_neu_content:visible").hide();
  
  $(".div_neu_div").mouseover(function () {
    $(".div_neu_content:visible").hide();
    $(this).next("div").slideToggle(200);
  });
  
  $(".div_neu_titel").mouseleave(function () {
    $(".div_neu_content:visible").hide(200);
  }); 
});

Wenn man nicht einzelne CSS Attribute bearbeiten will, kann man auch Styles zuweisen bzw. entfernen

$(document).ready(function () {
  $(".div_tab_titel").mouseover(function () {
    $(".div_tab_titel").removeClass('div_tab_titel_hover'); 
    $(this).addClass('div_tab_titel_hover'); 
  });  
});  

In diesem Fall werden einzelne CSS Attribute geändert.

$(document).ready(function () {
  $("#content").slideToggle(1);
  
  ## Titel beim MouseOver formatieren
  ## Einzelne Style Attribute überschreiben
  $(".div_tab_titel").mouseover(function () {
    $(".div_tab_titel").css('background-color', '#2d80a8');
    $(".div_tab_titel").css('border-bottom-color', '#2d80a8');
    $(".div_tab_titel").css('color', '#ffffff');
    $(this).css('background-color', '#efefe7');
    $(this).css('color', '#2d80a8');
    $(this).css('border-bottom-color', '#efefe7');
  });
      
  ## Inhalte der Tabs bei MouseOver anzeigen
  $("#tab[dang='0']").mouseover(function() {
    $(".div_tab_content:visible").hide();
    $("#content[dings='0']").slideToggle(1);
  });
  $("#tab[dang='1']").mouseover(function() {
    $(".div_tab_content:visible").hide();
    $("#content[dings='1']").slideToggle(1);
  });
  $("#tab[dang='2']").mouseover(function() {
    $(".div_tab_content:visible").hide();
    $("#content[dings='2']").slideToggle(1);
  });
  $("#tab[dang='3']").mouseover(function() {
    $(".div_tab_content:visible").hide();
    $("#content[dings='3']").slideToggle(1);
  });
});