Работа if else

[knhoman]

Добрый день.
Хочу подключить на странице сайта кнопку, которая разворачивает и сворачивает контейнер div.
С этими функциями она справляется, но по отдельности. Почему при использовании if..else выполняются подряд все действия, а не только какое-то одно. Подскажите, пожалуйста, в чем может быть дело?

Изначально объект #show-more имеет текст "Показать еще".

<script>
$('#show-more').click(function() {
var text = document.getElementById("show-more").textContent;
alert (text);
if (text == "Показать еще" ) {
$("#show-more").text("Свернуть");
} else {
$("#show-more").text("Теперь так");
}
});
</script>

[laimas]

$('#show-more').click(function() {
    this.textContent = this.textContent=='Показать еще' ? 'Свернуть' : 'Теперь так'
})

Но что после первого щелчка будет исполняться, если текста 'Показать еще' элемент более не будет иметь?

[knhoman]

Нет, вообще вот так должно быть:

<script>
$('#show-more').click(function() {
var text = document.getElementById("show-more").textContent;
if (text == "Показать еще" ) {
$("#show-more").text("Свернуть");
$("#slider-block").css({"height: 100%"});
} else {
$("#show-more").text("Показать еще");
$("#slider-block").css({"height: 30%"});
}
});
</script>

Мне просто непонятен механизм: почему по одному клику срабатывают оба действия на разные условия.

upd. Ваш пример я попробовал, тоже самое: подряд выполняются оба действия.

[рони]

почему по одному клику

возможно это не так и кликов больше.
сделайте минимальный макет.

[laimas]

вот так должно быть

Так быть не должно. В обработчике уже доступен элемент как this, либо в jQuery можно запомнить, затем использовать:

var btn = $('#show-more').click(function() {
     var text = btn.text();
     if (text == "Показать еще" ) {
        btn.text("Свернуть");
     .....

Постоянно получать jquey объект, это плохо. А тернарный оператор позволяет более лаконично это записать. Можно текстом и не заниматься, например:

<style>
#show-more:after {
    content: 'Показать еще';
}

#show-more.open:after {
    content: 'Свернуть';
}

.panel {
    display: none;
}
</style>

<span id="show-more"></span>
<div class="panel">Что-то</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$('#show-more').click(function() {
    $(this).toggleClass('open').next().slideToggle();
})
</script>

[knhoman]

возможно это не так и кликов больше.
сделайте минимальный макет.

И правда, проверил на jsfiddle.net, работает, как и должно. Спасибо.
Почему происходит два клика. Только теперь непонятно, почему. Наверное из-за особенностей плагина. Я этот код пытаюсь вставить на страницу плагина-слайдера.

[knhoman]

Так быть не должно.

Согласен, что у меня "грязно" написано по незнанию.
Второй ваш пример я делал изначально (но без использования ajax), но он немного не подходит по сути.
У меня есть плагин-слайдер, в котором на каждом слайде есть текст разной длины. Хотелось бы сделать так: каждый слайд изначально отображает только, например, 300px от всей высоты, а после нажатия на кнопку div полностью разворачивается/сворачивается. И не хотелось бы делать отдельный div, который скрывается под кнопкой.

[laimas]

Это лишь пример, вам никто не запрещает помещать раскрываемую панель где угодно. Текст на кнопке в примере изменяется исключительно стилями переключением - $(this).toggleClass('open'). Если эта панель имеет родителя от высоты которого ее высота выражена в процентах, то сворачивать/разворачивать ее также можно переключая класс - $("#slider-block").toggleClass('class_name'), по умолчанию в css ее высота указана 30%, а при добавлении класса 100%. Хотя можете и $("#slider-block").css(....).

[knhoman]

Большое спасибо за ответы. Более или менее разобрался.
Однако вся проблема, оказывается, была в другом: всегда вместо одного происходит два нажатия, скорее всего это из-за плагина.
И как это уже исправлять вот совсем никаких мыслей

[j0hnik]

knhoman,
кидай ссылку поможем