Javascript-форум - Кнопка с изменяющимся текстом

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

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Кнопка с изменяющимся текстом (https://javascript.ru/forum/misc/52535-knopka-s-izmenyayushhimsya-tekstom.html)

Кнопка с изменяющимся текстом

Добрый день, есть кнопка скрытия текста.

<html>
  <head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<style>
.class1 {
    background:#088;
}
.class2 {
    background:#688;
}
</style>
  </head>
<body>
<div class="slide">
    <input type="submit" class="class1" name="submit" value="Написать ответ">
</div>
<div class="view" style="display:none;">тут скрытый текст</div>
<script>
$('div.slide').click(function () {
    $('div.view').toggle();
}); 
</script>
</body>
</html>

Помогите сделать так чтоб при первом нажатии (когда блок стает видимым) value менялось на скрыть форму, а так же её класс на class2. И при обратном нажатии когда блок скрывается возвращалась в исходное. т.е. текст value Написать ответ и класс class1.

Заранее большое человеческое спасибо!!!

:-?

<html>
  <head>
  <meta charset="utf-8">
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<style>
.class1 {
    background:#088;

}
.class2 {
    background:#688;
}
.class1 span:nth-child(2), .class1 ~ .view {
  display:none;
}
.class2 span:nth-child(1){
  display: none;
}
.slide{
  display: inline-block;
  cursor: pointer;
}
</style>
  </head>
<body>
<div class="slide class1">  <span>Написать ответ</span><span>Скрыть форму</span>
</div>
<div class="view" >тут скрытый текст</div>
<script>
$('div.slide').click(function () {
    $(this).toggleClass('class1 class2');
});
</script>
</body>
</html>

рони, Добрый вечер! Что то похоже но мне надо именно для кнопки <input type="submit" class="class1" name="submit" value="Написать ответ">

Можно как то реализовать под нее?

zoOmer,
:-?

<html>
  <head><meta charset="utf-8">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<style>
.class1 {
    background:#088;
}
.class2 {
    background:#688;
}
</style>
  </head>
<body>
<div class="slide">
    <input type="submit" class="class1" name="submit" value="Написать ответ">
</div>
<div class="view" style="display:none;">тут скрытый текст</div>
<script>
$('div.slide').click(function () {
   $('input', this).val($('div.view').toggle().is(':hidden') ? 'Написать ответ' : 'Скрыть форму').toggleClass('class1 class2'); 
});
</script>
</body>
</html>

рони, Да да да оно... только вот еще бы менять класс при выводе Скрыть форму...

Цитата:

Сообщение от zoOmer

только вот еще бы менять класс при выводе Скрыть форму

1 непонятно где вы хотите сменить класс.
2 вы вполне это сделаите сами. пример выше

рони, Ну я же объяснял в первом посте что нужно чтоб когда кнопка с текстом Написать ответ у нее был один класс а когда текст кнопки Скрыть форму другой класс..

Мне когда то уже помогали с подобным и похожее на это решение вот тут но я не селен знаниями чтоб соединить его с jq

как то так получается(( http://jsfiddle.net/f01c3rxL/ назад не скрывает...

zoOmer,
смотрите пост 4