Скрий/Покажи DIV

[vik96]

Здравейте.Искам да попитам как да направа като имам един ДИВ и отгоре един бутон , като се натисне бутона ДИВ-а да се скрива/показва? Благодаря

 

[devent]

http://dmz.scriptx.info/box/

 

[emagi]

<html>

<head>

<title></title>
<script type="text/javascript">
function showDiv(){
var myDiv = document.getElementById('first');
if(myDiv.style.display=='none'){
myDiv.style.display = 'block';
} else {
myDiv.style.display = 'none';
}
}
</script>
<style type="text/css">
#first {
width:200px;
height:200px;
border:solid 1px red;
display:none;
}
</style>
</head>

<body>
<a href="javascript:;" onclick="showDiv();">Show/Hide Div</a>
<div id="first"></div>
</body>

</html>

 

[koko5]

<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div#first {
width:200px;
height:200px;
border:solid 1px red;
display:none;
}
</style>
<script type="text/javascript" language="javascript">
function showDiv(){
document.getElementById('first').style.display=(document.getElementById('first').style.display!='block')?'block':'none';
return false;
}
</script>
</head>
<body>
<a href="#" onclick="return showDiv();">Show/hide div</a>
<div id="first"></div>
</body>
</html>

8)

 

[shterev]

http://wiki.github.com/madrobby/scriptaculous/effect-toggle

 

[088777_]

devent, ами аз искам да е показано и като се цъкне да се скрие. Как ще стане?

 

[shterev]

видя ли линка който ти пратих. Може да ти се види сложно, но е мн по удобно и е ефектно.

 

[proba]

<!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>Untitled Document</title> 
<script type="text/javascript"> 
function openclose(el)
{
        if (document.getElementById(el).style.display=="block")
        {
                document.getElementById(el).style.display="none";
        }
        else
        {
                document.getElementById(el).style.display="block";
        }
}
</script>
</head> 
<body> 
<a onclick="openclose('info')" title='Покажи / Скрий'>Покажи / Скрий</a>
<div id='info'>
тест тест и пак тест :D
</div>
</body> 
</html>

Заповядай

 

[088777_]

Какво да добавя та когато се натисне на "Покажи" пред него да има картинка "-", а когато си седи нормално без действие върху него да има картинка "+"?

Ето кода ми:

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<script language="javascript">
  function toggleDiv(divid){
    if(document.getElementById(divid).style.display == 'none'){
      document.getElementById(divid).style.display = 'block';
    }else{
      document.getElementById(divid).style.display = 'none';
    }
  }
</script>
<a href="javascript:;" onmousedown="toggleDiv('MURR');">Покажи</a>
<div id="MURR" style="display:none">Текст , Текст , Текст .</div>

 

[vik96]

http://wiki.github.com/madrobby/scriptaculous/effect-toggle искам да използвам този "Слайда" ,но като го направа в ХТМЛ като натисна линка нищо не става...

 

[emagi]

Я виж това

 

[088777_]

Я виж това - http://toggle-demo.hit.bg/index.html

 

[shterev]

трябват ти първо два файла , които са javascript библиотеки
1.Prototype.js
http://script.aculo.us/prototype.js

2.scriptaculous.js
http://script.aculo.us/scriptaculous.js

Слагаш си ги в <head></head>

това е примера:

<div class="demo">
<a href="#nogo" onclick="Effect.toggle('toggle_slide', 'slide'); return false;">Toggle the following paragraph with a ‘slide’-effect</a>

<div id="toggle_slide" style="background:#ccc;">
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>

С червеното е прилагането на ефекта.