How to slide image left and slide-in text on button click

Question

I am a newbie in terms of web design.

I have centered an image, put a button below it, and when I click this button, some text appears below the image. When I click the button again, the text goes up, and so we see the initial view: only the image and the button (similar to the effect here https://www.w3schools.com/bootstrap4/bootstrap_collapse.asp) .

<div class="container">
  <h2>Simple Collapsible</h2>
  <p>Click on the button to toggle between showing and hiding content.</p>
  <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
  <div id="demo" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Now, I don't want to make this text appear under the image, I want the image to move left and the text to appear on where the image was before when clicking that button, even a little bit more on the right, but still on the same line.

Can someone please help me doing this? Thank you!

Answer 1

Bootstrap doesn't have a pre-fab method to do what you want, and you cannot tweak the collapse method to do it.

However, what you want to do can be easily done within the Bootstrap grid system - just not with pre-fab Bootstrap tools.

Here's how that might look:

$('.btn').click(function(){
   $('.imgDiv').animate({
      width: '0px'
   },1000, function(){
     $('img').css('width','0px');
   });
   $('.txtDiv').animate({
    width: '90vw',
    marginLeft: '10vw'
   },1000, function(){
      $(this).removeClass('hidden');
   });
});

.full-width {width:100vw;}
.imgDiv{min-height:110px;}

/* max-height required so zero-width does not auto-expand height */
.hidden{width:0px;max-height:100px;overflow:hidden;}

<div class="container">

  <div class="row flex-nowrap">
    <div class="imgDiv text-center full-width">
      <img src="http://placekitten.com/100/100" />
    </div><!-- .imgDiv -->
    <div class="txtDiv hidden">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div><!-- .txtDiv -->
  </div><!-- .row -->
  
  <div class="row d-flex justify-content-center">
    <button type="button" class="btn btn-primary">Show Text</button>
  </div><!-- .row -->
  
</div><!-- .container -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Because Bootstrap4 is built on flexbox (in fact, the entire Bootstrap grid was redesigned around flexbox in Bootstrap4) it is important to know some Bootstrap flexbox classes.

There is a reason why Bootstrap re-did their entire platform from Bootstrap3 to Bootstrap4, primarily to change from using floats to flexbox.

Flexbox requires two things:

1. A parent container (e.g. DIV, section, aside, p, etc)

2. One or more child elements (e.g. div, p, img, etc)

You turn flexbox on on the parent: display:flex;

Then, there are various switches. Some are set on the parent (as in the case of justify-content) but others might be set on the items (as with flex-grow:1)

YouTube tutorial - fast-paced and best-of-breed

Here is a great cheatsheet for Flexbox.

Watch the tutorial and in 40 mins from now your problem will be solved -- and you'll know flexbox.

_{P.S. I have no connection to the video or its presenter - I was fortunate to discover it, and now pass it along.}