HTML+CSS+JavaScript

добрый день скажите пожалуйста как сделать чтобы развернуть было по умолчанию, а если человек захочет отправить комментарий он бы нажал на развернуть и добавил бы свой комментарий, а после добавление коммента, опять бы поменялся текст на развернуть. Вот скрипт JS :
Код:
$(document).ready(function(){ $('#form_hide').toggle(function(){ $('#addcom').fadeOut(1000); $(this).text('Развернуть добавление коментариев ');},
function () {$('#addcom').fadeIn(1000); $(this).text('Свернуть добавление коментарие');});});

еще приложу скриншоты
Заранее спасибо.

Какой красивый скриншот!

Помещайте форму в элемент, которому указывайте эффект (собственно этого можно добиться, просто меняя стиль), подобный выше. Если комментарии, это комментарии на форуме, к примеру, то тогда лучше создавать элемент, (за текущим, содержащим пост, или дочерний ему), в нем создавать форму, открывая. Эффекты по вкусу.

обычный динамичный сайт

ты так и не понял когда человек с щелкнул по уроку и перешел в конец форма комментариев была скрыта . как это сделать ?

В русском языке обращение на ВЫ, это значит уважение к собеседнику, не тыкайте не зная того с кем говорите. Не важно, старше вас он, младше вас, просто уважайте человека.

А не поняли вы. Где у вас будет форма - в конце, в начале, в середине, это не имеет значения. Там где она вам нужна, там и помещайте ее, и можете непосредствено к ней применить стиль none/block, можете поместить ее в DIV, к которому данный стиль, что будет лучше, если помимо формы еще что-то скрывать требуется. А применяя jQuery можете добавить различные эффекты ее появления. Вы ведь к тексту применили, так какие трудности сделать тоже самое к блоку?

не получается напиши те не пожалуйста код

вот htm код комментариев

<div id="form_hide">свернуть добавление коментариев</div> <form method="POST" action="#" enctype="multipart/form-data" name="addcom" id="addcom" onSubmit="return false" >  <p class="com_title" ><img src="content_img/images/com_img.PNG">Добавить комментарий:</p><div align='center' id='cerror'></div>   <p class="com_labele">Ваш имя:</p>     <p><input type="text" name="name" class="inputtext" id="name"></p>     <p class="com_labele">Ваш e-mail:</p>     <p><input type="text" name="email" class="inputtext" id="email"></p>         <p class="com_labele">Текст комментария:</p>     <p><textarea id='message' class="comarea" name='comtext' cols='60' rows='5'  ></textarea></p>     <div id="count">500</div><br><br>    <p><img src="<? echo $myrow9["img"]; ?>">   <input name="img" type="tex t" size="10" maxlength="10" id="img"></p>     <p class="com_labele">Введите результат с картинки:</p>     <input name="id" type="hidden" value="<? echo $id; ?>" >     <p ><input class="formbutton" name="button"  type="button" value="Отправить"  onclick="doLoad(document.getElementById('addcom'))"></p>     </form>

где мне прописать dislay:none; ?

Стилю DIV конечно, но только вы поместите в этот DIV все это содержимое.

заключал в div отправку коментариев но не помогло
вот собственно
код \

<div style="display:none"> <form method="POST" action="#" enctype="multipart/form-data" name="addcom" id="addcom" onSubmit="return false" >  <p class="com_title" ><img src="content_img/images/com_img.PNG">Добавить комментарий:</p><div align='center' id='cerror'></div>   <p class="com_labele">Ваш имя:</p>     <p><input type="text" name="name" class="inputtext" id="name"></p>     <p class="com_labele">Ваш e-mail:</p>     <p><input type="text" name="email" class="inputtext" id="email"></p>         <p class="com_labele">Текст комментария:</p>     <p><textarea id='message' class="comarea" name='comtext' cols='60' rows='5'  ></textarea></p>     <div id="count">500</div><br><br>    <p><img src="<? echo $myrow9["img"]; ?>">   <input name="img" type="tex t" size="10" maxlength="10" id="img"></p>     <p class="com_labele">Введите результат с картинки:</p>     <input name="id" type="hidden" value="<? echo $id; ?>" >     <p ><input class="formbutton" name="button"  type="button" value="Отправить"  onclick="doLoad(document.getElementById('addcom'))"></p>     </form></div>

Вот по такому принципу:

<script>  function showForm(e) {    var dv = document.getElementById('ctr');   if(dv.style.display == 'none') {     dv.style.display = 'block';     e.innerHTML = 'Hide';   } else {     dv.style.display = 'none';     e.innerHTML = 'Show';     } }  </script>  <span onClick="showForm(this)">Show</span> <div id="ctr" style="display:none"> <form> <input /> <input type="submit" value="GO" /> </form> </div>

Если теперь к элементу "ctr" применить некий эффект jQuery, вызываемый по клику на span (убрав конечно эту функцию и ее вызов), то будет появляться/исчезать с неким эффектом.

а можно и вот так $('#addcom').hide();

$(document).ready(function(){ $('#form_hide').toggle(function(){ $('#addcom').fadeOut(1000); $(this).text('Развернуть добавление коментариев ');},
function () {$('#addcom').fadeIn(1000); $(this).text('Свернуть добавление коментарие');});});