Sliding content up before detaching it and reattaching on click

Question

I'm working on a shortcode for a plugin on wordpress, and all is working as it should, except one thing that's bugging me a bit.

I have a gallery list, and when you click on an item, the content of that div slides down. If you click on the same item, the content slides up, but if you click on a different item, the content just switches inside the appended div. The appended div gets 'glued' to a wrapper container in which the image is placed.

So if you click within the same row, the appended div stays where it is, only the content changes, but if you click on an image from the next row, the appended div just jumps there and displays the content like this:

var $content = $(".big_container");
    var $loaded_content = $(".details");
    var $item_selector = $(".item");

    if ($content.length > 0) {

      $item_selector.on('click', function(e) {
        e.preventDefault();

        function load_gallery_container($container) {

          var $insert_after = $container.parent('.wrappers');

          $loaded_content.detach().insertAfter($insert_after);

          var div_data = $container.data('content');

          $loaded_content.find('.div_content').html(div_data);

          if (!$container.hasClass("current")) {
            $container.addClass("current");
            $loaded_content.slideDown('slow').addClass("open");
          } else {
            $(".current").removeClass("current");
            $loaded_content.slideUp('slow').removeClass("open");
          }

          setTimeout(function() {
            $('html, body').animate({
              scrollTop: $loaded_content.offset().top - 300
            }, 500);
          }, 600);

        }

        var $this = $(this);

        load_gallery_container($this);

      });

    }

.big_container {
  background: #141414;
  display: block;
  padding: 30px;
}
.wrappers {
  width: 500px;
  margin: 0 auto;
  display: block;
}
.item {
  width: 31%;
  height: 100px;
  margin-right: 1%;
  margin-bottom: 30px;
  text-align: center;
  background: #ccc;
  color: #fff;
  display: inline-block;
}
.details {
  background: #ddd;
  width: 100%;
  padding: 30px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="big_container">
  <div class="wrappers">
    <div class="item" data-content="blabla bla bla blaaaa">Click on meee!</div>
    <div class="item" data-content="blabla BLALALA bla blaaaa">Click on meee!</div>
    <div class="item" data-content="blabla blBLALbla blaaaa">Click on meee!</div>
  </div>
  <div class="wrappers">
    <div class="item" data-content="blabla bla bla randomness">Click on meee!</div>
    <div class="item" data-content="blabla bla bla ">Click on meee!</div>
    <div class="item" data-content="blabla bla bla weeee">Click on meee!</div>
  </div>
  <div class="wrappers">
    <div class="item" data-content="blabla bla bla blaaaa">Click on meee!</div>
    <div class="item" data-content="blabla bla bla???">Click on meee!</div>
    <div class="item" data-content="I am done with blaaaaing">Click on meee!</div>
  </div>
  <div class="details">The content from div goes here:
    <div class="div_content"></div>
  </div>
</div>

This jumping is bugging me. I'd like that when you click on a image in a second row, and the content div is open, that it first slides up, and then slides down under the second row.

I'm kinda stuck with this. I put the loading and all in a function, because I'll have a previous/next buttons that should cycle through the item divs and display their content.

Should I just try to add if clause to check in which row the image/div is located?

Any help is appreciated :)

Pete · Accepted Answer · 2015-08-04T12:16:17.080

Try the following jQuery, it should achieve what you want

var $content = $(".big_container");
var $loaded_content = $(".details");
var $item_selector = $(".item");

if ($content.length > 0) {
    $item_selector.on('click', function (e) {
        e.preventDefault();

        var $this = $(this);

        load_gallery_container($this);
    });
}

