Javascript-форум - свернуть развернуть.

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - свернуть развернуть. (https://javascript.ru/forum/dom-window/28845-svernut-razvernut.html)

свернуть развернуть.

<script type="text/javascript">

window.onload=function(){
  var i=0;
  if(i==0){ 
   $('#headb').click(function(){
      $('#bodyb').slideUp(500);
   });
   i++;
  }else{if(i>0){
   $('#headb').click(function(){
      $('#bodyb').slideDown(500);
   });
   i--;
  }
}
</script>

атакую форум)))
вроде по логике вещей правильно делаю (по своей логике). но не работает. мош поправит кто?=)

Oh my God!

$('#headb').click(function(){
    $('#bodyb').slideToggle("slow");
});

Цитата:

Сообщение от beard (Сообщение 178889)

Oh my God!

$('#headb').click(function(){
    $('#bodyb').slideToggle("slow");
});

спасибо, а вот таким образом как я ) можно поправить что не правильно.

$('#headb').click(function(){
    if ($('#bodyb').css("display") == "block") {
       $('#bodyb').slideUp(500);
   }else{
      $('#bodyb').slideDown(500);
   }
});

все остальное у тебя мусор

понял , спасибо)

а как на jquery осуществить такое развёртывание

-------------
верх
|
|свёртывать туда (slideDown)
|
V

низ
--------------

frant32,
обрамляете в div block с фиксированной высотой и внутренний сворачиваете, у внутреннего делаете такие привязки

margin-top:auto;
margin-bottom:0!important;

вот обернул , развертывать стал откуда надо (блок) , но всё равно с верху , а нужно разворачивать снизу..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Документ Без Имени</title>
<script type="text/javascript">
</script>
<style type="text/css">
#gallery { width:570px;height:375px; background:#CCCCCC; border-radius:15px; margin:0px auto}
#lpic{ width:370px;height:365px; background:#666666; border-radius:12px; margin:5px;float:left; position:relative;}
#spic{width:185px; height:365px; background:#666666; border-radius:12px;top:5px; margin-left:380px;position:relative; }
div#spic img {width:85px; height:85px; position:relative;left:5px; margin-top:5px; border-radius:8px;}
div#spic img:hover {width:81px; height:81px; position:relative;left:5px; margin-top:5px; border-radius:8px; border: dashed 2px #cccccc;}
div#lpic img { width:360px; height:355px; position:relative;left:5px; margin-top:5px; border-radius:8px; background:#FFFFFF; z-index:0;}
div#alt{width:360px; height:60px; background:#666666; border-bottom-left-radius:8px;border-bottom-right-radius:7px; left:5px; top:300px; position:absolute; z-index:1; opacity:0.6;display:none; font-size:28px; text-align:center; font-family: Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF;margin-top:auto;
margin-bottom:0!important; }

</style>
<script src="http://code.jquery.com/jquery-1.7.2.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
  $("#spic img").click(function() {
    $("#largepic").attr("src",$(this).attr("src"));
	$('#largepic').attr('alt',$(this).attr("alt"));
  });
  $('#lpic').hover(function(){
      $('#alt').slideDown('slow'); $('#alt').html( $('#largepic').attr("alt")  ); },
  function(){
   $('#alt').slideUp('slow'); }
  );
});
</script>
</head>
<body>
<div id='gallery'> 
 <div id='lpic'>
  <div><div id='alt'></div></div> 
  <img id='largepic'/>
  
 </div>
 <div id='spic'>
  <img  alt="pic1" src="http://im4-tub-ua.yandex.net/i?id=225745906-46-72"/>
  <img  alt="pic2" src="http://im4-tub-ua.yandex.net/i?id=225745906-46-72&n=17"/>
  <img  alt="pic3" src="http://im8-tub-ua.yandex.net/i?id=5648272-06-72"/>
  <img  alt="pic4" src="http://im6-tub-ua.yandex.net/i?id=367196349-12-72"/>
  <img  alt="pic5" src="http://im5-tub-ua.yandex.net/i?id=107622380-10-72"/>
  <img  alt="pic6" src="http://im5-tub-ua.yandex.net/i?id=321975975-33-72"/>
  <img  alt="pic7" src="http://im6-tub-ua.yandex.net/i?id=367196349-12-72"/>
  <img  alt="pic8" src="http://im8-tub-ua.yandex.net/i?id=465839557-47-72"/>
 </div>
</div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Документ Без Имени</title>
<script type="text/javascript">
</script>
<style type="text/css">
#gallery {
  width:570px;
  height:375px; 
  background:#CCCCCC;
  border-radius:15px;
  margin:0px auto
}
#lpic{
  position:relative;
  float:left; 
  width:370px;
  height:365px; 
  background:#666666;
  border-radius:12px;
  margin:5px;
}
#spic{
  width:185px;
  height:365px;
  background:#666666;
  border-radius:12px;
  top:5px;
  margin-left:380px;
  position:relative;
 }
div#spic img {
  width:85px; height:85px;
  position:relative;
  left:5px;
  margin-top:5px;
  border-radius:8px;
}
div#spic img:hover {
  width:81px;
  height:81px;
  position:relative;
  left:5px;
  margin-top:5px;
  border-radius:8px;
  border:dashed 2px #cccccc;
}
div#lpic img {
  width:360px;
  height:355px;
  position:absolute;
  left:5px;
  margin-top:5px;
  border-radius:8px;
  background:#FFFFFF;
  z-index:0;
}
div#alt{
  margin-bottom:0!important;
  bottom:0!important;
  margin-top:auto;
  position:absolute;
  z-index:1;
  opacity:0.6;
  display:none;

  width:360px;
  height:60px;
  background:#666666;
  border-bottom-left-radius:8px;
  border-bottom-right-radius:7px;
  left:5px;

  font-size:28px;
  text-align:center;
  font-family: Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF;
  }
</style>

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

<script>
$(document).ready(function(){
  $("#spic img").click(function() {
    $("#largepic").attr("src",$(this).attr("src"));
	 ('#largepic').attr('alt',$(this).attr("alt"));
  });
  $('#lpic').hover(function(){
     $('#alt').slideDown('slow'); $('#alt').htm1( $('#1argepic').attr("alt")  );},
     function(){$('#alt').slideUp('slow'); 
  });
});
</script>
</head>
<body>

<div id='gallery'> 
  <div id='lpic'>

    <div id='alt'></div>

    <img id='largepic'/>

  </div>

  <div id='spic'>
     <img  alt="pic1" src="http://im4-tub-ua.yandex.net/i?id=225745906-46-72"/>
     <img  alt="pic2" src="http://im4-tub-ua.yandex.net/i?id=225745906-46-72&n=17"/>
     <img  alt="pic3" src="http://im8-tub-ua.yandex.net/i?id=5648272-06-72"/>
     <img  alt="pic4" src="http://im6-tub-ua.yandex.net/i?id=367196349-12-72"/>
     <img  alt="pic5" src="http://im5-tub-ua.yandex.net/i?id=107622380-10-72"/>
     <img  alt="pic6" src="http://im5-tub-ua.yandex.net/i?id=321975975-33-72"/>
     <img  alt="pic7" src="http://im6-tub-ua.yandex.net/i?id=367196349-12-72"/>
     <img  alt="pic8" src="http://im8-tub-ua.yandex.net/i?id=465839557-47-72"/>
  </div>

</div>
</body>
</html>