Trying to change Divs and then revert

Question

I want to be able to click on one of the <div class="col-md-4'>'s and turn it into a <div class="col-md-12"> smoothly while smoothly getting rid of the remaining md-4's. When I then click again on the md-12 I want it to smoothly do the opposite.. but can't work out what's going on.

When I click a col-md-4 currently it'll do what I want, minus smoothness, but won't revert back. If I hav a col-md-12 by default and remove the col-md-4 code the col-md-12 will revert to 4.. but no luck with 4 to 12 to 4.

Why is this?

$(document).ready(function(){

  $('.col-md-4').click(function(){
    $(this).switchClass("col-md-4", "col-md-12", 1000).removeClass('col-md-4');
    $('.col-md-4').addClass('profiles-gone');
  });

  $('.col-md-12').click(function(){
    $(this).removeClass('col-md-12');
    $('.col-md-4').removeClass('profiles-gone');
    $(this).addClass('col-md-4');
  });
});

.col-md-12 { background-color: #A9F5BC }

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<div class="container-fluid">
  <div class="row">


    <div class="col-md-4">
      <div class="profile">
        <!--<a href="#" class="expand-button"><i class="fa fa-expand fa-2x" id="bigger"></i></a>-->
        <h2>Veronica A</h2>
        <img src="http://placehold.it/250x250">
        <h3>Head of XYZ at XYZ</h3>
        <p class="about-short">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation... <a href="#" id="bigger">read more.</a></p>
        <p class="about-long">lelelelele</p>
      </div>
    </div>

    <div class="col-md-4">
      <div class="profile">
        <!--<a href="#"><i class="fa fa-expand fa-2x" id="bigger"></i></a>-->
        <h2>Veronica B</h2>
        <img src="http://placehold.it/250x250">
        <h3>Head of XYZ at XYZ</h3>
        <p style="about-short">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation... <a href="#" id="bigger">read more.</a></p>
        <p class="about-long">lelelelelele</p>
      </div>
    </div>

    <div class="col-md-4">
      <div class="profile">
        <!--<a href="#"><i class="fa fa-expand fa-2x" id="bigger"></i></a>-->
        <h2>Veronica C</h2>
        <img src="http://placehold.it/250x250">
        <h3>Head of XYZ at XYZ</h3>
        <p style="about-short">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation... <a href="#" id="bigger">read more</a></p>
        <p class="about-long">lelelelele</p>
      </div>
    </div>
  </div>
</div>

Answer 1

It's because where are no .col-md-12 when you execute your code. You need to delegate your events with on:

$(document).ready(function() {
    $(document).on('click', '.col-md-4', function() {
        $(this).switchClass("col-md-4", "col-md-12", 1000).removeClass('col-md-4');
        $('.col-md-4').addClass('profiles-gone');
    }).on('click', '.col-md-12', function() {
        $(this).removeClass('col-md-12');
        $('.col-md-4').removeClass('profiles-gone');
        $(this).addClass('col-md-4');
    });
});

Working Example Code Snippet Below:

$(document).ready(function() {
  //  this will be parent container for events, 
  $(document)  //  it's usually best practice to use a "static parent" with ID, 
               //  but in this case, you appear to have none, 
               //  so we'll just use DOM (document)
    //  here's our first click event, assigned to work on element's having class "col-md-4"
    .on('click', '.col-md-4', function() {
      $(this).switchClass("col-md-4", "col-md-12", 1000).removeClass('col-md-4');
      $('.col-md-4').addClass('profiles-gone');
    })
    //  here's our 2nd click event, assigned to work on element's having class "col-md-12"
    .on('click', '.col-md-12', function() {
      $(this).removeClass('col-md-12');
      $('.col-md-4').removeClass('profiles-gone');
      $(this).addClass('col-md-4');
    });
});

.col-md-12 { background-color: #A9F5BC }

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<div class="container-fluid">
  <div class="row">
    <div class="col-md-4">
      <div class="profile">
        <!--<a href="#" class="expand-button"><i class="fa fa-expand fa-2x" id="bigger"></i></a>-->
        <h2>Veronica A</h2>
        <img src="http://placehold.it/250x250">
        <h3>Head of XYZ at XYZ</h3>
        <p class="about-short">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation... <a href="#" id="bigger">read more.</a></p>
        <p class="about-long">lelelelele</p>
      </div>
    </div>

    <div class="col-md-4">
      <div class="profile">
        <!--<a href="#"><i class="fa fa-expand fa-2x" id="bigger"></i></a>-->
        <h2>Veronica B</h2>
        <img src="http://placehold.it/250x250">
        <h3>Head of XYZ at XYZ</h3>
        <p style="about-short">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation... <a href="#" id="bigger">read more.</a></p>
        <p class="about-long">lelelelelele</p>
      </div>
    </div>

    <div class="col-md-4">
      <div class="profile">
        <!--<a href="#"><i class="fa fa-expand fa-2x" id="bigger"></i></a>-->
        <h2>Veronica C</h2>
        <img src="http://placehold.it/250x250">
        <h3>Head of XYZ at XYZ</h3>
        <p style="about-short">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation... <a href="#" id="bigger">read more</a></p>
        <p class="about-long">lelelelele</p>
      </div>
    </div>
  </div>
</div>