function load_gallery_container($container) {
    if ($container.hasClass("current")) {
        $loaded_content.slideUp('slow', function () {
            $(this).removeClass('open');
            $container.removeClass("current");
        });
    } else {

        var $insert_after = $container.parent('.wrappers'),
            $current = $('.current');
            $current.removeClass('current');

        if ($current.parent('.wrappers').is($insert_after)) {
            $loaded_content.find('.div_content').html($container.data('content'));
            $container.addClass("current");
        } else {
            if ($loaded_content.hasClass("open")) {
                $loaded_content.slideUp('slow', function () {
                    $(this).removeClass('open');
                    $container.removeClass("current");

                    $loaded_content.detach().insertAfter($insert_after);
                    $loaded_content.find('.div_content').html($container.data('content'));
                });
            } else {
                $loaded_content.detach().insertAfter($insert_after);
                $loaded_content.find('.div_content').html($container.data('content'));
            }

            $loaded_content.slideDown('slow', function () {
                $container.addClass("current");
                $(this).addClass('open');
            });
        }
    }
    setTimeout(function () {
        $('html, body').animate({
            scrollTop: $loaded_content.offset().top - 300
        }, 500);
    }, 600);
}

Example Fiddle

Same as the above, the transition between rows is ok, by when I'm in the same row I don't need to have the slide up transition. — dingo_d, Aug 04 '15 at 11:50
This is it! You sir rock! :D Plus thanks for the function tip, I overlooked this. — dingo_d, Aug 04 '15 at 12:24

Deepak · Answer 2 · 2015-08-04T11:49:20.683

Edited your code to achieve what you want it to do.

var $content = $(".big_container");
    var $loaded_content = $(".details");
    var $item_selector = $(".item");

    if ($content.length > 0) {

      $item_selector.on('click', function(e) {
        e.preventDefault();

        function load_gallery_container($container) {
         if (!$container.hasClass("current")) {
            $loaded_content.slideUp('slow', function() {
    show_hide_container($container);
             }).removeClass("open");
          }
    else
    {
     show_hide_container($container);
    }      
          setTimeout(function() {
            $('html, body').animate({
              scrollTop: $loaded_content.offset().top - 300
            }, 500);
          }, 600);

        }
  
  function show_hide_container($content_container) {
    var $insert_after = $content_container.parent('.wrappers');

    $loaded_content.detach().insertAfter($insert_after);

    var div_data = $content_container.data('content');

    $loaded_content.find('.div_content').html(div_data);

    if (!$content_container.hasClass("current")) {
   $content_container.addClass("current");
   $loaded_content.slideDown('slow').addClass("open");
    } else {
   $(".current").removeClass("current");
   $loaded_content.slideUp('slow').removeClass("open");
    }
   }

        var $this = $(this);

        load_gallery_container($this);

      });

    }

.big_container {
  background: #141414;
  display: block;
  padding: 30px;
}
.wrappers {
  width: 500px;
  margin: 0 auto;
  display: block;
}
.item {
  width: 31%;
  height: 100px;
  margin-right: 1%;
  margin-bottom: 30px;
  text-align: center;
  background: #ccc;
  color: #fff;
  display: inline-block;
}
.details {
  background: #ddd;
  width: 100%;
  padding: 30px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="big_container">
  <div class="wrappers">
    <div class="item" data-content="blabla bla bla blaaaa">Click on meee!</div>
    <div class="item" data-content="blabla BLALALA bla blaaaa">Click on meee!</div>
    <div class="item" data-content="blabla blBLALbla blaaaa">Click on meee!</div>
  </div>
  <div class="wrappers">
    <div class="item" data-content="blabla bla bla randomness">Click on meee!</div>
    <div class="item" data-content="blabla bla bla ">Click on meee!</div>
    <div class="item" data-content="blabla bla bla weeee">Click on meee!</div>
  </div>
  <div class="wrappers">
    <div class="item" data-content="blabla bla bla blaaaa">Click on meee!</div>
    <div class="item" data-content="blabla bla bla???">Click on meee!</div>
    <div class="item" data-content="I am done with blaaaaing">Click on meee!</div>
  </div>
  <div class="details">The content from div goes here:
    <div class="div_content"></div>
  </div>
</div>

This closes the content div even if I click on the same row, which is not what I need, the transition on the second row is good. — dingo_d, Aug 04 '15 at 11:49

Sliding content up before detaching it and reattaching on click

2 Answers2

Linked