-Simple spoiler

-Couple of fixes

-Simple spoiler
-Couple of fixes
Alexey Boroda
1 parent cf249006
Showing 3 changed files with 29 additions and 8 deletions Show diff stats
frontend/views/site/index.php
frontend/web/css/style.css
frontend/web/js/script.js
@@ -126,9 +126,11 @@ $this-&gt;title = &quot;Главная&quot;;
         </div>
     </section>
     <section class="main-box5">
-        <div class="spoil">
-        <p>На одной из центральных улиц Киева (був. Леси Украинки, 23) расположился шоу-рум «Баккара», в котором можно познакомиться с тщательно отобранными образцами продукции и многочисленными каталогами самых известных и надежных поставщиков Европы и всего мира...</p>
-        <div class="more"><a href="#">Узнать больше</a></div>
+        <div class="simple-spoiler just-closed" style="height: 50px">
+            <p>Идейные соображения высшего порядка, а также дальнейшее развитие различных форм деятельности влечет за собой процесс внедрения и модернизации новых предложений. Равным образом начало повседневной работы по формированию позиции обеспечивает широкому кругу (специалистов) участие в формировании системы обучения кадров, соответствует насущным потребностям. Идейные соображения высшего порядка, а также начало повседневной работы по формированию позиции в значительной степени обуславливает создание форм развития. С другой стороны консультация с широким активом способствует подготовки и реализации новых предложений. Значимость этих проблем настолько очевидна, что реализация намеченных плановых заданий требуют от нас анализа соответствующий условий активизации. </p>
+        </div>
+        <div class="just-more">
+            <a href="#">Узнать больше</a>
         </div>
     </section>
 </div>
@@ -415,11 +415,11 @@ footer .socbuts a:hover{
     letter-spacing: 0.4px;
     font-family: 'Lato-Medium';
 }
-.more{
+.just-more, .more{
     display: flex;
     justify-content: flex-end;
 }
-.more a{
+.just-more a,.more a{
     float: right;
     text-transform: uppercase;
     font-size: 11px;
@@ -431,7 +431,7 @@ footer .socbuts a:hover{
     border: 2px solid #d2d2d2;
     color:#9e9e9e;
 }
-.more a:hover {
+.just-more a:hover, .more a:hover {
     border: 2px solid #d2d2d2;
     color:#fff;
     background-color: #d2d2d2!important;
@@ -702,7 +702,7 @@ footer .socbuts a:hover{
 .textile_bottom{
     float: left;
     margin: 80px 50px;
-    width: 100%;
+    /*width: 100%;*/
 }
 .textile_bottom.tb1{
     margin-top: 73px;
@@ -747,7 +747,9 @@ footer .socbuts a:hover{
     margin-top: -17px;
     margin-bottom: 16px;
 }
-.spoiler{display: none;width:100%!important;}
+.simple-spoiler {
+    overflow: hidden;
+}
 .text_left{
     padding-left: 100px;
     padding-right: 40px;
@@ -1094,6 +1096,10 @@ footer .socbuts a:hover{
 .button3{
     margin: 11px 0px;
 }
+.spoiler {
+    display: none;
+    width: 100% !important;
+}
 .spoiler .control-label{display: none;}
 .spoiler input[type=checkbox], input[type=radio] {
     margin: 1px 0 0;
@@ -55,4 +55,17 @@ $(document).ready(function(){
     });
     $(".punkt").parent().find(".spoiler input[type='checkbox']:checked").parent().addClass("l_check").parent().parent().parent().show().parent().find(".punkt").addClass('opened');
  
+    $(document).on('click', '.just-more', function (event) {
+        event.preventDefault();
+        var spoilerInitialHeight = $('.simple-spoiler');
+        var spoilerFullHeight = $('.simple-spoiler p').height();
+        if($(".simple-spoiler").hasClass("just-closed")) {
+            $('.just-more a').text("Скрыть");
+            $('.simple-spoiler').animate({height: spoilerFullHeight}, 1000);
+        } else {
+            $('.just-more a').text("Узнать больше");
+            $('.simple-spoiler').animate({height: 50}, 1000)
+        }
+        $(".simple-spoiler").toggleClass("just-closed");
+    });
 });
 \ No newline at end of file