Как я могу переместить кнопку свертывания вниз при нажатии? - PullRequest
Новая
       14

Как я могу переместить кнопку свертывания вниз при нажатии?

0 голосов
/ 24 января 2020

Я использую bootstrap, чтобы создать карточку, которую можно увеличить при нажатии. Для этого я использую коллапс. Но когда я использую коллапс, кнопка остается на месте, в то время как я хочу, чтобы она переместилась в конец карты. Картинки внизу должны также ясно иллюстрировать, что я пытаюсь сделать.

Как я могу переместить кнопку вниз при нажатии сворачивания? Придется ли мне использовать Javascript?

Спасибо за чтение этого 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-2">
      <!-- horizontal spacing -->
  </div>
  <div class="col-8 ">
    <div class="card text">
      <div class="card-header">
        <div class="row">
          <div class="col-3">
            <div class="text-primary"> Name Nameson </div>
          </div>
          <div class="col-6">
            <!-- horizontal spacing -->
          </div>
          <div class="col-3">
            <div class="float-right text-secondary"> Aug 21 2019 </div>
          </div>
        </div>
      </div>
      <div class="card-body">
        <h5 class="card-title">Average Rating (4.5) </h5>
        <p class="card-text">Contrary to popular belief, Lorem Ipsum is not </p>

      </div>
      <div class="card-footer text-muted text-center">
        <a href="#" class="btn" data-toggle="collapse" data-target="#review">
          <div class="row">
          <div> Click to see full review </div>
          </div>
          <span class="oi oi-caret-bottom"></span>
        </a>
        <div class="collapse" id="review">
          Content goes here
        </div>
      </div>
    </div>
  </div>
</div>

Before collapse

After collapse

Ответы [ 2 ]

1 голос
/ 24 января 2020

Переместите дополнительный контент в один collapse div над нижним колонтитулом карты ...

https://codeply.com/p/R3QbJnLQDE

         <div class="card text">
                <div class="card-header">
                    <div class="row">
                        <div class="col-3">
                            <div class="text-primary"> Name Nameson </div>
                        </div>
                        <div class="col-6">
                            <!-- horizontal spacing -->
                        </div>
                        <div class="col-3">
                            <div class="float-right text-secondary"> Aug 21 2019 </div>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <h5 class="card-title">Average Rating (4.5) </h5>
                    <p class="card-text">Contrary to popular belief, Lorem Ipsum is not </p>
                </div>
                <div class="collapse" id="review">
                    <div class="card-body">
                        <h5 class="card-title">More </h5>
                        <p class="card-text">Contrary to popular belief, Lorem Ipsum is not </p>
                    </div>
                    ... (additional content sections here)
                </div>
                <div class="card-footer text-muted text-center">
                    <a href="#" class="btn" data-toggle="collapse" data-target="#review">
                        <div class="row">
                            <div> Click to see full review </div>
                        </div>
                        <span class="oi oi-caret-bottom"></span>
                    </a>
                </div>
         </div>
0 голосов
/ 24 января 2020

Все, что вам нужно, чтобы реструктурировать свои DIV, где нужно задействовать то, что вам нужно, чтобы показать инициативу и событие onClick show more ...

HTML: 

<div class="container">
  <div class="row">
    <div class="col-2">
      <!-- horizontal spacing -->
    </div>
    <div class="col-8 ">
      <div class="card text">
        <div class="card-header">
          <div class="row">
            <div class="col-3">
              <div class="text-primary"> Name Nameson </div>
            </div>
            <div class="col-6">
              <!-- horizontal spacing -->
            </div>
            <div class="col-3">
              <div class="float-right text-secondary"> Aug 21 2019 </div>
            </div>
          </div>
        </div>
        <div class="card-body">
          <div class="inital">
            <h5 class="card-title">Average Rating (4.5) </h5>
            <p class="card-text">Contrary to popular belief, Lorem Ipsum is not </p>
          </div>
          <div class="ondemand">
            <div class="section">
              <h5 class="card-title">Average Rating (4.5) </h5>
              <p>Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this</p>
            </div>
            <div class="section">
              <h5 class="card-title">Average Rating (4.5) </h5>
              <p>Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this</p>
            </div>
            <div class="section">
              <h5 class="card-title">Average Rating (4.5) </h5>
              <p>Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this</p>
            </div>
          </div>
        </div>
        <div class="card-footer text-muted text-center">
          <a href="#" class="btn" data-toggle="collapse" data-target="#review">
            <div class="row">
              <div class="showmore">Load more</div>
              <div class="showless">Show Less</div>
            </div>
            <span class="oi oi-caret-bottom"></span>
          </a>
          <div class="collapse" id="review">
            Content goes here
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

JS: Jquery - 

$(document).ready(function(){

  $('.ondemand').hide();
  $('.showmore').show();
  $('.showless').hide();

  $('.showmore').on('click', function(){
    $('.ondemand').slideDown("slow", "swing");
    $('.showmore').hide();
    $('.showless').show();
  });

  $('.showless').on('click', function(){
    $('.ondemand').slideUp("slow", "swing");
    $('.showmore').show();
    $('.showless').hide();
  });


});

Вот демоверсия: ссылка

...