Нужен совет по jquery. Кнопка “показать еще”

544

12 апреля 2017, 14:46

Попытался на сделать кнопку "показать еще", чтобы при нажатии следующий блок. Вроде получилось. Но как сделать чтобы див показать еще после нажатия пропадал, потому что если поставить display: none; она только визуально пропадает.

<div id='show_more' style='width:100%;height:50px;text-align:center;margin:0 auto;cursor:pointer'>
    <b class="more_b">Показать еще</b>
    </div>
    <div id='forPhotosG' style='display:none'>aaaa</div>
     $(document).ready(function () {
     var $forPhotosG = $('#forPhotosG'),
         $head_b = $('.more_b');
     $('#show_more').click(function () {
         $forPhotosG.finish();
         $forPhotosG.slideToggle("slow");
         $(this).find("b").first().css({"display":"none"})
         return false;
     });
     });

https://jsfiddle.net/0unxumyL/1/

Есть еще вариант http://jsfiddle.net/tf5eF/167/ он мне нравится больше, но он почему то не работает у меня на сервере, хотя на jsfiddle все работает. Не пойму в чем проблема.

<div id="more" style="display:none;">
Тут содержимое которое будет показываться при клике на Показать еще
</div>
<div id="show-more">Показать еще</div>
  $('#show-more').click(function() {
  $('#more').fadeIn();
  $(this).fadeOut("fast");
});

Answer 1

Проблема, по всей видимости, в том, что js надо заключать в теги <script></script>.

Например:

<div id="more" style="display:none;">
Тут содержимое которое будет показываться при клике на Показать еще
</div>
<div id="show-more">Показать еще</div>
<script>
  $('#show-more').click(function() {
  $('#more').show();
  $(this).hide();
});
</script>