How to create this feature using css or jquery

The example I made below might be what you are looking for.

Updated it to be way more smooth now. Take a look

var open = false;
$(".mydiv li").click(function() {
  var index = $(".mydiv li").index(this);
var $this = $(this)

  function show_popup(callback) {
    $(".detail").toggle("slow", function() {
      open = open ? false : true;
    });
  };
  if (index % 2 === 0) {
    if (open) {
      setTimeout(function() {
        show_popup($(".detail").insertAfter($(".mydiv li").eq((index + 1))))
      }, 1000);
    } else {
      $(".detail").insertAfter($(".mydiv li").eq((index + 1)))
    }
  } else {
    if (open) {
      setTimeout(function() {
        show_popup($(".detail").insertAfter($(".mydiv li").eq(index)))
      }, 1000);
    } else {
      $(".detail").insertAfter($(".mydiv li").eq(index))
    }
  }
  $(".detail").toggle("slow", function() {
    $(this).text($($this).attr("data-context"))
    open = open ? false : true;
  });
});

.maindiv {
  max-width: 450px
}

.mydiv {
  width: 100%
}

.mydiv li {
  width: 200px;
  height: 200px;
  display: inline-block;
  list-style: none;
  border: 1px solid #333;
  padding: 5px;
  margin: 5px
}

.detail {
  border: 2px solid red;
  width: 100%;
  height: 200px;
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="maindiv">
  <ul class="mydiv">

    <li data-context="SOME TEXT 1">sdfdsf</li>
    <li data-context="SOME TEXT 2">sdfdsf</li>
    <li data-context="SOME TEXT 3">sdfdsf</li>
    <li data-context="SOME TEXT 4">sdfdsf</li>
    <div class="detail"></div>
  </ul>

</div>

I don't think you should be using a list to do this. So i've changed the code structure to suit and given the old 'li' a class name 'item'. I also pass through a data attribute to help identify the currently selected item.

The way it works is that if the current selected item is clicked, the details div will hide, otherwise it will be revealed. If it is already open but a different item is clicked, it will remain open.

https://jsfiddle.net/z7phyztx/16/

<script>
$(".mydiv .item").click(function() {
    $this = $(this);
    if ($(this).hasClass('active')){
    $('.item').removeClass('active');
    $(".detail").hide("slow", function() {
      // Animation complete.
    });
    return false;
  }
  $('.item').removeClass('active');
  $(this).addClass('active');
  $(".detail").show("slow", function() {
    // Animation complete.
    $(this).attr('data-position', $this.data('position'));
  });
});

</script>

It can be done via both CSS3 and jQuery, but I am explaining with jQuery.

HTML:

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

JS:

$('.child').on('click', function() {
    $(this).siblings().removeClass('clicked');
    $(this).closest('.parent').find('.new-child').remove();
    if ($(this).closest('.parent').find('.new-child').length == 0) {
      $(this).addClass('clicked');
      $(this).closest('.parent').append('<div class="new-child hide" />');
      $('.new-child').fadeIn();
    }
 });

CSS:

.child {
  width: 200px;
  height: 200px;
  border: 1px solid;
  float: left;
  margin: 10px 20px;
}

.child:hover {
  background: #cfcfcf;
  cursor: pointer;
}

.parent::after,
.new-child::before {
  content: "";
  display: table;
  clear: both;
  clear: both;
}

.new-child {
  clear: both;
  width: 442px;
  height: 200px;
  margin: 10px 20px 0;
  border: 1px solid;
}

.clicked {
  background: #cfcfcf;
}

.hide {
  display: none;
}

Demo