Is there a way to relocate the collapse button to the bottom after it has been clicked?

I have been using Bootstrap to design a expandable card that can be expanded when clicked. I am currently using the collapse feature, but I am facing an issue where the button remains in its original position, whereas I want it to move to the bottom of the card. The images below clearly show what I am trying to achieve.

Is there a way to move the button down when the collapse is triggered? Do I need to incorporate Javascript for this functionality?

Thank you for taking the time to read this.

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

https://i.sstatic.net/kIGQz.png

https://i.sstatic.net/EYlgn.png

jqueryhtmlcsstwitter-bootstrapbootstrap-4

Answer №1

Transfer the additional information to a singular collapsed section located above the card-footer...

         <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 opinion, Lorem Ipsum is not </p>
                </div>
                <div class="collapsed" 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 sections of content here)
                </div>
                <div class="card-footer text-muted text-center">
                    <a href="#" class="btn" data-toggle="collapsed" data-target="#review">
                        <div class="row">
                            <div> Click to view full review </div>
                        </div>
                        <span class="oi oi-caret-bottom"></span>
                    </a>
                </div>
         </div>

Answer №2

Revamp your DIV structure by separating the elements you want to display with initiative and onClick event to 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();
  });


});

Check out the demo here: link

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process for manually looping an HTML5 video on iOS 4.3/5?

I'm facing an issue with a video that has specific segments I need to be looped. The problem arises on iOS 5, where after updating videoElem.currentTime for the third time, mobile Safari stops recognizing this attribute correctly. Interestingly, on i ...

iosipadhtmlvideo

Unable to transmit data to CodeIgniter controller through ajax communication

I'm struggling with sending a value from an input element to a Codeigniter controller using ajax. The problem arises because I am using a WYSIWYG editor (summernote), which only allows me to receive the input inside a <script>. However, when I ...

javascriptphpjqueryajaxcodeigniter

Tips for matching the width of tooltips with the length of the title

I am trying to adjust the width of the antd tooltip to match that of the title. Here is the code snippet: <Tooltip placement="top" align={{ offset: [0, 10] }} title='this is the title'> <span>tooltip</span> </T ...

javascriptcssreactjstooltipantd

Encountering an undefined json array when making an AJAX request

There have been numerous questions on this topic, but none of the specific solutions seemed to apply to my situation. So, I apologize if this is a duplicate query. I am currently working on fetching data from an SQL database using a PHP file that passes t ...

javascriptphpjqueryjsonajax

Place an IconButton component next to each Material UI TableRow

I am trying to include an icon next to the material UI table row component. Similar to the hint icon shown in the screenshot below Here is my attempt so far, but it's not functioning as expected: Check out the code on CodeSandbox https://i.stack.i ...

javascripthtmlcssreactjsmaterial-ui

Storing various entries in a database by utilizing Laravel/JQuery's dynamic input fields

I am facing an issue while trying to insert data into a database from dynamic input fields. Each additional input field should be inserted into the database as a new row with a primary key. Below is the view and script that I am using to add dynamically g ...

jqueryajaxlaravel

Can you explain the concepts of 'theme' and 'classes'?

Currently, I am working on a web application using React. I have chosen to incorporate the latest version of Material-UI for designing the user interface. During this process, I came across the demo examples provided by Material-UI (like ) In each demo ...

javascriptcssreactjsmaterial-uijsx

Utilize Google APIs to detect the geolocation of a user and use jQuery to fetch and display the current weather information for that location

Utilizing Googleapis for Geolocation and Openweathermap for Current Weather via jQuery I'm attempting to retrieve the current location and obtain the current weather for that specific area. Below is my jQuery code: $(document).ready(function(){ ...

javascriptjqueryjsonapigeolocation

Place the blockquote in the middle, but maintain the text's alignment to

I recently designed a webpage using Bootstrap and CSS. My main goal is to have my two blockquotes centered on the page while keeping the text left-aligned (which is the default behavior for the selected classes in Bootstrap). To see the full code, take a ...

htmlcssbootstrap-4

Positional Error Found in Bootstrap Popover Arrow

I'm having an issue with the Bootstrap Popover Tooltip. Can anyone explain why the arrow is not formatting correctly? <div style="display:inline-block;"> <a id="pop" href="#" data-toggle="popover" data-content="<%= user.experience.de ...

jquerycsstwitter-bootstrap

Retrieve the latest information and update the database with just one ajax request

I am attempting to update a row in the database and retrieve the updated row one at a time using an AJAX call. JavaScript inside the ready function $("button[name='teacher_lock_exam']").on(ace.click_event, function () { var current_exams_id ...

javascriptphpjqueryajaxcodeigniter

The clickable functionality of buttons and text labels in Vue is currently not working

When I try to input text into the registration page in vue, nothing happens when I click the register/login button. However, if I press TAB and then enter my password followed by another TAB and ENTER, it works. This is the code snippet for the login-box: ...

cssjsonvue.js

Struggles encountered when trying to fetch text using a custom xpath or css selector in firebug

Struggling to extract a specific text snippet from a webpage using Selenium. The code I'm dealing with on the page is as follows: <div id="BVRRRatingOverall_Review_Display" class="BVRRRating BVRRRatingNormal BVRRRatingOverall"> <div class="B ...

htmlxpathseleniumcss-selectors

Bootstrap 4 Alpha Grid does not support aligning two tables side by side

When working with Bootstrap 4, I am aware that the .col-xs classes have been removed. Instead of using .col, I have tested it on Bootstrap 3.5 which is currently being utilized. <div class="col-xs-4"> Table content for left ...

csstwitter-bootstrapbootstrap-4

`Enter` within a container

Is there a way to use a controller in order to achieve printing test1 test2 within a <div> element... Currently, the only code I have is a simple Return "test1" & vbNewLine & "test2" However, this code displays the words on a single line ...

htmlvb.netmodel-view-controllernewline

What is the process for sending JavaScript data to a Rails controller action?

Utilizing jQuery Shapeshift for drag and drop reordering of lists on my web application. I am looking to send the data below to my Rails controller action in order to update the list's order. Every time I drag a list, this is the output that appears ...

javascriptjqueryruby-on-railsajaxruby-on-rails-4

Executing jQuery post request on a div loaded via ajax

I'm facing a challenge with my webpage. I have a section where the content of a div is loaded via ajax. This div contains forms, and after submission, it should update to display the new content without refreshing the entire page. Can anyone guide me ...

javascriptphpjqueryhtmlajax

Bootstrap Collapse function might not function properly immediately following the execution of Collapse Methods

Here is the reference link: http://jsfiddle.net/72nfxgjs/ The code snippet I used is from w3schools: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_collapse&stacked=h <script type="text/javascript"> $("#collapse1").col ...

javascriptjquerytwitter-bootstrap

Forecasting text input demands

Many websites display suggestions in a drop-down menu as you type, some even showing a preview of the most likely result in a lighter-gradient font next to the cursor. For example, Spotlight on my Mac does this: https://i.sstatic.net/hDyxG.png Spotlight ...

htmlformsuser-interface

JS script for clicking various icons on a webpage that trigger the opening of new tabs

I am working on a webpage where I have 9 icons with the same class. I am trying to write JavaScript code that will automatically open all 9 icons when the webpage loads. I tried using the code below, but it only clicks on the first icon and stops. let ...

javascripthtmljquerybrowser