Как добавить стиль к элементу при клике?

Question

[Наталия]

Добрый день!
на один вопрос мне уже ответили (спасибо за это), но хотелось бы добавить к нему следующее:
необходимо изначально задать положение блоку "Открыть тут", например, top: 10px, а при клике на него задать для блока "Свернуть" стиль: top: 0px.
ссылка на предыдущее решение, которое нужно дополнить тут:
https://codepen.io/AndrewHaze/pen/LLbXPL

Answer 1

[Влад]

Можно добавить в стиль:

.click_box {
  position: relative;
  top: 10px;
}

А JS так:

$( ".click_box" ).on( "click", function() {
  $(".hidden_box, .text_box").toggleClass("hide");
  if ($(this).text() == "Открыть тут") { 
    $(this).text("Скрыть").css("top", 0);
  } else { 
    $(this).text("Открыть тут").css("top", "10px");
  }
});

P.S. Сделал немножко короче

Comments

[Наталия]

спасибо, но при первом клике вместо "Скрыть" появляется "Открыть тут", второй раз кликаешь - появляется Скрыть, когда нужно, чтоб появилось "Открыть тут".

[Влад]

Наталия: Странно, у меня хорошо работает :)

[Наталия]

Result007: может, отправите на jsfiddle код ? если есть возможность, конечно.

[Влад]

Наталия: Вот ссылка, можно я что не так понял)

[Наталия]

Result007: хорошо, только замените, пожалуйста, в строке 6 на top 50px:
$(this).text("Открыть тут").css("top", "50px");
нужно , чтоб фраза Открыть тут изначально была сдвинута на 50px, а у Свернуть было top 0px

[Влад]

Наталия: В стиле .click_box просто инициализируйте top: 50px =)

[Наталия]

Result007: да, точно ) пятница она такая. Спасибо большое !

[Наталия]

Result007: может, Вы знаете как повесить событие при клике не на див с текстом, а на див с текстом и еще с иконкой ?

<div class="click_box"> Открыть тут <div class="icon"> </div> </div>

[Влад]

Наталия: К сожалению сейчас не могу, не у ПК, через пару часов если ещё будет нужно, с радостью помогу!

[Наталия]

Result007: да, нужно. Спасибо, что помогаете.

[Наталия]

Result007: Вопрос еще актуален.

[Влад]

Наталия: Можно попробовать сделать так :)

[Наталия]

Result007: спасибо, но иконка должна быть только у "Открыть тут", у "Свернуть" ее не должно быть .

[Влад]

Наталия: Попробуйте так, немножко удобнее сделал :)

[Наталия]

Result007: да, это то, что надо . Спасибо Вам большое! )

Answer 2

[Stalker_RED]

Можно так: https://jsfiddle.net/8c80hhqv/
При клике переключается класс active у обертки а все скрытие/показывание и сдвигание кнопок вынесено в css.

Comments

[Наталия]

вариант хороший, но у меня нет кнопок. кликать нужно по диву

<div class="click_box"> Открыть тут <div class="icon"> </div> </div>

(может, заодно подскажете как повесить событие при клике не весь этот див, даже если в нем еще есть один с иконкой, например. А-то сейчас работает только если там текст)

[Stalker_RED]

Наталия:

$('.click_box').on('click', function(){
  // ...
})

Вот чем больше я читаю ваши вопросы, тем более любопытно мне становится - что вы вообще пытаетесь сделать? Если научиться работать с jQuery, то вам стоило бы вернуться на пару шагов назад, к основам html и css, и к ванильному js, чтоб хоть немного понимать что вообще происходит в браузере. Иначе вас ждет огромная череда очень тупых вопросов™.

[Наталия]

Stalker_RED: большое спасибо за ответ. Я еще только учусь, поэтому и задаю такие тупые вопросы. Это нормально с чего-то начинать, мне так думается. Гугл мне не особо помог, поэтому и спрашиваю тут. Еще раз спасибо за помощь.

Answer 3

[photozoom]

$( ".click_box" ).on( "click", function() {
  $(".hidden_box").toggleClass("hide");
  $(".click_box").css("top", function(i,val){
	if($(this).css("top") == '10px')
	   return '100px';
	else
	   return '10px';
    });
  $(".text_box").toggleClass("hide");
  if ($(".click_box").text() == "Открыть тут")
    { $(".click_box").text("Скрыть") } 
  else 
    { $(".click_box").text("Открыть тут") }
});

Comments

[Наталия]

спасибо за ответ, но тоже почему-то при первом клике фраза Открыть тут не меняется на слово Свернуть, а остается такой же- Открыть тут. При повторном нажатии (когда скрытый контент убирается) меняется на слово Скрыть, а нужно менять на Открыть тут.

[photozoom]

$(document).ready(function () {
			$(".click_box").css("top",'10px');
});

$( ".click_box" ).on( "click", function() {
  $(".hidden_box").toggleClass("hide");
  $(".hidden_box").css("top", function(i,val){
    if ($(this).css("top") == '10px') {
      return '0px';s
    } else {
      return '10px';
    }
    });
  $(".text_box").toggleClass("hide");
  if ($(".click_box").text() == "Открыть тут")
    { $(".click_box").text("Скрыть") } 
  else 
    { $(".click_box").text("Открыть тут") }
});