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

[NOIP]

Почему то содержимое которое находиться ниже спойлера прячиться под сам спойлер.

 

[NOIP]

Почти конечный вариант

<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 и все заработает как нужно.

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

 

[NOIP]

Кто подскажет как грамотно вставить этот кусок кода

<div style="background: #000; width: 100%; height: 50px; float:right;">Развернуть</div>

таким образом что бы при нажатии на него открывался спойлер?
Пробовал $( ".content img" ).append( "тут код ниже" ); но это не много не то, что можно попробовать?
И что бы эта полоска была с низу картинку? то есть примерно так

 

[Absolute]

Если не нужно вычислять высоту контейнера в 30%, то все проще.

$(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);
    });
});

 

[NOIP]

А реально ли убрать ограничения на картинки и оставить просто показ первых к примеру 500 пиксилей? не зависимо от того картинка это или еще что то другое? текст видео и тд?

 

[denverkurt]

да реально. а в чем конкретно проблема то?

 

[Absolute]

А реально ли убрать ограничения на картинки и оставить просто показ первых к примеру 500 пиксилей? не зависимо от того картинка это или еще что то другое? текст видео и тд?

Для просмотра ссылки Войди или Зарегистрируйсяобрежет всё.

 

[xapai1988]

Есть интересный эффект, когда часть контента видна, но она перекрыта полупрозрачным градиентом. Таким образом, человек видит что есть еще контент, но прочитать его сможет только после того как произведет необходимое действие.

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

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