Форум

zoOmer · #1 (**permalink**) 23.12.2014, 13:56

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

<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.

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

рони · #2 (**permalink**) 23.12.2014, 14:12

<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>

zoOmer · #3 (**permalink**) 28.12.2014, 20:04

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

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

рони · #4 (**permalink**) 28.12.2014, 20:23

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 · #5 (**permalink**) 28.12.2014, 21:16

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

рони · #6 (**permalink**) 28.12.2014, 21:23

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

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

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

zoOmer · #7 (**permalink**) 28.12.2014, 21:29

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

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

zoOmer · #8 (**permalink**) 28.12.2014, 22:04

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

рони · #9 (**permalink**) 28.12.2014, 22:09

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

Форум

Справочник

Discord чат

Курсы javascript