Metoda slideToggle v jQuery

Naslednja metoda - slideToggle deluje tako: če je element skrit - ga prikaže, če je prikazan - ga skrije. Prednost te metode je v tem, da lahko vse to obesimo na en gumb in ne na dva, kot je bilo v prejšnjih lekcijah.

Oglejmo si naslednji primer. Naj bo naš HTML koda takšna:

html<button id="toggle">click me</button>
<div id="elem">text...</div>

Prav tako je CSS:

css#elem {
  padding: 10px;
  width: 150px;
  height: 150px;
  border: 1px solid green;
  margin-top: 10px;
}

Zdaj pa napišimo kodo, da se ob kliku na en gumb element ali skrije ali prikaže:

javascript$('#toggle').click(function() {
  $('#elem').slideToggle(1000);
});