помогите с блоком CSS HTML

118

30 декабря 2020, 15:00

есть блок DIV в котором четрые Р (параграфа) как сделать так, чтоб был виден один параграф, и кнопка читать. Когда нажимаешь кнопку читать блок увеоличивается и показывает весь текст, при этом кнопка остается всегда в низу, и ЧИТАТЬ сменяется на ЗАКРЫТЬ

Answer 1

Ну решение было бы попроще, но мой таракан-экстрасенс говорит, что в будущем захочется добавить на страницу несколько таких блоков. Поэтому вот:

JsFiddle

(function(){ 
 
let moo = document.getElementsByClassName('moo'); 
for(let i = 0; i < moo.length; i++){ 
  let bubu   = moo[i].getElementsByClassName('bubu'); 
  let toggle = moo[i].getElementsByClassName('toggle'); 
  toggle[0].addEventListener('click', function(){ 
    for(let u = 1; u < bubu.length; u++){ 
      bubu[u].classList.toggle('show'); 
    } 
    /* Это дело ниже называется Тернарный Оператор (можете искать статьи) */ 
    this.innerText = ( this.innerText == 'Читать далее...' ) ? ('Скрыть') : ( 'Читать далее...' ); 
  }); 
} 
 
})();

.bubu {display: none;} 
.show {display: block;}

<div class="moo"> 
  <p class="bubu show">параграф 1</p> 
  <p class="bubu">параграф 2</p> 
  <p class="bubu">параграф 3</p> 
  <p class="bubu">параграф 4</p> 
  <button class="toggle">Читать далее...</button> 
</div> 
 
<div class="moo"> 
  <p class="bubu show">параграф 1</p> 
  <p class="bubu">параграф 2</p> 
  <p class="bubu">параграф 3</p> 
  <p class="bubu">параграф 4</p> 
  <button class="toggle">Читать далее...</button> 
</div>

Это можно организовать и через label - чекбоксы на CSS... Но меня напрягает вечно думать о разметке, чтобы селекторы правильно сработали)

На CSS будет так:

JsFiddle

.hidden {display: none;} 
.show {display: inline-block;} 
 
.check {display: none;} 
.check:checked ~ .hidden {display: block;} 
.check:checked ~ label .show {display: none;} 
.check:checked ~ label .hidden {display: inline-block;} 
 
.btn { 
  background-color: #045acf; 
  color: white; padding: 3px 10px; 
  border-radius: 5px; cursor: pointer; 
}

<div class="moo"> 
  <input id="check1" class="check" type="checkbox"> 
  <p>параграф 1</p> 
  <span class="hidden"> 
    <p>параграф 2</p> 
    <p>параграф 3</p> 
    <p>параграф 4</p> 
  </span> 
  <label for="check1"> 
    <span class="btn show">Читать далее...</span> 
    <span class="btn hidden">Скрыть</span> 
  </label> 
</div> 
 
<div class="moo"> 
  <input id="check2" class="check" type="checkbox"> 
  <p>параграф 1</p> 
  <span class="hidden"> 
    <p>параграф 2</p> 
    <p>параграф 3</p> 
    <p>параграф 4</p> 
  </span> 
  <label for="check2"> 
    <span class="btn show">Читать далее...</span> 
    <span class="btn hidden">Скрыть</span> 
  </label> 
</div>

С JS как-то попроще чтоли с разметкой... один раз написать скрипт - дальше добавлять этих блоков сколько захочется...

Answer 2

Создаёшь блок <div>, внутри четыре тэга <p> и кнопку. Последние три <p> прячешь в <span>, у которого по-умолчанию выставляешь display: none. Долго писать, короче, сообразишь :) Вот так:

$(document).ready(function () { 
    $('body').on('click', '.more', function() { 
        $('.hidden').show(); 
        $(this).addClass('close'); 
        $(this).removeClass('more'); 
        $(this).text('Закрыть'); 
    }); 
 
    $('body').on('click', '.close', function() { 
        $('.wrapper').hide(); 
    }); 
});

.hidden { 
    display: none; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<div class="wrapper"> 
    <p> 
        Параграф 1 
    </p> 
    <span class="hidden"> 
        <p> 
            Параграф 2 
        </p> 
        <p> 
            Параграф 3 
        </p> 
        <p> 
            Параграф 4 
        </p> 
    </span> 
    <button class="more">Читать дальше</button> 
</div>

Answer 3

$(document).on('click', '.toggle', function(){ 
 
    var post = $(this).parent('.post'); 
    // var post = $('.post'); 
     
    if(post.hasClass('show')){ 
      post.removeClass('show'); 
      $(this).html('Развернуть..'); 
    } 
    else{ 
     post.addClass('show'); 
      $(this).html('Свернуть..'); 
    } 
     
     
}); 
 
$(document).on('click', '.toggle-arrow', function(){ 
     
    var post = $(this).parent('.post'); 
    // var post = $('.post'); 
     
    post.toggleClass('show'); 
     
     
});

.post{ 
  display: inline-block; 
  border: 1px solid #000; 
} 
 
.post p:not(:first-child){ 
  display: none; 
} 
.post.show p:not(:first-child){ 
  display: block; 
} 
 
 
.post .toggle-arrow{ 
  transform: rotateZ(180deg); 
} 
.post.show .toggle-arrow{ 
  transform: rotateZ(0deg); 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="post"> 
  <p>параграф 1</p> 
  <p>параграф 2</p> 
  <p>параграф 3</p> 
  <p>параграф 4</p> 
  <button class="toggle">Развернуть..</button> 
</div> 
 
<div class="post"> 
  <p>параграф 1</p> 
  <p>параграф 2</p> 
  <p>параграф 3</p> 
  <p>параграф 4</p> 
  <button class="toggle-arrow">^</button> 
</div>

Не знаю почему, но какое-то отвращение менять значения или делать анимацию на стороне JS используя какие-то методы, больше люблю менять классы и в зависимости от этого делать анимацию, собственно вот сам код в двух вариациях.

$(this).parent('.post');

Эта строка берёт контейнер относительно кнопки, по которой произошёл клик. Если у вас будет несколько подобных элементов, то советую делать именно так, в ином случае у вас одна кнопка будет срабатывать на все сопутствующие классы.