Jak rozbalit div pomocí js/jquery?

Zdravím,
když se podíváte na claire.eessencia.cz a poklikáte tam >>> Zobrazit LIVESTREAM a vedle >>> Zobrazit LIVECHAT
Zobrazí a nebo zmizí Vám 2 divy, které obsahují to co obsahují.

Chtěl bych ale ten efekt doplnit spíš o rozbalovací efekt směrem dolů.
Bohužel mé znalosti JS a jQuery jsou malé.
Nedokázal by mi tu někdo jednoduše doplnit do kódu to co je k tomu třeba?

JS pro dosavadní bliknutí je toto:

  <script language="JavaScript">
    function toggle(id){
      var state = document.getElementById(id).style.display;
      if (state == 'block'){
        document.getElementById(id).style.display = 'none';
      } else {
        document.getElementById(id).style.display = 'block';
      }
    }
  </script>

Děkuji mnohokrát.

Předmět	Autor	Datum
3MB obrázek na pozadí a celková velikost stránky přes 6.5 MB? To si děláš srandu ne? Wikan 14.08.2012 07:45	Wikan	14.08.2012 07:45
Za prvé, ten web není dodělaný, první hledím na kód, na konec až optimalizuji rychlost. Za druhé, mě… Eessencia 14.08.2012 10:35	Eessencia	14.08.2012 10:35
Za prvé, dělat web tak, že "není zoptimalizovaný" je naprostá blbost. Není třeba něco "optimalizovat… Kráťa 14.08.2012 11:05	Kráťa	14.08.2012 11:05
Ne opravdu to nedělám proto, abych si tam mohl plesknout "optimalizováno pro...". Jsem prostě zvyklí… Eessencia 14.08.2012 11:10	Eessencia	14.08.2012 11:10
Možná ti to přijde divné, ale Wikan profík je (a kalibru dost velkého). Kráťa 14.08.2012 11:39	Kráťa	14.08.2012 11:39
Aha, tak proto, když jsem tam vlezl z mobilu, zamrzl celý mobil, až jsem jej po deseti minutách rest… Kráťa 14.08.2012 10:54	Kráťa	14.08.2012 10:54
To je můj styl, když dělám web nehledím na rychlost, tu řeším jako poslední a tak mi to vyhovuje. Te… Eessencia 14.08.2012 10:57	Eessencia	14.08.2012 10:57
Na té samé stránce se mi líbí víc tohle od Freda (i jsem vyzkoušel a uložil si "na někdy". <div id=… poslední Kráťa 14.08.2012 12:08	Kráťa	14.08.2012 12:08

3MB obrázek na pozadí a celková velikost stránky přes 6.5 MB? To si děláš srandu ne?

Za prvé, ten web není dodělaný, první hledím na kód, na konec až optimalizuji rychlost.
Za druhé, měl by ses naučit číst, protože na rady ohledně velikosti jsem se neptal, to si zase děláš asi srandu ty ne?

Za prvé, dělat web tak, že "není zoptimalizovaný" je naprostá blbost. Není třeba něco "optimalizovat", když to děláš normálně. Ale to bys pak nemohl mít dole nápis "Optimalizováno pro Internet Explorer 8, 2500 x 1680, 5 GByte/s".
Za druhé. Na rady ohledně velikosti ses sice neptal, ale dal jsi sem link, že mi zamrzl mobil, když jsem tam vlezl.
Nicméně našel jsem ti to (zadal jsem v Google "vysouvací div"). Podle mě se to dá udělat vícero způsoby i bez načítání knihoven a jánevímčeho (není to však animované).

<html>
  <head>
    <script src="jquery.js"></script>
    <script>
      $(function() {
        $("#test").click(function() {
          $(this).animate({width: 1000}, 500);
        });
      });
    </script>
    <style>
      #test {
        width: 100px;
        height: 100px;
        border: 1px solid #000000;
      }
    </style>
  </head>
  <body>
    <div id="test"></div>
  </body>
</html>

74455-vysouvaci-div

Ne opravdu to nedělám proto, abych si tam mohl plesknout "optimalizováno pro...".
Jsem prostě zvyklí a naučený, že velikost obrázků řeším až na konec. Pokud se to někomu zdá podivné, či až srandovní, tak mě je to vcelku jedno a budu dělat to, co mi vyhovuje.
Chápu, že jsem na to byl upozorněn, ale chtělo by to lekce slušného chování a ne hned, "no to si snad děláš srandu ne?". To pak vypadá jak kdyby pán, položejíc tuto otázku byl profík největšího kalibru a kdokoliv se tu na cokoliv zeptá je naprostej trotl.

Edit -> Každopádně díky.

Možná ti to přijde divné, ale Wikan profík je (a kalibru dost velkého).

Aha, tak proto, když jsem tam vlezl z mobilu, zamrzl celý mobil, až jsem jej po deseti minutách restartoval. On ale asi nezamrzl a celou dobu načítal web od smrtky

To je můj styl, když dělám web nehledím na rychlost, tu řeším jako poslední a tak mi to vyhovuje.
Tento web není ani určen pro mobily, je určen pro herní guildu WoW, se streamováním.
Ale abych vyhověl alespoň částečně. Celkovou velikost webu jsem zredukoval o víc než 60%.

Teď už by bylo ale fajn, kdyby se tu našel nějaký človíček, který by poradil k tématu, ne mimo, to mě vážně nezajímá.

Na té samé stránce se mi líbí víc tohle od Freda (i jsem vyzkoušel a uložil si "na někdy".

<div id="message" style="background:blue;"><a id="rsdv"  style="color:white" title="+" href="#">+</a></div> 
<div style="background:yellow">bla bla</div>

<script>
var d=document;
function sh(id1,id2){
ele=document.getElementById(id2);
ele.style.height='20px';

d.getElementById(id1).onclick=function(){
if(this.title=='-'){h();this.removeAttribute('rel');this.title='+';return false;}
else{s();this.setAttribute('rel','on');this.title='-';return false;}};
d.getElementById(id1).onkeypress=function(){return this.onclick;};
}
function h(){
var end=20;if(parseInt(ele.style.height,10)>end){
ele.style.height=parseInt(ele.style.height,10)-20+"px";setTimeout(h,1);
}
}
function s(){var end=400;if(parseInt(ele.style.height,10)<end){
ele.style.height=parseInt(ele.style.height,10)+20+"px";setTimeout(s,1);
}
}


sh('rsdv','message');
</script>

74455-vysouvaci-div

Zpět do poradny Odpovědět na původní otázku Nahoru