Как вложить доп. блоки и раскрывать их после нажатия «БОЛЬШЕ»?

Question

[Артём]

Подскажите пожалуйста как можно сделать раскрытие дополнительного материала после нажатия БОЛЕЕ

<div class="col-md-6 col-lg-4">
                    <div class="single-category">
                        <div class="thumb">
                            <img class="img-fluid" src="img/Fitness/farfetch.jpg" alt="">
                        </div>
                        <div class="short_details">
                            <div class="meta-top d-flex">
                                <a href="#">fitness</a>
                                
                            </div>
                            <a class="d-block" href="single-blog.html">
                                <h4>Sale Alert! This Colorful Activewear From Farfetch Will Jazz Up Your Closet</h4>
                            </a>
                           
                        </div>
                    </div> 
                </div>
    <!-- КОНЕЦ основных блоков -->
    <!-- РАСКРЫТЬ дополнительные блоки -->
                <div class="col-12 text-center">
                    <a href="" class="main_btn">ЗАГРУЗИТЬ БОЛЬШЕ <span class="ti-angle-double-right">                  


                    </span></a>                    
                </div>

Comments

[WapSter]

Отлавливать событие клика на js и играть параметром display

Answer 1

[xmoonlight]

1. Изменить отображение через CSS-стиль по событию клика (visibility:hidden; visibiliy:auto; display: none; display:block).
2. Использовать загрузку контента через AJAX по событию клика.