Помогите реализовать спойлер который будет скрывать информацию если контент в высоту больше X px.

Почему то содержимое которое находиться ниже спойлера прячиться под сам спойлер.
 
Почти конечный вариант
HTML:
<style>
div[class="cont_rect"]{
    border: 1px solid #CCC;
    position:absolute;
    height: 222px;
    overflow: hidden;
}
.cont_rect_vis{
    border: 1px solid #000;
    position:relative;
}
.content {
    overflow: hidden;
    htight: 300px;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
     var a = $('.content');
  a.each(function(){
    var h = $(this).height();
    if(h < 300){
      return;
    }
      var cont = $('<div />',{
              style : 'clip:rect(0,auto,'+(h/100*30+30)+'px,0)',
              class : 'cont_rect',
              click : function(){
                      $(this).toggleClass('cont_rect_vis');
              }
            });
   $(this)
     .wrap(cont);
  });
});
</script>

<div class="content">
<img src="http://mirgif.com/KARTINKI/kosmos/kosmos-81.jpg">
</div>
      
<div>
контент контент    контент контент    контент контент    контент контент    контент контент    контент контент    контент контент
</div>

Поменять CSS и все заработает как нужно.
HTML:
div[class="cont_rect"]{
    border: 1px solid #CCC;
    height: 222px;
    overflow: hidden;
}
.cont_rect_vis{
    border: 1px solid #000;
    position:relative;
}
.content {
    overflow: hidden;
    htight: 300px;
}
 
Последнее редактирование:
Кто подскажет как грамотно вставить этот кусок кода
Код:
<div style="background: #000; width: 100%; height: 50px; float:right;">Развернуть</div>
таким образом что бы при нажатии на него открывался спойлер?
Пробовал $( ".content img" ).append( "тут код ниже" ); но это не много не то, что можно попробовать?
И что бы эта полоска была с низу картинку? то есть примерно так
d413a9d6bf71.jpg
 
Если не нужно вычислять высоту контейнера в 30%, то все проще.
HTML:
$(window).load(function(){
var a = $('.spoiler');
     a.each(function(){
        var th = $(this),
            h = th.height();
        if(h < 1000){
           return;
        }
       var cont = $('<div />',{
                    class : 'cont_rect',
                   click : function(){
                            $(this).toggleClass('cont_rect_vis');
                             if($(this).hasClass('cont_rect_vis')){
                               cont1.css({
                                'margin-top' : h - 30 + 'px',
                                'background':'green'
                                }).text('Свернуть -');
                            } else {
                                cont1.css({
                                 'margin-top' : '500px',
                                 'background':'red'
                                }).text('Развернуть +');
                              }
                        }
               });
        var cont1 = $('<div />',{
                     text: 'Развернуть +',
                     style: 'position:absolute;margin-top:500px;width:'+th.width()+'px;height:30px;background:black;text-align:right;padding:3px;color:#FFF'
                     });
        th.wrap(cont).before(cont1);
    });
});
 
Последнее редактирование:
А реально ли убрать ограничения на картинки и оставить просто показ первых к примеру 500 пиксилей? не зависимо от того картинка это или еще что то другое? текст видео и тд?
 
да реально. а в чем конкретно проблема то?
 
  • Нравится
Реакции: NOIP
Есть интересный эффект, когда часть контента видна, но она перекрыта полупрозрачным градиентом. Таким образом, человек видит что есть еще контент, но прочитать его сможет только после того как произведет необходимое действие.

Что то вроде этого Для просмотра ссылки Войди или Зарегистрируйся

Или вот так - Для просмотра ссылки Войди или Зарегистрируйся
 
  • Нравится
Реакции: NOIP
Назад
Сверху