Sliding content up before detaching it and reattaching on click in WordPress

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 🙂

Post Views: 1

2 comments

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

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>

Comments are closed.

Related posts

2 comments

Social Network